*

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

stinger3

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

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

favi

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

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

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

まだ設定していない方は、自分のサイト用に可愛いファビコンを作りましょう。その際、ファビコンのファイル名を「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)が開きます。その一番下に、これを全部コピぺして下さい。

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

st5

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

st6

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

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

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

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

IMG_0818

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

IMG_0819

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

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

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

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

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

スポンサードリンク

スポンサードリンク

この記事が少しでもあなたのお役に立ちますように
  • このエントリーをはてなブックマークに追加

2013/09/06 | WordPress


サイトの更新情報をお知らせしています

follow us in feedly follow me

関連記事

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

日々進化を遂げているワードプレスの無料テーマStingerは、...

記事を読む

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

ワードプレス使いのブロガーさんの中で、最強のテーマとまで言われ...

記事を読む

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

前回は、記事タイトルとページタイトル、小見出し(h2とh3)の...

記事を読む

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

私が現在カスタマイズしているSTINGER3のバージョンは、2...

記事を読む

新着記事

無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイトニ...

記事を読む

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日そればか...

記事を読む

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン」さ...

記事を読む

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」サウ...

記事を読む

ふなっしーの「恋するフォーチュンクッキー」みんなと踊ったなっしー

AKB48の「恋するフォーチュンクッキー」を、いろいろな人たち...

記事を読む

コメント/トラックバック (1件)

トラックバック用URL:

コメントフィード

  1. […] 続)女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう | えけこのく… […]




管理人にのみ公開されます

*

スポンサードリンク


follow us in feedly follow me
無料化粧品モニター【全国9店舗】保湿も美白もできるコラーゲンゲル

無料で化粧品がもらえるお得なモニター情報です。ノエビアの薬用ホワイ...

消えものギフトの最高峰!とろける幻の高級ふりかけ「口どけ」さん

ふなっしーとパンとスープカレーが大好きな私ですが、毎日それ...

ポーズパンで人気のブッロ!バターの香りとフォアグラパテで幸せ~

2013年10月19日にオープンしたパン屋さん「ポーズパン...

ふな ふな ふなっしー♪ふなっしーデビューCD、本日発売なっし~

ふなっしーの魂の叫び!激しくもポップな「ふなメタルロック」...

→もっと見る

  •  
  •  

  • Amazonアソシエイト・プログラム規約による記載
    えけこのくるるはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
PAGE TOP ↑