PR

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

※当サイトはアフィリエイト広告を利用しています

stinger3

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

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

favi

デフォルトで入っているので、表示しないようにします。管理画面の「外観」→「テーマ編集」の、ヘッダーのファイル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フォルダーに入れ、コメントアウト状態から元に戻して表示させる、ということもできますね。

スポンサーリンク

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

背景の色を変えよう

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

snow #fffafa lavenderblush #fff0f5 
floralwhite #fffaf0 seashell #fff5ee 
ivory #fffff0 lightyellow #ffffe0 
mintcream #f5fffa honeydew #f0fff0 
snow white #fafdff aliceblue #f0f8ff 
oldlace #fdf5e6 beige #f5f5dc 

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

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

背景色の変更の仕方

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

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

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

st3

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

IMG_0816

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

パソコンとスマホで背景色を変えたい時

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

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

body {
background-color: #f3f3f3;
}

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

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

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

st4

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

IMG_0817

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

フォントを変えよう

パソコンで見る時用のフォント

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

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

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

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

st5

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

st6

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

スマホで見る時用のフォント

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

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

IMG_0818

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

IMG_0819

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

サイト全体が可愛い雰囲気になりました。

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

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

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

タイトルとURLをコピーしました