【Cocoon】サムネサイズを揃える!記事の綺麗な2列表示方法

ブログ進捗

こんにちは!タカリブ(@taka-liveです。

この記事ではブログ( Cocoon)の投稿記事を2列表示させる方法を解説しています。

そのまま2列表示すると、サムネイルサイズがバラバラに表示される場合があります。ただ、2列表示とサムネサイズの調整は簡単にできるんです。この記事を読めば挫折することなく実践する方法が分かりますよ♪

今回は下記2つについて順番に解説しています!

  1. 投稿記事を2列表示にする方法
  2. 2列表示のサムネサイズを揃える方法

投稿記事を2列表示にする方法

Cocoonで1列表示(デフォルト)になっている投稿記事、「少し見辛い」そう思ったことがある方に朗報!

超簡単に2列表示にできます。その方法をご紹介!

手順1

管理画面のCocoon設定からインデックスをクリック

手順2

カードタイプから縦型カード2列を選択し、変更をまとめて保存をクリック

以上!超簡単です。

さてさて、ブログの記事がどのように表示されているか確認。

ちゃんと2列に表示されているな!

「んっ。高さバラバラじぇねーか!」

パソコンに文句を言っている人のイラスト

そうです。「Cocoon」では記事ごとにサムネイル(アイキャッチ画像)の大きさが違うと、高さがばらばらに表示されてしまうんです。

「高さを揃えてスッキリさせたい!」という方向けに、次は超簡単なサイズ調節法を解説!




2列表示のサムネサイズを揃える方法

それでは、サムネイル画像を超簡単に調節する(揃える)手順を紹介します。

一個一個画像をトリミングするとかではないので、ご安心を!

手順1

管理画面のプラグインから新規追加をクリック。

キーワードに「Thumbnails」と入れ、Regenerate Thumbnailsをインストールしたら有効化。

手順2

管理画面の、ツールの欄に「Regenerate Thumbnails」が追加されているのでクリック。

すると、下記画面が表示されます。

青いボタンが2つ表示されるにで、上の「〜All 186 Attachments」をクリック。

クリック後、下図のような青バーのゲージが出現。青バーがMAXになり「〜完了しました。」と表示されるまで待ち!

途中でページを離れてしまうと、バグることがあるので要注意!

2列に揃って表示!

さて、再度投稿記事を確認してみると、綺麗に高さが揃っています!

ブログ初心者の僕でも簡単にできました。同じようにやってみたい方にはオススメです!

最後まで読んでいただき、ありがとうございました!

コメント