続）女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

前回の記事で、ヘッダー周辺を可愛くカスタマイズすることができました。今回は、背景の色を女子風に変更して、フォントも好みのものに変えてみましょう。

あ、その前にブラウザのアイコン表示、気になりませんか？

デフォルトで入っているので、表示しないようにします。管理画面の「外観」→「テーマ編集」の、ヘッダーのファイルheader.phpの30行目に、ファビコンを表示させるタグがあります。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />

デフォルトのファビコンを表示しないようにするには、このタグを丸ごと削除したり、テーマ内にある「rogo.ico」というファイルを削除したり、力技ですがファイル名を1文字変える（消す）などの方法があります。なんか不安で残しておきたい方は、コメントアウトしましょう。以下のように変更してください。

<!-- <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" /> -->

すでにファビコンを設定している方は、タグの削除や変更で元のファビコンが表示されるようになります。

まだ設定していない方は、自分のサイト用に可愛いファビコンを作りましょう。その際、ファビコンのファイル名を「rogo.ico」にして、テーマのimagesフォルダーに入れ、コメントアウト状態から元に戻して表示させる、ということもできますね。

女子ブロガー向けカスタマイズの手順その２

女子ブロガーにおすすめ、可愛い背景色をいくつかセレクトしてみました。

私は、snowが大好きなので、背景色はこれにします。

この中に気に入った背景色が見つからない方は、WEB色味本原色大辞典 -HTML Color Namesで、お気に入りの色を探してみて下さい。STINGERというテーマは、記事の背景色は白色ですが、サイドバーは色が入るので、薄い色の方が合うと思います。

いよいよ背景色を変更しましょう。背景色によって、ブログの印象って変わりますよねー。もちろん、白色 #ffffff にするというのもありです。

管理画面の「外観」→「背景」で、背景色を設定します。背景には画像も設定できるので、壁紙にすることもできます。ここで背景を設定すると、PCでもタブレットでもスマホでも、同じ背景表示になります。

PCで見た時のヘッダー部↓

スマホで見た時のヘッダー部↓

すっかり可愛くなりました。これでブログを書く気力が湧きますー。

えっ、パソコンで見る時の背景色と、スマホで見る時の背景色を変えたい？そう言う人もいるのかしらん？と思いながら、設定してみました。

管理画面の「外観」→「テーマの編集」を押すと、スタイルシート（style.css）が開きます。上から順番に見ていると、すぐに背景色の設定が見つかります。

body {
background-color: #f3f3f3;
}

この「#f3f3f3」をパソコン・タブレットで見る時に表示させたいカラーコードに変更して下さい。smart.css内にも同じものがあるので、こちらは、スマホで見る時に表示させたいカラーコードに変更して下さい。真ん中より少し下ぐらいの616行目にあります。

ちなみに、管理画面の「外観」→「背景」で、背景色を設定している時は、反映されませんのでご注意ください。その場合、管理画面の「外観」→「背景」で、背景色の設定を削除（クリア）して下さい。

PCで見た時のヘッダー部↓

スマホで見た時のヘッダー部↓

な、何かのお役にたてれば・・・。

色んなフォントがあるけど、やっぱり可愛くて女子っぽい、丸っこい文字がいいよねー。私のおすすめのフォント設定は、これです。

管理画面の「外観」→「テーマの編集」を押すと、スタイルシート（style.css）が開きます。その一番下に、これを全部コピぺして下さい。

* {
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}

元のフォント設定の表示↓

フォントの設定を変更すると↓

私は、WindowsでFireFoxを使っています。Google ChromeとSafari、IEの確認はしましたが、Macでも可愛く表示されているといいなー。

スマホでは、すでにきれいなフォントで表示されてますが、数字とかアルファベットなどがちょっと良くなる気がするので、やっぱり変更しましょう。管理画面の「外観」→「テーマの編集」で、smart.cssの一番下に先ほどのフォント設定を全部コピぺして下さい。

元のフォント設定の表示↓

フォントの設定を変更すると↓

よく見ないとわからないけど、確かに英数字がいい感じ♪

文字サイズを変更したい気持ちも少しありますが、バージョンアップが行われた時に面倒なので、私はデフォルトで頑張ります。それに、ものすごくカスタマイズしちゃうとバージョンアップ時に苦労するのは自分です。最低限の変更だけ加えて、自分らしさを出して行けたらと思っています。

次回は、記事タイトルと小見出しに装飾を加えていきましょう。お楽しみにー。