松原潤一さん風のブログトップページにハミングバードをカスタマイズ!

2016-07-30 13.20.25

こんにちは。以前からブログマーケターJunichiさんのブログのトップページが良いなと思っていたら、バズ部さんも最近トップページにオススメ記事を配列するようになっていて、ブログトップに「新着記事一覧+おすすめ記事まとめ」を載せるデザインというのは今後流行っていくんじゃないかなーと思ってます。

WordPressテンプレートでもそういうトップページにおすすめ記事まとめが簡単に作れるものも出てくるんじゃないですかねー。松原潤一さんもやってますし。

さて、今回はトップページを松原潤一さんのブログのようにカスタマイズする方法を、アルバトロスやハミングバードでも実現できるようにブログをカスタマイズしたのでそれをシェアしますね。

スポンサーリンク

解説動画

以下も読みながら実際にやってみてくださいね。

事前に導入しておいて欲しいプラグイン

  1. Simple Custom CSS
  2. Display Widget

Simple Custom CSSはお使いのWordpressブログのテンプレートにCSSを追加するのに便利なプラグイン。僕は以前からJetpackの昨日の中にあるカスタムCSSを使ってたんですが、テンプレートを変えるとせっかく頑張って書いたCSSが全部消えちゃうので、こちらに変えました。

Display Widgetは、各ウィジェットの表示を管理するプラグイン。例えばカテゴリーのウィジェットをトップページには表示させたくないけど、ブログ記事ページには表示させるとか、そういう便利なプラグインです。普通に必須プラグインなのでぜひ導入しておいて下さい。

さて、次にやるのは以下の3つです。

  1. 管理画面>カスタマイズで記事スタイルを「カード型」に
  2. ウィジェットで「フロント」を隠す設定にする
  3. 2カラムのカード型を3カラムにするためにコピペ用CSSを貼る
  4. 源泉記事用のショートコードをコピペする

 

管理画面>カスタマイズで記事スタイルを「カード型」に

hummingbird-custom-junichi1

管理画面>外観>カスタマイズから
上図のような画面になるので「>その他オプション」を押す。

 

hummingbird-custom-junichi2

次に「カード型」にしましょう。

 

ウィジェットで「フロント」を隠す設定にする

hummingbird-custom-junichi3

上図のようにサイドバーに設置しているウィジェットを
フロントページ(トップページ)には表示しない設定にします。

 

 

2カラムのカード型を3カラムにするためにコピペ用CSSを貼る

次は以下のCSSを
SimpleCustomCSSなどでコピペして追加して下さい。

解説は省略しますがコピペするだけで
トップページにカード型の記事が3カラムで並ぶようになります。
(ならない場合は教えて下さい。)

※僕は自己流でCSSをいじって専門的に学んだことないので
 その点はご了承下さい。

 

源泉記事用のショートコードをコピペする

次は以下のコードをコピペして、
ウィジェットのテキストウィジェットに貼りましょう。

 

hummingbird-custom-junichi4

上図のように「【トップページ】下部」の部分に
ウィジェットを入れましょう。
そして表示はフロントのみにします。

こうすることでトップページに
厳選記事のまとめを作成することが出来ます。

 

まとめ

いかがでしたか?新しいテーマ「ストーク」では
トップページを1カラムに出来るようですが、
今まで使ってきたハミングバードやアルバトロスでも
1カラムで使いたい!という声にお応えしました。

次はバズ部のようにXeoryを使ってトップページを
うまくまとめられるようになれたらいいなぁ・・・(遠い目)

2016-07-30 13.20.25

参考になったらぜひシェアしてね!

コメントを残す

メールアドレスが公開されることはありません。