WordPressテーマCocconをカスタマイズ～固定ページ／新着記事を表示編～

前回の記事では、

固定ページのカスタマイズ方法についてお伝えいたしました。

今回の記事では、「固定ページ」に関するカスタマイズ方法をお伝えしたいと思います。

▼前回記事▼

WordPressテーマCocconをカスタマイズ～固定ページ編～

前回の記事では、カテゴリーの追加方法とメニューバーについてお伝えいたしました。 今回の記事では、「固定ページ」に関するカスタマイズ方法をお伝えしたいと思います。 ▼前回記事▼ ▼りのんずにて利用しているレンタルサーバーはこちら▼ これまで色...

rio-blog9.com

▼りのんずにて利用しているレンタルサーバーはこちら▼

これまで色んなレンタルサーバーを使用してきましたが、
解説しているユーザー数も多く、求めている知りたい情報へたどり着きやすい為、
初心者にもおすすめのレンタルサーバーです♪

最終完成デザインはこちら

新着記事を表示する

トップページに新着記事を表示させたいと思います。

新着記事一覧を表示させたい場所で、
①のブロックを追加するボタンを押し、「ショートコード」と書かれたボタンをクリックします。

すると、下の図のような入力フォームが表示される為、
そこに新着求人を表示させるためのショートコードを入力します。

※入力するショートコードによって表示される大きさや形が変わります。
ここではアイキャッチ画像＋タイトル文字が表示されるコードを選択しました。

詳しくはCocoonの公式ページをご参照ください。

[new_list count="3" type="large_thumb"]

上記を記入して更新すると、トップページに新着記事が表示されました！

……が！

このままだと縦に長くて非常に見えにくい！ということで、横並びで表示させたいと思います。

横並びで表示させる方法

トップページ編集画面をスクロールし「カスタム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;
}
 

カスタムコードを入力して保存をかけるとちゃんと横並びで表示されるようになりました！

カテゴリー別新着記事を表示する

全体の新着記事を表示するタグを埋め込んだ後は、
カテゴリー別の新着記事を表示させたいと思います。

ただし雑記ブログということで、とにかくカテゴリー数が多い！

1カテゴリーずつ表示していると縦に長くなってしまうので、
2カテゴリーずつ横並びにして表示したいと思います。

横並び(2カラム)で新着記事を表示する

新着記事を横並びで表示させる方法です。

上記のような横並びの表示をさせる為に、WordPress内のカラム機能を使います。

その為、ここまでコードエディタ―で作業していた方も一度
「ビジュアルエディタ―」へ切り替えてください。

カラムを追加する

カラムを追加する方法です。

ブロックを追加するボタンから、「カラム」を選択します。

カラムのデザインパターンが6種類ほど表示されるので、
「50/50」をお選びください。

すると、添付のような□に＋の画面が表示されるので、＋をクリックして
「カスタムHTML」を選択します。

これで表示された入力フォームへ新着記事を表示させるコードを記入します。

[new_list count="3" cats="10" class="mobile-2"]

▼コード解説

▼カテゴリー別新着記事のショートコードはこれを元にカスタマイズしてください▼

もっと見るボタンはWordPressのブロック機能から
制作したボタンのコードをそのまま貼り付けています。

この手順で必要なカテゴリーを全て設定するとこうなりました！

かなりブログっぽくなってきましたね！

この調子でどんどん作っていきましょう！

次の記事では「新規記事の投稿方法」についてまとめていきますのでよろしくお願いします。