最近、WordPressやTypePadなどブログデザインのカスタマイズのお手伝いをさせていただくことも多いのです。そのような中、どのような手順でやっているか、どうやってカスタマイズしたら良いのか、という質問をいただくことも多いです。その都度、説明することも多いのですが、せっかくなので動画でまとめてみました。何も準備せずに（リハもせずに）収録したので少し寝ぼけた感じで恐縮ですが、動画で紹介させていただきます。
ここでいうカスタマイズとは、HTMLとCSSだけが対象（それぞれの独自タグや機能は含まない）であり、FirefoxとそのアドオンであるFirebugを使ったカスタマイズワークフローの紹介と思っていただければ、と思います。
上記Youtube動画（10分）を見てすぐピンとくるかもしれませんが、下記文章で補足をしておきます。
※HD画質でアップしているので「720p」を選択して全画面表示するとソースの文字などもなんとか読めます
ブラウザ上で見栄えをシミュレートしまくる！
もしかしたら、従来のテーマカスタマイズ等で、管理画面などでスタイルシートを修正し、その都度トップページなどにアクセスして画面表示を確認していた方もいらっしゃるかもしれません。
Firebugを使えば、そのソース表示画面内のソースを直接編集してリアルタイムに画面の変化を見ていくことが出来ます。つまり細かい幅や高さの数字の調整や色番号の変更などもここでシミュレートしていくことができます。
まずはデザインレイアウトを調整したい部分を決めて、その部分を納得のいく形まで調整してから、初めて管理画面で該当するスタイルシートやHTMLを編集すると良いでしょう。
編集対象場所を探すのはFirebugに任せる
動画中にも登場しますが、要素を探すボタンがあるので、それを使って、ブラウザ上の表示されている画面で確認したい要素のエリアを指定してクリックすると、その該当箇所のHTMLが選択された状態で表示されます。
実はこれが一番便利で、HTMLソースを追うよりも一発で該当箇所がわかるので、ラクです。
ここで同様にシミュレートして、どのようにカスタマイズするかきまったら、また管理画面で編集するという流れが、効率的です。
もっと使い方があるけど・・・
この2点を知っているだけでも大きいので、試してみてください。
ちょっとしたブログのテーマの修正とかに役にたつと思います。たとえばサイドバーの色を変えるだとか、タイトルのフォントサイズを小さくするとか、ちょっとしたことをしたい方が多いはずです。
しかし、700行以上あるスタイルシートのどこをいじれば良いのかわからない方も少なくないでしょう。
このFirebugを使えば、変えたい場所をマウスで選んで、その該当箇所のHTMLを調べて、それに対応するスタイルシートのファイル名と何行目にあるかまでわかってしまいます。重い腰が少し軽くなるでしょう。
細かいテンプレートタグやテーマファイルの構成などはすでにあるネット上の情報や書籍などが参考になります。
コメント