Twenty Elevenテーマのヘッダー部分をカスタマイズ

Twenty Elevenのカスタマイズ/その3

Twnety Elevenのテーマをカスタマイズするのに、以前ご紹介した『DreamweaverでWordPressの簡単編集』でご紹介したDreamweaverの『動的関連ファイル』機能を使って、カスタマイズする方法をご紹介します。まず、ルートフォルダの『index.php』ファイルを開き、『分割ビュー』→『ライブコード』→『インスペクト』とクリックします。デザインビューでマウスオーバーするとマウスの位置によって色が変わります。それに伴い、コードビューも該当箇所の色が変わります。

変更したい箇所にマウスオーバーしたら、『Alt+左クリック』または、『右クリック』→『コードナビゲータ』で、コードナビゲータが起動しますので、変更したい要素名をクリックします。同じ要素名が複数ある場合は、マウスオーバーすると中身を確認することができます。

CSSスタイルの要素名を右クリックすると直接値を変更することができます。

#site-titleのpaddingを『1.2em 0 0』、#site-descriptionのmarginを『0 270px 1.2em 0』に変更して、ブラウザで確認してみます。

このように視覚で確認しながら作業ができるのでお奨めです。

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

  1. […] [3.x対応] この他多数の書籍があります。 【参考サイト情報】 ヘッダの高さの調整 ヘッダの検索ボックスを消す […]

コメント


コメントをどうぞ

このページの先頭へ