\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

Cocoonのエントリーカードをカスタマイズして投稿記事一覧を2列表示する方法

cocoonで投稿記事一覧を2列に表示する方法 ブログデザイン
cocoonで投稿記事一覧を2列に表示する方法
この記事は約5分で読めます。

この記事では、Cocoonのカードタイプをカスタマイズして、記事一覧を2列表示(2カラム表示)にする方法をご紹介します。

記事を書くことに慣れてくると、見やすいサイトにカスタマイズしたり、有料テーマのような見た目にしたくなってきますよね。

そこでやりたくなるのが投稿記事一覧のカスタマイズ。

なんと、htmlやcssがいるのかと思いきや、Cocoonだと設定を変更するだけでできちゃうんです!

しかも2列表示だけでなく、1列や3列表示にもできるので、どこで設定変更するかをマスタ―し、ユーザファーストなサイト作成にお役立てください。

スポンサーリンク

1.Cocoonで2列表示にする方法

ダッシュボード > Cocoon設定インデックス をクリックして、カードタイプ欄へ。

Cocoonで投稿記事一覧を2列表示する方法①
クリックすると拡大します


↑の画像の通り、縦型カード2列 に変更して終わりです。変更したらこんな感じになります。

Cocoonで投稿記事一覧を2列表示する方法②
クリックすると拡大します


変更前はこんな感じ。

Cocoonで投稿記事一覧を2列表示する方法③
クリックすると拡大します

2.カードタイプごとの見え方

上記で紹介した2列表示の中でも、タイルのような2列表示もあります。

また、スマホで見やすい大きなカード表示や、3列表示もあります。

以下では、スマホとPCでどんな様子で見えるのかを、カードタイプごとにご紹介します。

2.1 エントリーカード(デフォルト設定)

Cocoonで投稿記事一覧を2列表示する方法④
クリックすると拡大します

こちらがデフォルト設定のエントリーカード表示です。

少し調べてみましたが、大物ブロガーさんでエントリーカード表示にしている方はあまりいませんでした。

最近はスマホユーザが多いのでスマホファーストな見栄えにしている方が多いです。

また、ブログの内容としてPCユーザの訪問者が多い方におすすめします。

2.2 大きなカード(先頭のみ)

Cocoonで投稿記事一覧を2列表示する方法⑤
クリックすると拡大します


こちらは大きなカードで表示する中でも、先頭だけ大きくなる設定です。

「最新記事はこれ!」とアピールしたい、スマホユーザが多いブログ向けです。

PCから見ると先頭が大きすぎて「そこまで大きくしなくても…」という印象がありました。

2.3 大きなカード

Cocoonで投稿記事一覧を2列表示する方法⑥
クリックすると拡大します


大きなカード表示
は、先ほどの先頭のみ大きくする表示とは異なり、すべてのカードを大きく表示します。

「2列表示はスマホだと小さいのでは?」と考える方におすすめな、アイキャッチ画像に書かれている文字などもアピールできる大きさです。

スマホユーザが多いブログ向けです。

もしカスタマイズできるなら、PC訪問時と、スマホ訪問時の表示方法を分けるのがオススメです。

2.4 縦型カード2列

Cocoonで投稿記事一覧を2列表示する方法⑦
クリックすると拡大します


縦型カード2列表示
は、当サイトの表示方法です。

スマニューや女性の読み物のサイトではこの表示方法が多い(気がする)ため、私はこの表示が個人的に見慣れています。

2.5 縦型カード3列

Cocoonで投稿記事一覧を2列表示する方法⑧
クリックすると拡大します


こちらは縦型カード3列表示です。

縦型カード3列になってくると、スマホは少し狭く感じますね。

タブレット端末~PCで表示すると見やすい設定です。

2.6 タイルカード2列

Cocoonで投稿記事一覧を2列表示する方法⑨
クリックすると拡大します


タイルカード2列表示
はその名の通り、タイルのようにカードの位置を少しずつずらしながら表示します。

当ブログではあまりずれていないですが、モバイル表示の設定で、説明文まで見せるように設定すると、縦の長さが出てタイルになります。

また、画像の縦の長さも反映されるので、記事によってアイキャッチ画像の縦幅が違う方は、かなりタイル感が増します。

2.7 タイルカード3列

Cocoonで投稿記事一覧を2列表示する方法10
クリックすると拡大します


最後に、タイルカード3列です。

当サイトは記事が少なすぎることと、アイキャッチ画像の大きさが同じなのでタイル感が出ていません。

が、タイルカード2列表示と同様で、モバイル表示でブログの説明文の表示と、アイキャッチ画像の大きさを変えるとタイルになります。

タイトルとURLをコピーしました