東京脱出のための9ステップ
全国上映の映画作りが仕事だと!?北海道えりも町の地域おこし協力隊がスゴイ

\地域おこし協力隊 募集中/

北海道えりも町が2022年12月28日まで地域おこし協力隊を募集しています。
えりも町といえば強風が有名ですが、そのおかげで雪かきがほとんど必要ありません。
有名監督との映画作りがメイン活動!?

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

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

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

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

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

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

 

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

はまちゃん
はまちゃん

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

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

 

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

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

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

 

◆横並び表示

[Before]

Before横並び

[After]

After横並び

 

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

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

 

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

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
WordPressテーマ「Cocoon」カスタマイズまとめ!初心者でもCSSコピペでおしゃれに

 

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

3ステップ

手順は以下のとおり。

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

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

 

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

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

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

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

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

 

(1)フロントページ用の固定ページを作成

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

固定ページ 新規作成 Cocoon

 

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

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

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

Cocoon トップページ 固定ページテンプレ

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

 

(2)新着記事一覧を表示するショートコードをアレンジ

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

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)を利用すれば代用可能です。

 

(3)CSSをコピペ

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

「外観」から「テーマエディター」を選択し、Cocoon Childのスタイルシート (style.css)に書き込んでもよいですが、固定ページ下にあるカスタム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;
}

 

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

お疲れ様でした。

 

まとめ:フロントページの新着記事を横並び表示にするカスタマイズは簡単

無事に横並びで新着記事一覧が表示されましたか?

CSSの知識がないと難しいですが、3つの手順

  1. フロントページ用の固定ページを新規作成
  2. 新着記事一覧を表示するショートコードをアレンジ
  3. CSSをコピペ

通りにすれば誰でも簡単にカスタマイズができたはず。

プラグインも必要なくショートコードで実現できたのは、Cocoon様様です。

質問などあれば、記事下のコメント欄までお願いします。

 

ちなみに僕のブログでは、以下のように最新記事を3つ表示させて、その下の新着記事一覧ボタンをクリックすると、新着記事が全体で表示するようにしています。

当ブログの新着記事一覧の設定

当ブログの新着記事一覧の設定

 

こちらのやり方は、別記事で紹介していますのでマネしたい方はどうぞ。

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

 

質問などあれば、記事下のコメント欄までお願いします。

コピペもいいですが、ブログを自分好みにカスタマイズして個性を出したいなら、HTMLやCSSの知識は最低限必要ですよ。

将来調べる時間を少なくするためにも、自己投資と思って一冊ぐらいは手元に置いておきましょうね。

 

んじゃ、今日はこれでおしまいっ!
ほな、バイバーイ!

 

コメントをどうぞ

おすすめWordPressテーマ

ELEPHANT3

ブログマーケッターjunichiさんの渾身の力作!
2018年5月販売の最新WordPressテーマ。「ブログで集客したい」なら選ぶべきテーマです。月額7980円のオンラインサロン「BMS」に所属でき、さらにメルマガ配信ができるオレンジメールの有料プラン27,680円分が無料特典!特典分だけでテーマ料金を超えてます・・・

▼他の有料WordPressテーマと比較データを詳細ページにまとめました。

トップへ戻る
タイトルとURLをコピーしました