雑多ブログ向け:ブログの最新記事をカテゴリごとに表示するデザインテンプレート

 
グリット
雑多ブログを運営中のグリットです。

トップページで雑多な最新記事が並ぶことって読者さんにとったらわかりにくいんじゃないの?って思うんですよね。

特化ブログで、かつすべての記事が同じようなペルソナを想定している場合や、トレンド記事を書かれている場合は最新記事がトップにならぶので良さそうですね。

一方で、雑多ブログの場合は、最新記事が自分に関係ないテーマばかりだったりして読む気がなくなったりしますよね。

 
さるまる
ああ!Youtubeブログ書いている人のYoutubeの内容に興味があるのに、その人ゲームとかについても書いてて、正直それらの記事邪魔なんだよね!
 
グリット
その通りだよね。最新記事表示は、雑多ブログの弱点だと思います。

雑多ブログでも、トップページをカテゴリごとの最新記事で並べ、そこから記事一覧にリンクさせることができれば、特化ブログのようなデザインができるんじゃないか?

これが今回紹介する、ブログの最新記事をカテゴリごとに表示するトップページを作ろうと考えたきっかけです。

無料ワードプレステーマCocoonの例で紹介しますが、基本的な考え方とデザインは他のテーマでも適用できるものです。
Ad

ワードプレスx Cocoonで最新記事をカテゴリごとに表示する

Cocoon使用時のこのブログのトップページはこのようにカテゴリごとの最新記事を並べています。

Cocoonで使えるカテゴリ別最新記事のコピペ用テンプレート

Cocoon用にコピペできるコードをまずはご紹介します。

<!-- wp:heading --><h2> -カテゴリー別の最新記事- </h2><!-- /wp:heading --><!-- wp:cocoon-blocks/column-2 --><div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box"><!-- wp:cocoon-blocks/column-left --><div class="wp-block-cocoon-blocks-column-left column-left"><!-- wp:heading {"level":3} --><h3> <i class="fa fa-laptop fa-fw my-yl"></i>世界のニュース</h3><!-- /wp:heading --><!-- wp:image {"id":1602,"align":"center","linkDestination":"custom"} --><div class="wp-block-image"><figure class="aligncenter"><a href="https://www.global-lifetips.com/category/data-analysis/"><img src="https://www.global-lifetips.com/wp-content/uploads/2019/05/world-news.jpg" alt="" class="wp-image-1602"/></a></figure></div><!-- /wp:image --><!-- wp:paragraph --><p> [new_list count="5" type="default" cats="95" children="0" post_type="post"] </p><!-- /wp:paragraph --><!-- wp:cocoon-blocks/button-1 {"content":" 世界のニュース関連の記事をもっと読む","url":"https://www.global-lifetips.com/category/news/","target":"_blank","align":"center"} --><div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://www.global-lifetips.com/category/news/" class="btn btn-key-color" target="_blank"> 世界のニュース関連の記事をもっと読む</a></div><!-- /wp:cocoon-blocks/button-1 --></div><!-- /wp:cocoon-blocks/column-left --><!-- wp:cocoon-blocks/column-right --><div class="wp-block-cocoon-blocks-column-right column-right"><!-- wp:heading {"level":3} --><h3> <i class="fa fa-language fa-fw my-rd"></i>英語ラボ</h3><!-- /wp:heading --><!-- wp:image {"id":1601,"align":"center","linkDestination":"custom"} --><div class="wp-block-image"><figure class="aligncenter"><a href="https://www.global-lifetips.com/category/english/"><img src="https://www.global-lifetips.com/wp-content/uploads/2019/05/海外生活-1-1.jpg" alt="" class="wp-image-1601"/></a></figure></div><!-- /wp:image --><!-- wp:paragraph --><p>[new_list count="5" type="default" cats="94" children="0" post_type="post"]</p><!-- /wp:paragraph --><!-- wp:cocoon-blocks/button-1 {"content":"英語ラボの記事をもっと読む","url":"https://www.global-lifetips.com/category/english/","target":"_blank","align":"center"} --><div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="https://www.global-lifetips.com/category/english/" class="btn btn-key-color" target="_blank">英語ラボの記事をもっと読む</a></div><!-- /wp:cocoon-blocks/button-1 --></div><!-- /wp:cocoon-blocks/column-right --></div><!-- /wp:cocoon-blocks/column-2 -->

