気まぐれIT

Windows, Linux, Apache, XOOPS, Software ~ デジカメ, DV, DVD などのデジタル家電のことまで。。。
ウイルスバスター トレンドマイクロ・オンラインショップ   デル株式会社

スポンサーサイト



上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

WordPressの画面のカスタマイズ(4) テーマエディタ



■WordPressのテーマエディタを利用する 

今回はWordPressの「デザイン」の3番目の「テーマエディタ」を利用します。
(テーマは前々回説明した「WordPress Default(2)」を使います)

テーマエディタ」でははテーマを構成するテンプレートファイル(PHP)スタイルシート(CSS)を編集することができます。
これらを自由自在に操るには広範な知識が必要となりますので、画面の見栄え(文字の大きさや装飾など)を定義するスタイルシートについて少しだけ触れてみます。

画面右下の「スタイル」のところにある「スタイルシート(style.css)」をクリックすると左の編集エリアに「style.css」が読み込まれ編集可能になります。
(テキストエディタでこのファイルを直接開いて編集することも可能ですが、レンタルサーバを利用しているときなどは、この方法が直接変更ができて便利です)




●サイドバーの項目タイトルの文字の大きさを変える

サイドバーの「アーカイブ」「カテゴリ」などの項目タイトルの文字の大きさを変えてみます。
109行目あたりに下記のような記述があると思います。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 font-size: 1.2em;
 }


これを次のように変更してみます

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 }


変更したら編集エリアの下の「ファイルを更新」をクリックして更新してブログ画面を確認してみてください。
em」は標準文字に対する文字の高さの相対倍率を表す単位なので少し大きくなることが確認できると思います。 いろいろ変えて確認してみてください。

尚、スタイルシートでは「/*」~「*/」の間はコメントとみなされますので、以前の設定内容をコメントとして残すようにしておけば元に戻すのも簡単になります。


●サイドバーの項目タイトルの文字に背景色を付ける

今度は項目タイトルの文字に背景色を付けてみます。
上記と同じ場所の内容を下記のように変更してみてください。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 background: #ccccff;
 }


これまでの説明分をすべて反映させると下図のようになっているでしょうか?


※ 「カレンダー」の部分が水色の帯だけになって文字が表示されていない?
⇒ 前回の「ウィジェット」の画面で「カレンダー」の「編集」を選択し、タイトル欄に「カレンダー」を入力して保存してください


●サイドバーの項目タイトルの文字の背景に画像を使う

次のように記述すると、背景色の代わりに画像を使うことができます。

#sidebar h2 {
 font-family: 'Lucida Grande', Verdana, Sans-Serif;
 /* font-size: 1.2em;
 */
 font-size: 1.6em;
 background: #ccccff url('images/bg-blue18.jpg') repeat;
 }

※ イメージファイルの名前は任意です
※ 「repeat」の部分は「no-repeat」「repeat-x」「repeat-t」などのオプションがあります

例として、 この画像  を default2\images\bg-blue18.jpg として保存し、上記を反映させると下記のような画面になると思います。
いろいろ試してみてください。



●まとめ

冒頭でも述べましたとおり、テーマファイルの変更を自由自在に行なうには相当のスキルが必要です。
自分のイメージをどのようにしたら実現できるか、関連の参考書やサイトを参考にいろいろチャレンジしてみてください。


次回は、ヘッダーの背景と文字の色 利用して、ヘッダー部分の背景色を変えてみたいと思います。

<このブログ内の関連記事>
スポンサーサイト

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。