ハワイのWeb制作会社で働くダンサーのブログ

世界のヘイショーによる個人ブログ。テーマはサイト制作、マーケティング、SEO、アフィリエイト、ハワイ、ポケモン、スケボー、海外就職、ダンスなど。

Stinger8のサイドバー・カスタマイズ。トップページで新着記事を表示させない&その他デザインの修正

2017/06/05

 

こんにちは。世界のヘイショーです。

本日も引き続きStinger8のカスタマイズについて。

 

前回トップページをカスタマイズしましたが、今回はサイドバーを修正していきたいと思います。

 

 

 

変更前のトップページはこんな感じです。

 

 

カスタマイズのポイントは以下の通り。

  1. トップページで新着記事を表示させない
  2. サイドバーのタイトルをスタイリングする
  3. 各セクション間のマージンを空ける
  4. WordPress Popular Posts(人気記事一覧)をスタイリングする

 

完成後のサイトは以下の通りです。

>> 学歴スキル英語力ゼロからの海外就職活動ブログ

 

※サイト名やトップページなどが大きく変更されていますが、当記事を書いた後にアップデートしたためです。

 

 

 

トップページで新着記事を表示させない

 

一つ目のカスタマイズは、サイドバー上方に位置されている新着記事一覧をトップページでのみ非表示にする方法。

ご存知の通りStingerのトップページには記事一覧がメインカラムにあるので、サイドバーの新着記事一覧は必要ないと判断しました。

 

 

sidebar.phpを編集します。元のコードはこれ。

 

変更後はこうなります。

 

 

あとCSSも若干変更しました。

 

 

 

サイドバーの見出しをCSSでカスタム

 

デフォルトのサイドバーの見出しがすごくプレインだったので、はっきりと見出しだと分かるようにデザインを変更したいと思います。

 

変更前がこれ。

 

 

以下のCSSを適用します。

 

変更後がこれ。

 

見出しのデザインはOKですが、各セクションの感覚が狭すぎるのここを上手くグルーピングしたいと思います。

 

 

各セクション間の間隔を広げる

 

以下のCSSを適用。

 

変更後がこちら。

 

 

大分ましになってきました。

 

あとこれは好みの問題ですが、カテゴリーリストのテキストの青色+下線が気になったので普通の黒色に変更します。

 

 

 

変更後

 

 

全体的に読みやすくなったと思います。

サイドバーのコンテンツはあまり目立たせたくなかったので、フォントの色は抑えめの黒に設定しました。

 

 

WordPress Popular Postsの人気記事一覧のCSSカスタマイズ

 

次にWordPress Popular Postsというプラグインで付けた人気記事一覧のスタイリングへ。

 

元の見た目はこんな感じです。

 

 

以下のCSSを適用します。

 

 

変更後はこれ。

 

 

以上でサイドバーのカスタマイズは終了です!

完成後のサイトを見たい方はこちらからどうぞ。

 

>> 学歴スキル英語力ゼロからの海外就職活動ブログ

 

ちなみに、Stinger7(ブログ型)からStinger8(ミニサイト型)に変更してからトラフィックが8倍くらいに増えました(^_^)

まあデザインの変更だけでなく、キーワード選定してサイトのタイトルやコンセプトを変更、カテゴリーの整理など、いろいろ行った結果ですが。

 

ミニサイトは今のGoogleのアルゴリズムにあっているかもしれませんね。

 

 

-SEO, Webサイト制作, ブログ
-