【Cocoon】ショートコードで新着記事を横並び表示にするフロントページカスタマイズ

こんにちは！Cocoonをカスタマイズしまくりのはまちゃん（@wakuwakukeigo）です。

Cocoonには便利なショートコードがたくさんあり、ブロガーを大いに助けてくれます。

中でも新着記事や人気記事一覧を簡単に表示できるショートコードは、ブログのフロントページ（ホーム画面）をカスタマイズするのにはかかせません。

当ブログの代表記事となった【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法でも、存分に利用させてもらってます。

本記事では、フロントページをショートコードで新着記事を表示する際に、デザインを垢抜けさせる横並び表示にするカスタマイズの方法をご紹介します。

はまちゃん

もちろん誰でも簡単にカスタマイズできるよう、CSSはコピペするだけなのでご安心ください。

少しの工夫でオシャレになるのでお試しあれ。

タップできる目次

1 【Cocoon】フロントページの新着記事一覧を横並び表示にした完成イメージ
2 【Cocoon】ショートコードでフロントページの新着記事一覧を横並び表示にカスタマイズする方法
3 まとめ：フロントページの新着記事を横並び表示にするカスタマイズは簡単

【Cocoon】フロントページの新着記事一覧を横並び表示にした完成イメージ

まず、最初に完成イメージを確認しておきましょう。

当ブログのフロントページを見てもらうとよりわかりやすいかもしれません。

◆横並び表示

[Before]

[After]

ちょっとしたデザインの変更ですが、印象はかなり違いますよね。

「神は細部に宿る」と言われるように、そのこだわりがあなたらしいブログを作ることにつながります。

ブログトップページ全体をオシャレにカスタマイズする方法や、Cocoon全体のカスタマイズする方法は別記事で詳しく書いていますので、合わせてご覧ください。

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

【Cocoon】ショートコードでフロントページの新着記事一覧を横並び表示にカスタマイズする方法

手順は以下のとおり。

横並び表示カスタマイズ手順

STEP1
フロントページ用の固定ページを新規作成
詳しく解説します
STEP2
新着記事一覧を表示するショートコードをアレンジ
大きなサムネイルを選択します
STEP3
CSSをコピペ
全体のスタイルシートではなくカスタムCSSに追記がオススメ

はまちゃん

ステップも少ないし簡単だね！
フロントページに書く前提で以下は書きますが、普通の投稿ページにショートコードで新着記事を表示する場合は、STEP1は必要ありません。

「さっそくカスタマイズ！」といきたいところですが、簡単とはいえCSSをいじるのでブログデザインが崩れてしまうリスクがあります。

最低限、変更前の設定内容やCSSをバックアップしておくことはするようにしてください。

より慎重にいくなら、テーマ全体のバックアップを取ることも有効です。

以下の記事で注意点やバックアップ方法に触れているので参考にしてください。

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

（１）フロントページ用の固定ページを作成

ワードプレスのダッシュボードから、「固定ページ」＞「新規作成」をクリックします。

タイトルはなんでもいいです。

この記事ではわかりやすく『【Cocoonトップページ】固定ページテンプレ』としておきましょう。

パーマリンクの設定は関係ないので必要ありません。

Gutenbergを利用の場合、画面イメージが異なります。
プラグイン「Classic Editor」をインストールすれば、本記事と同じ旧エディター画面になります。

（２）新着記事一覧を表示するショートコードをアレンジ

新規作成した固定ページに、新着記事一覧を表示します。

Cocoonであれば、投稿画面のショートコード＞新着記事をクリック。

すると以下のようなnew_listショートコードが自動入力されます。

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

上記のコードをそのまま掲載すると新着記事が表示されるため、あえて「〜」をつけています。
実際のコードに「〜」はありません。

それぞれオプション部分は以下を意味します。

count=アイテムの表示数
type=新着記事の表示方法の種類
cats=ブログで設定しているカテゴリ
children=子カテゴリを含めるか否か

全体の新着記事を想定しているので、count=”3” type=”large_thumb“に設定変更すれば他はイジらなくてかまいません。

[〜new_list count="3" type="large_thumb" cats="all" children="0" post_type="post"〜]

新着記事一覧の詳細なショートコードの使い方を知りたいなら、新着記事一覧を表示するショートコードの利用方法を参考にしてください。

本記事では新着記事のショートコード（new_list）を使いましたが、人気記事一覧のショートコード（popular_list）を利用すれば代用可能です。

（３）CSSをコピペ

最後にスタイルシート（CSS）を書きます。

「外観」から「テーマエディター」を選択し、Cocoon Childのスタイルシート (style.css)に書き込んでもよいですが、固定ページ下にあるカスタムCSSに書き込むことをオススメします。

違い

Cocoon Childのスタイルシート (style.css)：テーマ全体に影響するCSS
カスタムCSS：特定の投稿ページ・固定ページのみに適用するCSS

Cocoon Childのスタイルシート (style.css)はテーマ全体に影響するので、誤って削除してしまったりエラーが起きるリスクがあります。

プログラミングなどにあまり詳しくない初心者は、極力触るべきではありません。

カスタムCSSなら、最悪CSSが間違えてしまってもそのページのみなので影響は小さいです。

以下をカスタムCSSに入力してください。

/*******************************
* 新着記事を横並びに
********************************/
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}

@media screen and (max-width: 800px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

これでページの更新をかけると、フロントページの新着記事一覧が横並び表示になります。

お疲れ様でした。