日々進化を遂げているワードプレスの無料テーマStingerは、バージョンが3になりました。近頃、STINGER3の公式サイトも出来た模様です。これから記事がどんどん追加されるので、ぜひ公式サイトをよく読んで、多くのブロガーさんにSTINGER3を使って欲しいと思います。
実は、STINGER3の公式サイト内「カスタマイズ記事を書いているブログのページ」に、拙ブログを掲載して頂いた模様です。
ありがとうございます！！！
こんなに嬉しい事はありません。これからも、STINGER3を大切に使わせていただきます。
さて、前回はトップページのカスタマイズをしました。スマホ対応も万全ですね。今日は、サイドバーにメスを入れてみましょう。
女子ブロガー向けカスタマイズの手順その6
サイドバーをカスタマイズしよう
サイドバーはPCで見ると、本文コンテンツの右側にあります。サイドバーには、サイトを補足する情報を好きな順番に好きなだけ掲載することができます。スマホで表示した時、本文の下にずら～っと並ぶので、あまり長すぎないほうがいいでしょう。
Feedlyボタンを検索窓の下に設置しよう
このブログをスタートするにあたり、検索エンジンからの集客はもちろんですが、今までやっていなかったSNSによる拡散と、RSS配信なんかもしようと決めていました。
いくつか調べた結果、Feedlyにたどり着きました。というか、Feedlyを使ってる人多いですよね…。私も貼りたいので、さっそくFeedlyボタンを作りましょう。
↓ これのことです。
Feedlyのサイトにボタン作成ツールがあります。
⇒ Feedlyボタンの作成
英語で書いてありますが、簡単3ステップなのでご安心ください。
・ステップ1 デザインを選ぶ
・ステップ2 サイトのフィードアドレスを入力する
ワードプレスの場合、これでOK→ http://サイトのURL/feed/
・ステップ3 出来たコードをコピーする
サイドバーの検索窓の下に表示させます。管理画面→外観→テーマ編集→サイドバー（sidebar.php）の8行目
<?php get_search_form(); ?>
この検索窓のコードの下に、feedlyボタンのコードを貼るだけです。もし、少し間隔を開けたい場合は、間に改行タグを挟んでください。
<br />
投稿記事にもFeedlyボタンを入れたい場合は、管理画面→外観→テーマ編集→単一記事の投稿（single.php）の任意の場所に貼ってください。私は、記事の下の方、日付・カテゴリーの下に入れています。
↓ これの下に
<div class="blog_info contentsbox">
<p>
<?php the_time('Y/m/d') ?> | <?php the_category(', ') ?> <?php the_tags('', ', '); ?>
</p>
</div>↓ これを入れてから、ボタンのコードを入れています。
<br />更新情報をお知らせしています<br /><br />
※ツイッターボタンに関しては、ご要望があれば書きたいと思います。
運営者情報をNEW ENTRYの上に入れよう
サイト訪問者にとって「どんな人が記事を書いているのかな？」というのは気になるところです。そして、運営者情報を見てくれた人は、親近感が湧いて、また遊びに来てくれるかもしれません。
著者のプロフィールは、ブログに欠かせないもののひとつです。
運営者情報は、なるべく目に付きやすい場所に掲載したいので、記事の最後や、サイドバー上部に入れるといいでしょう。今回は、ENJILOGさんと同じように検索窓とNEW ENTRYの間に入れてみましょう。（まねてばかりでスミマセン）
通常、WPのサイドバーは、ウィジェットの並び順を変えるだけでいいのですが、STINGER3の場合、「アドセンス、検索窓、NEW ENTRY」がデフォルトで挿入されています。
STINGER3で、ウィジェットのサイドバー1に入れたものは、デフォルトの「アドセンス、検索窓、NEW ENTRY」の下に表示されることになります。
そこで私は、少々荒技ですが、テーマに直接書き込んでしまいました。子テーマにしている方は、子テーマのファイルに書いて下さい。
<div class="twibox"> <h4 class="menu_underh2">about</h4> <div class="textwidget"> <ul><li>詳しいプロフィール</li></ul> </div></div>
これが挿入するコードです。aboutを好きな言葉に直して、詳しいプロフィールのところに、自己紹介やプロフィールなどを記入します。
<div class="kizi"> <!--最近のエントリ-->
管理画面→外観→テーマ編集→サイドバー（sidebar.php）の、最近のエントリーの2行上に、先ほど作成したものを入れます。リスト表示（ulタグ）を使用しているのは、文字の大きさを揃えるためです。ulとliタグを外すと文字が大きくなります。
NEW ENTRYの表示数を変えよう
自動的に新着記事が表示されるNEW ENTRYですが、掲載数を増やしたり減らしたりすることもできます。最初は表示本数が5個になっているので、この数字を変更すると表示数も変わります。
<div class="kizi">
<!--最近のエントリ-->
<h4 class="menu_underh2">NEW ENTRY</h4>
<div id="topnews">
<div><?php
foreach((get_the_category()) as $cat) {
$cat_id = 0;
break ;
}
$query = 'cat=' . $cat_id. '&showposts=5'; //表示本数
query_posts($query) ;
?>数値は、お好みで変更して下さいね。
サイドバーのタイトルを可愛くしよう
サイドバーの見出しに使われている画像の大きさは、30ピクセル×30ピクセルです。色もグレーで、形もシンプルで素敵ですが、同じテーマを使用している人が多いので、可愛い画像に変えてみましょう。
嗚呼、また違う場所をキャプチャしてしまいましたー。
フリー素材*ヒバナさんのアイコン素材を使わせていただきました。私が選んだ花アイコンは、大きさが36ピクセル×35ピクセルなので、30ピクセルに縮小して、背景の色は自分のサイトと同じ色にしました。（あれ、透過したんだったかな？）
アップロードした画像のURLを追記するだけで、変更できます。デフォルト画像と同じ大きさの画像を使うと、画像のURLを変えるだけでいいので楽です。小さいアイコンの場合は、paddingで調節してください。
.menu_underh2 {
background-image: url("画像のURL");
}画像を使わずに、ラインを入れたり、背景色を変えたりしてもいいですね。
カテゴリーのカスタマイズ
カテゴリー欄は、子カテゴリーがちょっと親カテゴリーと近い（行間が狭い）ところが気になったので、少し広げました。
#container #wrap #wrap-in #side ul.children { padding-top: 8px; }ついでに、全体の行間も少し縮めました。
#container #wrap #wrap-in #side ul li ul li {line-height: 22px;}また、私個人の好みで、カテゴリーメニューとページメニューにリストマークを画像で入れてみました。本当は、子リストに違うリストマークを入れたかったのですが、変え方がわからず、全て同じものになっています。出来るようになったら、追記します。
スクロール広告用のカスタマイズ
スクロール広告のデフォルトのセンタリングを解除したい方は、管理画面→外観→テーマ編集→サイドバー（sidebar.php）の一番下のセンタリング設定を変更してください。テーマファイルに直接、センタリング設定が書かれています。
<div id="ad1">
<div style="text-align:center;">
<?php get_template_part('scroll-ad');?>
</div>
</div>↓
<div id="ad1">
<div style="text-align:left;">
<?php get_template_part('scroll-ad');?>
</div>
</div>2行目の、centerをleftに変更してください。
今回のまとめと次回の予告
サイドバーのPC表示のカスタマイズが終わりました。次回は、サイドバーのスマホ表示を検証したいと思います。お楽しみに。