webサイト制作の勉強 | web-sync

webサイト制作の勉強を2014年8月後半から始めました。このページはその履歴を残すために作成しています。

Wordpressサイト作成

はてなブログは広告がたくさん出るので、なるべく広告が出ないブログが良いなと思っていました。ちょうどWordPressを習ったので、WordPressで作ってみました。

初心者にとっては結構大変でした。

1ピクセルの部屋 | websync

 

投稿はまだ5件弱となっています。

今後は、はてなではなく、こちらに情報をまとめようかと考えています。

こちらの過去記事もwordpressにコピーするつもりです。

まだ個別ページのCSSが完成していませんが…

 

ただ、はてなブログの方が記事は書きやすい気が少ししています。

WordPressはカスタムが自由に出来る一方、CSSを自分で設定しないとならないので、

雛形を作るまでかなり時間がかかることがわかりました。

 

参考


覚えるべきWordPressテンプレートタグ | はじめてのWordPressまとめ

Whois情報公開代理

無料サーバーでドメインを取得したのだが、whois情報公開代理というものがあり、なんのこっちゃ?となった。

 

お名前.comには以下のとおりに記載されていたので、情報公開代行をすることにした。知らないとコワイ部分である。

ドメインの登録情報は、ICANN(※)のポリシーにより、インターネット上のWhoisで公開することを義務付けられています。Whoisとして公開される登録情報に当たるものは、ドメインの登録者、管理担当者、経理担当者、技術担当者および公開連絡窓口情報(汎用JPドメインのみ)などです。お名前.comでは、プライバシー保護のため、個人情報をWhoisに掲載されることを希望されない方のために「Whois情報公開代行」を提供しています。 

ドメイン取るなら お名前.com:Whois情報公開代行

.htaccess PCとスマホの振り分け

.htaccessスマホからアクセスした際に、スマホ用サイトに移動するように設定を行った。下記①のユーザーエージェントの判定に加えて、②のVary HTTPヘッダーを追記することによって、PCサイトとスマホサイトの関連付けを行った。

①+②の.htaccessをサーバーのpublic_htmlフォルダに配置し、スマホに設置したPCサイトへのaリンクには記事にあるとおり、

<a href="http://www.example.com/?mode=pc">PC用サイトはこちら</a>

として、「?mode=pc」を追加した。

このリンクから移動した場合には、スマートフォンからのアクセスであっても、PC用サイトを閲覧できます。とのことだ。

 

PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]
</IfModule>

 

②Vary HTTPヘッダー

スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事(海外&国内SEO情報) | 海外&国内SEO情報ウォッチ | Web担当者Forum

Header set Vary User-Agent 

 

①+②=

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /sp/ [R,L]
Header set Vary User-Agent </IfModule>

(android) Oper mobile, mini , classic


アンドロイドのモバイル版Operaがmobile、mini、classicと3種類あり、
気になったので調べてみました。
iosは今のところ、miniだけのようです。

http://loumo.jp/wp/archive/20120306230003/

http://blog.livedoor.jp/shobrighton/archives/30863387.html

classicは、レンダリングエンジンが現在のwebkitてはなく、prestoというものらしい。
そして、
mobileとminiの大きな違いは以下の5点らしい。

多分、flashは使えないと思うけれど。

Opera Turbo のOn/Offを自分で選択できるのが Opera Mobile, 強制Onなのが Opera Mini.
HTML5 が使えるのが Opera Mobile, 使えないのが Opera Mini.
Flash が使えるのが Opera Mobile, 使えないのが Opera Mini.
設定を細かくできるのが Opera Mobile, できないのが Opera Mini.
ストレージを10Mも使うのが Opera Mobile, 1M程度で済むのが Opera Mini.

(android) Opera MAX

通信量をカット出来るアプリ、opera maxをアンドロイドケータイに入れてみました。mvnoで使用しています。

下記の記事にある通り、feedlyでは通信量がカット出来てるようだ。恐らく、画像の分が圧縮されているのかも?と思う。

