*

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

stinger3

私が現在カスタマイズしているSTINGER3のバージョンは、20130901です。STINGERは、バージョンアップを繰り返し、これからも進化していきますので、バージョンによって表記が事なる場面が出てくるかもしれないことをご了承くださいませ。

さて前回の記事では、背景色と文字フォントの変更をしました。あとは、タイトルや小見出しの装飾をして、ほとんど仕上げになります。

あ、ちょっと待ってください!

「文字の大きさは変更しないで頑張る」と言いましたが、2pxだけ大きくしてもいいですか?本当にスイマセン。小さい文字の方が同じ面積でたくさんの情報を表示できるということも理解しております。でもやっぱり、2pxだけ大きくさせてください。大きい方が好みなんです!

ということで、スタイルシート(style.css)の一番下に、私はこれを追記します。文字の大きさは好みもあると思うので、同じにするかどうかは、個人の判断にお任せしますー。

p {
font-size: 17px;
line-height: 30px;
}

文字高を少し大きくしたので、行間も少し広げました。

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

記事タイトル、ページタイトルの装飾を変えよう

これがデフォルトの投稿記事のタイトルです。文字色の16進数は、#333333、大きさは、30pxです。

st-h1

タイトルは、これから全ての投稿記事と固定ページの顔になりますので、読みやすく、注意をひき、尚かつ可愛くしたいと思います。

文字の色を変えてみよう

st-h1-1

例えば、文字の色を紫色にするには、以下のコードをスタイルシート(style.css)の一番下に追記します。色の名前(カラーネーム)ではなく、16進数で指定するには、purpleの代わりに、#800080としてください。色の名前や16進数は、WEB色味本 原色大辞典 -HTML Color Namesで、自由に選べます。薄い色より、濃い色の方が読みやすいです。

.entry-title {
color: purple;
}

背景色を変えてみよう

st-h1-2

文字の色は元のままで、背景に色を入れてみました。これは、サイトの背景色より少し濃いめにしましたが、同じ色にしても良いと思います。marginとpaddingは、お好みで変更してください。

.entry-title {
background-color: #fff0f5;
margin-right: -10px;
margin-left: -10px;
padding: 5px 10px;
}

色々なパターンのご紹介

2重線で囲んでみました。

st-h1-3

.entry-title {
border: double 4px #ffc0cb;
padding: 5px 10px;
}

下線のみで、水玉のラインにしてみました。

st-h1-4

.entry-title {
border-bottom: dotted 7px #ffc0cb;
padding: 0px 5px 8px;
}

背景に色を入れて、点線のラインとの合わせ技です。

st-h1-5

.entry-title {
background-color: #fff0f5;
margin-right: -10px;
margin-left: -10px;
padding: 5px 10px;
border: dashed 3px #ffc0cb;
}

というように、スタイルシート(style.css)に書き込むだけで、コアファイルをいじらずに、見た目を可愛くすることができます。

画像を入れてみよう

アイコンを左側に表示させるには、背景に画像を固定し、アイコン画像に文字がかからないよう右側に寄せます。

st-h1-6

.entry-title {
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position: left center;
padding-left: 72px;
margin-left: -10px;
margin-right: -5px;
}

フリー素材*ヒバナさんのアイコンを使わせて頂いております。ありがとうございます。アイコン画像は、好みの大きさに変更してお使いください。ちなみにコレは、横幅を50pxに縮小してから表示させています。

ここまでのタイトルの装飾の仕方を見てきて、文字色の変え方、背景色の入れ方、ライン線の引き方、画像の入れ方など、スタイルシートの見方や書き方もわかってきましたよね。

装飾は1個だけでなく、背景に色を入れて、文字の色を変えて、さらに線を引くという複合技もできちゃいます。

色々な装飾にチャレンジしてみて、あなただけのオリジナルなサイトを作ってください。記事タイトルに可愛い装飾があると、ブログを書くのも楽しくなりますよー。

小見出しの装飾を変えてみよう

stingerは、サイトタイトルや記事タイトル、小見出しなど全てを簡単な装飾にしています。これは、ブログに華美な装飾は要らないという男気と、カスタマイズする楽しみの2通りの解釈があると思います。

デフォルトのh2とh3の表示は、こういう感じです。シンプルでさっぱりしていますね。ちょっと女子向けにしてみましょう。

st-h2

文字の色と装飾を変えよう