Cocoonをお使いの方で、同じようなデザインにしてみたい方は、このコードをコピーしてください。

新規で固定ページを作成し、コードエディターモードにして貼り付けましょう。

コードエディターモードのやり方は次の記事で詳しくご紹介しています。

関連記事

ワードプレスの無料テーマCocoonを使ったブログでのトップページデザインもついに4回目になりました。今回は、アピールエリアと呼ばれるエリアについてご説明します。 グリット[…]

コードエディタで貼り付け後、ビジュアルモードに切り替えてご自分のサイトにあった内容に変更していきます。

コードをそのまま貼り付けた場合、世界のニュース(左)と英語ラボ(右)という2つのコンテンツが並ぶ形式です。

見出し3見出し3
写真写真
カテゴリの最新記事5つ勝てごrの最新記事5つ
カテゴリの他の記事をみるリンクボタンカテゴリの他の記事をみるリンクボタン

まず、見出し3のタイトルをご自分のカテゴリに合わせて変更しましょう。

写真の箇所も、カテゴリにあった写真に変更します。

文字入りの画像をうまくデザインするには、下のヘッダーデザインの記事で紹介しているCanvaというソフトが便利です。

関連記事

さて、前回の記事ではブログのトップページをオリジナルにデザインしなおした際のBefore&Afterをお見せしました。今回の記事からは、ブログのトップページデザインシリーズとして、それぞれのデザインを行った際に利用したC[…]

カテゴリごとの最新記事5つのところは、ビジュアルモードで次のようなコードが書かれていると思います。

[new_list count="5" type="default" cats="94" children="0" post_type="post"]

  • new_list count=”5″ : 最新記事を5つ表示するということ
  • type=”default”:表示形式なので、このままでOKです。
  • cats=”94″:カテゴリーID94を選択します。このカテゴリー番号は、ダッシュボードの「カテゴリー」から各カテゴリーのIDが確認できるので、自分が載せたいカテゴリのIDをここに記載しましょう。
  • post_type=”post”:投稿ページのみという指定です。

このショートコードの詳しい説明は、Cocoonのマニュアルページをご覧ください。

この2列を1ブロックとして、下に並べていくことで、2列2行の4カテゴリや2列3行の6カテゴリの、カテゴリ別最新記事一覧を作成できます。

Cocoonでカテゴリ別最新記事をトップページに指定する。

アピールエリアの場合はウィジットで登録したように、カテゴリ別最新記事も作成後にトップページに登録する必要があります。

設定から表示設定を選択します。

ホームページの表示を「固定ページ」とし、ホームページのところに「作成した固定ページ:上の例の場合はtop-page」、投稿ページを「最新記事」としておきましょう。

Cocoon以外でカテゴリ別最新記事を表示する方法

例えばJINのテーマでは、タブごとに最新記事を表示できたりしますよね!

それ以外のテーマは、テーマごとにやり方は異なるだろうから詳しいやり方はわからないというのが本音なところです。

 
グリット
大事なことは、最初にお伝えしたように、読者の方にとってみたいカテゴリごとにすぐに情報が入ることだと思います。
 
さるまる
メニューから行けばいいんじゃないの?
 
グリット
確かに慣れている人はメニューから行けるかもしれないね!

けど、読者の人が一手間しないとみたいところに行けないっていうのは、あまりユーザーフレンドリーとは言えないよね。

ブログのトップページは、読者さんを惹きつけも離しもするとても重要な場所です。

「読者さんの視点で、見たい記事にすぐアクセスできる」ということを第一に、トップページのデザインを見直してみたらどうでしょうか?

このシリーズでは、トップページのデザインを場所ごとに説明してきました。ブログデザインの参考にしてみてください。

関連記事

このブログは、ワードプレスでCocoonという無料テーマをもとに立ち上げました。無料でありながらかなり優秀といわれるCocoonのテーマをもとに、「他のブログとは差別化したデザイン」にしたいという思いから、様々なツールや[…]

 

記事はいかがでしたか?

読んでいただいた方に関心がありそうな広告が表示されます。

<スポンサーリンク>

最新情報をチェックしよう!
Ad