気まぐれIT

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

スポンサーサイト



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

WordPressの画面のカスタマイズ(5) ヘッダーの背景



- 記事中の小さい画像をクリックすると別ウィンドウで拡大表示します-

■WordPressのヘッダーの背景を変える 

今回はWordPressの「デザイン」の一番⇒の「ヘッダーの背景と文字の色」を利用してみます。
(テーマは以前 説明した「WordPress Default(2)」を使います)

メニューに「ヘッダーの背景と文字の色」が現れるテーマは「WordPress Default」以外ではあまり見かけませんので、簡単に説明します。
尚、画面の表示レイアウトは、ブラウザの表示の違いが影響して「IE」と「Firefox」で異なりますが、説明はIEの画面で行ないます。




●ヘッダーの背景を変える

水色のバーの右端の「詳細」をクリックすると右下に下記のような項目が表示されます
  • フォントの色 ・・・文字色をカラーコードで指定
  • グラデーション上側の色 ・・・背景色の上側の色をカラーコードで指定
  • グラデーション下側の色 ・・・背景色の下側の色をカラーコードで指定
  • デフォルト設定に戻す ・・・変更をリセットしてデフォルトに戻す
  • テキスト表示の切替え ・・・文字表示のON/OFFを切替える
実際の色を確認しながら色を選択する場合は、水色のバーの「フォントの色」、「グラデーション上側の色」などをクリックして選択します。


水色のバーの「グラデーション上側の色」をクリックすると、左図のようにカラーピッカーが現れます


カラーピッカーの色の中から希望の色をマウスでクリックして指定すると、画面の色が変わり、右側の入力欄にカラーコードが入ります
左図ではグレーの(#777777)を指定しています


同様に「グラデーション下側の色」をクリックして、カラーピッカーから希望の色を選択します
左図では黒の(#000000)を指定しています


色の指定が終わったら「カラーピッカーを閉じる」をクリックしてカラーピッカーを閉じます

色の指定が終わったら「ヘッダーを更新」をクリックして変更内容が反映させます

変更後のブログ画面は下図のようになります。



但し、「カレンダー」などの項目タイトルの背景が前回の説明のままでは水色でバランスが悪いのでグレーに変更しています
(スタイルシートを「background: #ccccff;」 ⇒ 「background: #cccccc;」)に変更)


次回は、ヘッダーに任意の画像を表示させてみます

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

コメントの投稿

URL
コメント
パスワード
秘密
管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://a77.blog103.fc2.com/tb.php/10-61db2d0e
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。