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

stinger3

ワードプレス使いのブロガーさんの中で、最強のテーマとまで言われているSTINGER3。見つけて使い始めてから、STINGER3のカスタマイズ記事を書いていますが、HUNTERという新バージョンもお目見えして、プロブロガーではないのに、私も何だかソワソワしています（笑）

HUNTERは、アフィリエイトを応援してくれる仕様になっているので、これから使ってみたいと思っています。（Enjilogのfacebookページで、いいね！した人限定に公開されているテーマです）

さて、前回はスマホ表示の記事（ページ）タイトルと、小見出し（h2とh3）の装飾をカスタマイズしてみました。文字サイズや好みによって、paddingとmarginは、数値を変えてお使いくださいねー。

今回は、トップページを少々カスタマイズしてみましょう。

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

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

トップページをカスタマイズしよう

ヘッダー部分のサイトタイトル、ヘッダー画像のカスタマイズは終わりましたね。→ 女子ブロガー向けにWPテーマSTINGER3をカスタマイズしよう

ディスクリプションの表示を揃えよう

でも、サイトタイトル下の「サイト説明の文章」ディスクリプション部分がトップページとそれ以外のページで、文字色と文字の大きさが変わってしまうのが気になります。

トップページでは、こんな感じ。

description

固定ページや記事ページでは、文字が大きくなって、色も少し薄くなります。

description2

これ、STINGER3の新バージョンでは対応済みなのですが、まだ私が旧バージョンを使用しているので、修正CSSを載せておきます。style.cssに、以下を追記すると全てのページのディスクリプションが揃います。

#h-l .descr {font-size: 12px;
color: rgb(102, 102, 102);
line-height: 16px;}

#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;}

#h-l .descr {font-size: 12px;

color: #999;

line-height: 20px;}

私は、文字の大きさや行間を変更しているので、皆さんと少しズレがあるかもしれません。line-heightは、ご自分の環境にあわせて変更して下さいね。

トップページの記事タイトルを2行に収めよう

記事タイトルは重要です。キャッチーで興味を引くタイトルを付けることが、記事を読んでもらうきっかけにつながります。短すぎるタイトルも長過ぎるタイトルも良くありません。

そして検索エンジンは、タイトルを32文字まで読み込みますので、私は記事タイトルを32文字以内にすると決めています。キーワードを前方に入れることもお忘れなく。

top2

32文字以内と決めていますが、改行の関係で3行になってしまうことがあります。禁則処理ですね。そこで、トップページのタイトル文字の大きさを1px小さくして、対応しました。

top3

#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {font-size: 23px;}

1	#container #wrap #wrap-in #main .post .entry .entry-content .entry-title-ac {font-size: 23px;}

スタイルシート（style.css）に、上の設定を追記しています。

トップページの記事の抜粋部分をコンパクトにしよう

新着順に記事が一覧で表示されるトップページですが、記事の抜粋部分の文字数が多いので、少し減らしたいと思います。

デフォルトでは4行のところ、私は文字フォントの変更と文字サイズを大きくしているため、5行になってしまいました。

top

記事一つ一つのスペースをコンパクトにしたいので、3行に収めます。管理画面→外観→テーマ編集→home.phpの中の数字を変更します。

<p class="dami"><?php echo mb_substr(strip_tags($post-> post_content),0,100).'...'; ?></p>

1	<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>

1	<p class="dami"><?php echo mb_substr(strip_tags($post-> post_content),0,65).'...'; ?></p>

top4

あっ、これは上のと違う記事のキャプチャ部分ですねー。ま、ここも3行になりましたよということで・・・。

トップページの記事タイトルを可愛くしよう

記事タイトルに少しだけ装飾をして、見た目を可愛くしてみましょう。

すでに記事ページのタイトルの装飾は終わっていますか？トップページから記事ページへ移動した時に、最初に目に入るタイトルとなるべく揃えた方が、移動した時に違和感が無くていいと思います。

私はこういう感じにしました。

top5