毎回設定をオンにしなければならない点が面倒だが、重宝しそうなアプリだ。

この記事もアンドロイドから投稿しているので、opera max経由てす。


http://gigazine.net/news/20141120-opera-max/

(mac)Photoshop ブラシの置き場所

Photoshopのブラシの置き場所を忘れていたので、調べました。

そのメモ。


Photoshopブラシの保存場所▼
アプリケーション\Adobe Photoshop バージョン表示\Presets\Brushes
上記の場所に保存してブラシを読み込みをする

Fixed固定ナビゲーション

現在のweb制作のモバイル版でも、固定メニューを使用しました。

ここは参考になりました。

 


Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG

WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」


WEBデザイナーはヘビーユース間違い無しのカラーパレットジェネレーター「Color Scheme Designer」 | ライフハッカー[日本版]

 


Paletton - The Color Scheme Designer

次々とセンスある配色パターンを提案してくれるサイト「Coolors」


次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー[日本版]

 


Coolors - The super fast color palettes generator!

.htaccess作成

webサイトの初めての制作もある程度終わりに近づいています。

PCサイトとモバイルサイトを作成しました。

いよいよサーバーへのアップロードです。

クローラに検索されたくないので、robots.txtをアップロードして、アクセス制限もかけたいので(クライアント確認のため)、.htaccessも作成しています。

 

ジェネレーターでテキストを生成して、index.htmlをアップロードしたのですが、反映されていない…

 

なぜでしょうか…

アップロードするべきディレクトリも確認したのですが…

明日、先生にお伺いし用と思います。

 

.htaccess ファイルを簡単作成「.htaccess Editor」

 


.htaccessファイルの書き方と設置方法 [ホームページ作成] All About


基本認証でアクセス制限をかける方法 [ホームページ作成] All About


ログインページに他人がアクセスするのを拒否する方法 [ホームページ作成] All About

【HTML】 もう悩まない!タグの入れ子ルールまとめ

これも便利!

 


【HTML】 もう悩まない!タグの入れ子ルールまとめ - NAVER まとめ

Nexus7 2012 Android5.0 Lolipop に手動アップデート

Nexus7 2012を所有しているのですが、Android 5.0 OTAがいつまでたっても降りてこないので、手動で4.4KitKatから手動でアップデートしました。OSはWindowsを使用しました。

 

方法は以下を参考にしました。


Nexus 7(2012)にAndroid 5.0 Lollipopをインストールする方法 – ファクトリーイメージを焼く! ≫ 使い方・方法まとめサイト - usedoor

 

 

アップデートしたての感想は…通知などのアニメーションが変化したという感じでしょうか。「通知」が強化されたそうですが、iOSも所有している私としては、特に…

もう少し使用して、マテリアルデザインを体感してみたいと思います。

Android - 5.0 Lollipop

ライブドアニュース

ライブドアニュースの、さっくりと言うと、は良いシステムだと思う。

長いニュースのポイントを3つ最初に提示して、続きを読むかどうかを選択できる。
どこの誰がポイントを抽出しているかは分からないが、特に問題はないと思う。

http://news.livedoor.com/

HTML CSS Javascriptの圧縮 (Yui Compressor)


たった1秒!Sublime TextでCSS/JavaScriptを簡単に圧縮・整形する方法 | Web Design Workbook

 

SublimeTextを使用して、HTML CSS Javascriptの圧縮を行おうとしたのですが、必要となるJavaが私のMacには入りませんでした。(OSが古いため?)

無料のソフトも見つけたのですが、これもまた、入りませんでした。(OSが古いため)

どうしようか迷っていましたが、Yui Compressorを見つけました。

以下からダウンロードした後、ファイル内のtoolに入っているHTMLを使用してコードの圧縮を行えました。

コピペをしないとデータとして保存できない点は面倒ですが、出来たので良かったです。

その時に、コメントアウトを削除するツールが世の中にあるのかどうかが気になりました。後日探してみたいと思います。

Downloads · yui/yuicompressor · GitHub

f:id:web-sync:20141109234626p:plain