Twenty Elevenのカスタマイズ WordPress

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』に変更して、ブラウザで確認してみます。

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

本日は以上です。

-Twenty Elevenのカスタマイズ, WordPress
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.