水玉の下線を入れて、記事の抜粋分の行間を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;}

#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記事部分の長さを見てみると、まずサムネイル画像、記事タイトル、日付とカテゴリー、そして記事の抜粋部分の順番で表示されます。ちょっと縦長すぎるので、隙間を詰めながら装飾を入れてみましょう。

sma

記事タイトルに下線をいれ、日付とのすき間を詰め、サムネイル画像の上下の余白を減らし、全体の両端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;}

#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;}

sma2

コンパクトになりましたね。

テキストリンクの色をアドセンスと揃えよう

Googleのアドセンス部に入っている私は、日々（？）アドセンスの勉強をしています。最適化の方法のひとつに「サイトの配色と馴染ませる」という項目があります。

出来れば、アドセンスの背景色とサイトの背景色を揃えたいところですが、STINGER3は、サイドバーと記事内で同じコードを使用しているため、それぞれの広告の背景色を変えることは出来ません。でもまあ、背景色が薄い色ならば、それほど影響が無いかなーと考えています。

もうひとつ大事なことは、リンクの色を揃えることです。

a {color: #000080;}

1	a {color: #000080;}

アドセンスのテキストリンクの色にSTINGER3のリンクの色を揃えるか、STINGER3のリンクの色をアドセンスに採用するか、お好きな方を選んでください。私はすでにアドセンスの色を決めていたので、STINGER3のリンクの色を変えました。

ちなみに、STINGER3のリンクの色は、rgb（84, 132, 200）なので、16進数で表記すると、#5484c8です。ちょっと薄いかもしれませんね。私は、濃い色の方が読みやすくて好きです。

トップページの半分が終わりました

トップページのヘッダーと本文の部分のカスタマイズが終わりました。ファビコンについても書きたかったのですが、長くなるので次回以降に書くことにします。次回は、サイドバーにメスを入れようと思います。お楽しみに。

スポンサードリンク

この記事が少しでもあなたのお役に立ちますように

2013/09/21 | WordPress STINGER3

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

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

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

記事を読む

コメント/トラックバック（12件）

トラックバック用URL：

コメントフィード

えけこさん、はじめまして。
スティンガー３のカスタマイズからえけこさんのブログに辿り着きました。
べにといいます。

私も最近、スティンガー３を使用してブログを作り始めたのですがカスタマイズがうまく行かず挫折しております。

①ページ上部にあるバナー広告を
バナー広告、リンクユニットと並べて配置したいのですがうまく行きません。

を２つ並べると出来ると本で読んだので素人ながら実践したのですが何も変わらずでした。
おそらくやり方が間違っていたと思います・・・

②個別記事の下部ある関連記事の部分なのですが、ここにあるレクタングルを消したいです。
自分でつけたのですがコードが見つけれずという状況です。

出来ましたらで構いませんのでやり方等教えてくださると助かります。　

べに

投稿日時：

2014.02.1 ＠ 12:53 PM

投稿者：

べに
すみません。
↑の投稿の①の部分で一部消えてしまっているので追加です。

を２つ並べると出来ると本で読んだので素人ながら実践したのですが何も変わらずでした。
おそらくやり方が間違っていたと思います・・・

よろしくお願いします。

投稿日時：

2014.02.1 ＠ 12:55 PM

投稿者：

べに
べにさん、こんにちは。
①の質問は、サイトのヘッダー画像部分に、728×90ぐらいの広告と、200×90ぐらいのリンクユニットを並べて表示させたいということでしょうか。

それでしたら、テーマのテンプレートheader.phpの下の方「カスタムヘッダー画像」部分を変更することになります。< ?php if (is_home()) { ?>
< ?php //カスタムヘッダー画像// ?>　～　< ?php endif; ?>
< ?php } ?>まで（2ブロック）を削除し、広告のコードを続けて入れると表示されるようになります。続けて入れると、2個の広告の間が狭いので、間には全角スペースをいくつか入れた方がいいでしょう。間違っても戻せるように、バックアップを取ってから実践してください。

②は、< ?php get_template_part('ad');?>がコードなので、single.phpの中を探してみてください。

頑張って下さいね。

投稿日時：

2014.02.2 ＠ 2:06 PM

投稿者：

equeko
えけこ様

回答ありがとうございました。
無事解決いたしました。

他にも何点か解らないことあるので質問してもよろしいでしょうか？
その場合、こちらにコメントを残す形で問題ありませんか？

べに

投稿日時：

2014.02.2 ＠ 9:04 PM

投稿者：

べに
べにさん、こんにちは。無事解決して良かったですね。
質問はコメント欄でもいいですし、問い合わせ用のメールフォーム、ツイッターのダイレクトメッセージでも大丈夫です。

投稿日時：

2014.02.3 ＠ 11:34 AM

投稿者：

equeko
えけこ様

問い合わせ用のメールフォームから問い合わせしたのですが
上手く届いていないでしょうか？

それともなにか失礼なことでも書いてしまったでしょうか？

べに

投稿日時：

2014.02.5 ＠ 12:02 AM

投稿者：

べに
べにさん、こんばんは。
URLリンクが入っていたので、迷惑フォルダに入ってしまい、気付きませんでした。すみません。これからお返事書きます。

投稿日時：

2014.02.5 ＠ 7:40 PM

投稿者：

equeko
えけこさん、こんばんは。
えけこのくるるさんをいつも大変楽しく勉強させていただいています。
「トップページの記事タイトルを可愛くしよう」の項で水玉の下線を入れて、記事の抜粋分の行間を2px縮めるコードを、どこに入れたらよいのか（またはどの部分と変更するのか）が分からず困っています(T_T)
教えてくだされば幸いに存じます
よろしくお願いいたします。ｍ(_ _＊)ｍ

投稿日時：

2014.06.19 ＠ 5:27 PM

投稿者：

のぞみ
のぞみさん、こんばんは。
コードは、管理画面内の「外観」→「テーマ編集」→右側のテンプレート中の「スタイルシート（style.css）」の一番下に追記すると反映されます。
また何かありましたら聞いて下さい！

投稿日時：

2014.06.19 ＠ 11:25 PM

投稿者：

equeko
えけこさん、はじめまして。
いつもこちらのサイトを参考にさせて頂いています。
STINGER３を使っている初心者です。
「トップページの記事の抜粋部分をコンパクトにしよう」
を実行してその通りに表示できたのですが、
サイドバーが下にずれてしまいました。（フロント？新着記事のちょうど下辺りからサイドバーが伸びている感じです）

いろいろ調べたのですがわかりません。。。
どこをいじった可能性があるのかわかりますか？

行ったのは上記記事で紹介されていたタグをコピペのみです。どこか消しちゃったのでしょうか・・・

どうかお助け下さいませ

投稿日時：

2014.06.22 ＠ 11:57 PM

投稿者：

れーこ
れーこさん、こんにちは。
この記事は、stinger3の初期の頃のバージョンの説明なので、新しいバージョンと記述が異なっている場合があります。
確認してみると、現在のバージョンの記述では、「

< ?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0,100 ) . ‘…’; ?>

」となっていました。「stinger_noshotcode」が増えていますね。丸コピペせずに、数字の所だけ、変更してください。
表示がおかしくなった原因は、コピペの際に間違えて＞が入らなかった、もしくは次の行の＜を消してしまった、などの可能性があると思います。
バックアップで元のhome.phpに戻すことをおすすめします。

投稿日時：

2014.06.23 ＠ 10:33 AM

投稿者：

equeko
えけこさん、早々のご回答ありがとうございます！

原因はｈｏｍｅ．ｐｈｐじゃなくてサイドバーにあったようでした。バックアップもとっていなかったので、再度スティンガーをＤＬしてサイドバーのページだけデフォルトに戻しました。

お手数をおかけしてすいません・・

身を持ってバックアップの大事さがわかり、勉強になりました。

投稿日時：

2014.06.23 ＠ 1:15 PM

投稿者：

れーこ