今回は、STINGER8でサイドバーを見栄え良くする方法をお伝えいたします。
デフォルトの状態ですと、サイドバーは見栄えがあまりよくありません。
少し装飾を加えて、見た目がお洒落なサイドバーを作成してみましょう。
STINGER8のサイドバーをカスタマイズ
STINGER8のサイドバーをカスタマイズしようと思った理由
アフィリエイトブログを開始して、3カ月ちょっとが経過しました。記事数は現在51で、一か月のアクセス数は自分を含めないと20くらいですかね・・。
弱小サイトですが、「これでも初月にくらべると10倍以上にアクセス数は増えているのだ」とポジティブに考えて行きたいです。
記事数もほどほどになってきたところで、アフィリエイトブログのデザインをもう少し何とかしたいと思うようになりました。
ユーザビリティも考えないといけないですからね、サイドバーの体裁を整えて行きます。
Stinger8のサイドバーを改善・・何をどうしようと思ったか？
現在のサイドバーは
- 新着記事が表示されている（メインエリアと被っている）
- サイドバーにタイトルがついていない
- タイトルが表示されてもダサい
状態です。
これを
- 新着記事は削除
- サイドバーのタイトルを表示して、格好良く
させていきたいと思います。
Stinger8:サイドバーから最近の記事を削除する
STINGER8を使用すると、デフォルトでは、サイドバーに「新着記事」が自動的に生成されるようになっています。
最近投稿した記事を読者にお知らせするための機能なのですが、新着記事はメインエリアにも表示されるため、内容が被っており見栄えがよくありません。
この機能はデフォルトで備わっているのですが、消すことはできるのでしょうか？
簡単にできます。
WordPress管理画面から、外観⇒テーマの編集を選択、右端から「サイドバー(sidebar.php)を選択し、
<?php get_template_part( ‘newpost’ ); //最近のエントリ ?>
という文字を削除するだけです。
これだけで、トップページのサイドバーから「新着記事」が消えます。
Stinger8:サイドバーのタイトル名が表示されない
現在私のサイドバーには、カテゴリー（iDecO,NISAなど)が表示されています。
しかし「カテゴリー」というタイトル名の表示がありません。
実は、外観⇒ウィジェットで表示される「サイドバートップ」にウィジェットを入れた場合はタイトルが表示されません。
外観⇒ウィジェットを選択すると、「サイドバートップ」と「サイドバーウイジェット」がありますが、サイドバーにタイトルと共に表示させたい項目は、「サイドバーウイジェット」の方に入れましょう。
そうすることで、とりあえずはタイトルが表示されます。
Stinger8:サイドバーのタイトルを奇麗に
とりあえずは、タイトルが表示されましたが、文字が表示されているだけでダサいです。
以下の
外観⇒テーマの編集の、右端からスタイルシート(style.css)を選択して、以下のコードを入力しましょう。
サイドバーの見出しをお洒落にするコード
/*– サイドバーの見出し –*/
.menu_underh2{
font-weight: normal;
font-size: 16px !important;/*見出しの文字サイズ*/
text-align: center;/*見出しの配置*/
color: #fff;/*見出しの文字色*/
padding: .5em .0em;/*見出し内側の余白*/
background-color: #696969;/*見出しの背景色*/
box-shadow:0px 5px 4px -2px #a0a0a0;/*見出し枠の影*/
}
また、サイドバー同士の間隔がデフォルトだと狭いので広げてあげましょう。
以下のコードを同じく外観⇒テーマの編集の、右端からスタイルシート(style.css)に貼りつけてあげれば、間隔が広くなります。
サイドバー各項目の間隔を広げるコード
/*– サイドバー各項目の間隔 –*/
.ad {
margin-bottom: 30px;/*項目下の余白*/
}
STINGER8のサイドバーの改善を終えて
以上のことを行えば、サイドバーが現在表示されているスタイルに変わります。
大分、ユーザビリティは改善されましたよ。やって良かったと思えます。
