ブログ運営

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

ブログ運営
スポンサーリンク

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

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

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

おむ子
おむ子

このブログは、30代夫婦が

投資やお金に関する情報について発信しています。

ブログの収益で大好きなハワイに行くのが第一目標です!

スポンサーリンク

関連記事

他にもブログのトップページのカスタマイズに必要な情報を発信しています。

サイトトップに指定する固定ページを作成する方法
新着記事一覧を表示するための固定ページを作成する方法
固定ページをサイトトップに設定する方法

新着記事や人気記事を表示させる

ブログのトップページをサイト型にカスタマイズする際に役立つのがショートコードです。

サイトトップに設定する固定ページにショートコードを入力しておけば、新着記事や人気記事が自動的に表示されるようになります。

ショートコードで人気記事や新着記事を表示させる方法

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

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

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

ブログのレイアウト上、横並び表示の方が都合がいい場合、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%;
}
}

色付けしている箇所をご自身のレイアウト内容に合わせて入力してください。

黄色ラインマーカー・・・記事を横並び表示させたいショートコードを指定

【入力例】new-entry-cards(新着記事)、popular-entry-cards(人気記事)、navi-entry-cards(ナビカード)

赤色ラインマーカー・・・記事のレイアウトのtype名

【入力例】large-thumb、large-thumb-on

青色ラインマーカー・・・横に並べる記事の枚数に合わせてパーセントを指定

【入力例】横に4記事=25%、横に3記事=33.333%

表示を確認する

トップページをPCとモバイル端末からそれぞれ確認します。

本サイトでは、PCから見た場合は横並びに4記事、タブレットやスマートフォンから見た場合は2記事、480px以下のモバイルから見た場合は1記事表示されるように設定しています。

画面サイズによって横に並ぶ記事数を分けています。

先ほどのCSSコードの768px以下、480px以下という箇所の青のラインマーカー内を変更すれば簡単に横並びに表示する記事数を調整することができます。

本サイトのレイアウト

PCで表示した場合

スマートフォンで表示した場合

投資オムタンケ

応用編

ショートコードの活用方法については、別記事でも紹介しておりますので、合わせてご覧ください。

自分で選択した記事をサイトに表示する

まとめ

CSSを使って、固定ページのレイアウトに指定を加えれば、さらに自分の好みのサイトにカスタマイズすることができます。

このサイトでは、他にもブログのカスタマイズに関する記事を用意していますので、あわせてご覧ください。

スポンサーリンク
投資オムタンケ
タイトルとURLをコピーしました