ずっと紫、紫と言い続けているので、ここでも紫色にしてみましょう。h2は、文字色と装飾を紫色に、h3は装飾のみ紫色にしました。h2とh3は隣接することがあるので、バランスを見ながら変えてみて下さい。

st-h2-1

h2 {
padding: 5px 10px 5px 25px;
border-left: 15px double purple;
color: purple;
}

.post h3 {
padding: 1px 10px 4px 15px;
color: rgb(51, 51, 51);
border-left: 10px solid purple;
}

次は、薄い色のパターンです。h2の背景に色を入れて、h3は二重線にしてみました。

st-h2-2

h2 {
margin: 20px -15px 20px -15px;
background-color: rgb(255, 240, 245);
padding: 5px 15px 5px 15px;
border-left: 0px solid rgb(26, 26, 26);
}
.post h3 {
padding: 1px 10px 4px 15px;
border-left: 15px double #dda0dd;
}

もうちょっとシンプルにしてみましょう。ブログのイメージにあう色を決めて、可愛く配色してみてくださいねー。

st-h2-3

h2 {
margin: 20px -15px 20px -15px;
background-color: #fff0f5;
padding: 5px 15px 5px 15px;
border-left: 0px solid rgb(26, 26, 26);
border-bottom: 1px solid #da70d6;
}
.post h3 {
padding: 1px 10px 4px 15px;
border-left: 10px solid #da70d6;
}

さりげなく、可愛く

いろいろ試してみましが、小見出しは同じページに何度も登場することがあるので、あまり飾り過ぎると、ゴテゴテしてしつこい感じになりますね。シンプルかつ、わかりやすい装飾がおすすめです。同じようにh4の装飾も変更してみてください。

では次回、スマホ表示の時の小見出しの装飾でお会いしましょう。お楽しみにー。

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

追記:吹き出し、リボンなどの装飾を簡単に作りたい方はこちらへ
見出しデザインに迷ったら!吹き出しやリボンも一瞬で作れるCSS見出しジェネレーター。

スポンサードリンク

スポンサードリンク

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

2013/09/10 | WordPress


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

follow us in feedly follow me

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

前回の記事で、ヘッダー周辺を可愛くカスタマイズすることができま...

記事を読む

新着記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

トラックバック用URL:

コメントフィード

  1. […] 女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう […]

  2. […] […]

  3. いつも参考にさせて頂いております。
    「背景に色を入れて、点線のラインとの合わせ技」、のところの「border: dushed 3px #ffc0cb」の「dushed」は「dashed」ですので訂正をお願い致します。
    今後も素敵なブログ作りに期待しております♪

  4. 教えて頂いて、ありがとうございます!助かります。また、よろしくお願いします♪

  5. 始めまして。村松と申します。
    会社のブログをワードプレスで書いています。
    stinger2を使っていましたがあなたのブログにいきつき
    テーマをstinger3に変えてみました。
    すごくわかりやすい説明で本当に助かっています。
    カスタマイズする事が楽しいですね。
    ひとつ質問ですが
    タイトルの下にドットをカスタマイズしたのですが
    水玉ではなく四角になってしまいました。
    どこがダメなのかわかりません。
    原因がわかりましたら教えてください。
    宜しくおねがいいたします。

  6. 村松さん、こんにちは。お役にたててうれしいです。
    タイトルの下に引く線は、dashed が破線、dotted は点線になりますが、使っているブラウザによって水玉に見えないようです。FireFox、IEだと水玉になり、Chrome、Safariでは太い点線になります。ご指摘ありがとうございます。

  7. こんにちは、はじめましてたかのと言います。

    記事下の関連記事のカスタマイズは、どうやってやるんでしょうか?

    記事数の数を設定したり。教えていただけますか。

  8. たかのさん、こんにちは。

    記事下の関連記事は、single.php内の<!–関連記事–>以下の部分になります。’&showposts=5′ の数字の部分が表示数なので、この数値を変更すると、表示本数が変わります。

    バージョンが新しいものは、’posts_per_page’=> 10, となっています。同じように表示させたい数値に変更してください。

    http://www.32style.com/related-article-sidebyside/
    宜しければ、こちらの記事も参考になると思います。

  9. はじめまして。
    可愛いカスタマイズのご紹介ありがとうございます!
    二重線のを使わせていただきました♪

  10. むーちさん、こんにちは。
    コメントありがとうございます!




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

*

スポンサードリンク


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

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

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

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

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

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

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

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

→もっと見る

  •  
  •  

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