【cocoon】ショートコードで指定したブログ記事を横並び表示へカスタマイズする方法| 投資オムタンケ

この記事では、“ブログ記事を横並び表示へカスタマイズする方法”について紹介しています。

WordPressの無料テーマcocoonのトップページをサイト型へカスタマイズしたい方におすすめの記事です。

初心者でもおしゃれなトップページを作ることができるようわかりやすく説明しています。

この記事を書いている人

メガバンク勤務の30代女性
夫と共同でブログを運営中
ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている

プロフィールを見る

アフィリエイトの始め方まとめ／初心者が月3万円稼ぐための3ステップを紹介

アフィリエイトの始め方や仕組みについて紹介します。実際にアフィリエイト初心者の私が、アフィリエイトで月3万円を稼ぐまでにかかった期間や記事数、PV数についても紹介しています。これから副業でブログを始めたい方やアフィリエイトで収益を得たい方におすすめの記事です。

新着記事や人気記事を表示させる
記事を横並び表示にカスタマイズする方法
応用編
まとめ
関連記事

記事を横並び表示にカスタマイズする方法

ショートコードを使い「新着記事」を表示させると、下記のように縦並びで記事が並びます。

新着記事のショートコード利用例

ブログのレイアウト上、横並び表示の方が都合がいい場合、CSSを指定する必要があります。

固定ページにショートコードとオプションを入力する

サイトトップとなる固定ページに新着記事や人気記事などのショートコードを入力します。

【入力例】

このときcountとtypeというオプションコードに変更を加えます。

count

countは、表示する記事数を指定します。

例えば、縦2行、横4列に記事を表示させたい場合、count=”8″と入力します。

本サイトのレイアウト

投資オムタンケ

type

typeで記事表示のレイアウトを変更します。

記事を横並び表示させるのであれば、おすすめは、「large_thumb」「large_thumb_on」です。

	表示内容
default	通常のリスト
border_partition(or 1)	記事の上下に区切り線を入れる
border_square(or 2)	記事に枠線を表示する
large_thumb	大きなサムネイル表示
large_thumb_on	大きなサムネイルにタイトルを重ねる

default

border_square

border_partition

large_thumb

large_thumb_on

CSSの入力

「外観」から「テーマエディター」を選択して、Cocoon Childのスタイルシート (style.css)にコードを追加します。

large_thumbを指定した新着記事を横並びで表示させたい場合のCSS

/* 新着記事表示 */

.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
width: 25%;
}

/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}