ワードプレス使いのブロガーさんの中で、最強のテーマとまで言われているSTINGER3。見つけて使い始めてから、STINGER3のカスタマイズ記事を書いていますが、HUNTERという新バージョンもお目見えして、プロブロガーではないのに、私も何だかソワソワしています（笑）
HUNTERは、アフィリエイトを応援してくれる仕様になっているので、これから使ってみたいと思っています。（Enjilogのfacebookページで、いいね！した人限定に公開されているテーマです）
さて、前回はスマホ表示の記事（ページ）タイトルと、小見出し（h2とh3）の装飾をカスタマイズしてみました。文字サイズや好みによって、paddingとmarginは、数値を変えてお使いくださいねー。
今回は、トップページを少々カスタマイズしてみましょう。
女子ブロガー向けカスタマイズの手順その５
トップページをカスタマイズしよう
ヘッダー部分のサイトタイトル、ヘッダー画像のカスタマイズは終わりましたね。→ 女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう
ディスクリプションの表示を揃えよう
でも、サイトタイトル下の「サイト説明の文章」ディスクリプション部分がトップページとそれ以外のページで、文字色と文字の大きさが変わってしまうのが気になります。
トップページでは、こんな感じ。
固定ページや記事ページでは、文字が大きくなって、色も少し薄くなります。
これ、STINGER3の新バージョンでは対応済みなのですが、まだ私が旧バージョンを使用しているので、修正CSSを載せておきます。style.cssに、以下を追記すると全てのページのディスクリプションが揃います。
#h-l .descr {font-size: 12px;
color: rgb(102, 102, 102);
line-height: 16px;}あら！新バージョンでも、スマホ表示には未対応のようです。トップページ以外では、ディスクリプションが大きく表示されてしまいます。smart.cssに、以下を追記して揃えてください。
#h-l .descr {font-size: 12px;
color: #999;
line-height: 20px;}私は、文字の大きさや行間を変更しているので、皆さんと少しズレがあるかもしれません。line-heightは、ご自分の環境にあわせて変更して下さいね。
トップページの記事タイトルを2行に収めよう
記事タイトルは重要です。キャッチーで興味を引くタイトルを付けることが、記事を読んでもらうきっかけにつながります。短すぎるタイトルも長過ぎるタイトルも良くありません。
そして検索エンジンは、タイトルを32文字まで読み込みますので、私は記事タイトルを32文字以内にすると決めています。キーワードを前方に入れることもお忘れなく。
32文字以内と決めていますが、改行の関係で3行になってしまうことがあります。禁則処理ですね。そこで、トップページのタイトル文字の大きさを1px小さくして、対応しました。
#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {font-size: 23px;}スタイルシート（style.css）に、上の設定を追記しています。
トップページの記事の抜粋部分をコンパクトにしよう
新着順に記事が一覧で表示されるトップページですが、記事の抜粋部分の文字数が多いので、少し減らしたいと思います。
デフォルトでは4行のところ、私は文字フォントの変更と文字サイズを大きくしているため、5行になってしまいました。
記事一つ一つのスペースをコンパクトにしたいので、3行に収めます。管理画面→外観→テーマ編集→home.phpの中の数字を変更します。
<p class="dami"><?php echo mb_substr(strip_tags($post-> post_content),0,100).'...'; ?></p>
100を65にしました。私の環境では、これで5行から3行に縮めることができました。
<p class="dami"><?php echo mb_substr(strip_tags($post-> post_content),0,65).'...'; ?></p>
あっ、これは上のと違う記事のキャプチャ部分ですねー。ま、ここも3行になりましたよということで・・・。
トップページの記事タイトルを可愛くしよう
記事タイトルに少しだけ装飾をして、見た目を可愛くしてみましょう。
すでに記事ページのタイトルの装飾は終わっていますか？トップページから記事ページへ移動した時に、最初に目に入るタイトルとなるべく揃えた方が、移動した時に違和感が無くていいと思います。
私はこういう感じにしました。
水玉の下線を入れて、記事の抜粋分の行間を2px縮めました。
#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {
border-bottom: 5px dotted rgb(221, 160, 221);
padding: 0px 0px 5px;}
.dami {line-height: 26px;}タイトルの文字の色を変えてみたり、背景に色を入れてみたり、自分のサイトに合う装飾をして下さいね。
スマホ対応もお忘れなく
では、スマホで見た時も同じようにしてみましょう。
トップページの1記事部分の長さを見てみると、まずサムネイル画像、記事タイトル、日付とカテゴリー、そして記事の抜粋部分の順番で表示されます。ちょっと縦長すぎるので、隙間を詰めながら装飾を入れてみましょう。
記事タイトルに下線をいれ、日付とのすき間を詰め、サムネイル画像の上下の余白を減らし、全体の両端10pxの余白も取りました。これで、iPhone4でも見やすくなります。
#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {
border-bottom: dotted 4px #ffc0cb;
padding: 0px 0px 6px;
margin-bottom: 10px}
.sumbox {
padding-top: 0px;
padding-bottom: 0px;}
.post .entry .entry-content {
padding: 0px;}
コンパクトになりましたね。
テキストリンクの色をアドセンスと揃えよう
Googleのアドセンス部に入っている私は、日々（？）アドセンスの勉強をしています。最適化の方法のひとつに「サイトの配色と馴染ませる」という項目があります。
出来れば、アドセンスの背景色とサイトの背景色を揃えたいところですが、STINGER3は、サイドバーと記事内で同じコードを使用しているため、それぞれの広告の背景色を変えることは出来ません。でもまあ、背景色が薄い色ならば、それほど影響が無いかなーと考えています。
もうひとつ大事なことは、リンクの色を揃えることです。
a {color: #000080;}アドセンスのテキストリンクの色にSTINGER3のリンクの色を揃えるか、STINGER3のリンクの色をアドセンスに採用するか、お好きな方を選んでください。私はすでにアドセンスの色を決めていたので、STINGER3のリンクの色を変えました。
ちなみに、STINGER3のリンクの色は、rgb（84, 132, 200）なので、16進数で表記すると、#5484c8です。ちょっと薄いかもしれませんね。私は、濃い色の方が読みやすくて好きです。
トップページの半分が終わりました
トップページのヘッダーと本文の部分のカスタマイズが終わりました。ファビコンについても書きたかったのですが、長くなるので次回以降に書くことにします。次回は、サイドバーにメスを入れようと思います。お楽しみに。