【Cocoon】フロントページで縦型カードのサムネイル画像を幅いっぱいにする方法!

cocoonで、インデックスのカードタイプ縦型を選んだ際に、サムネイル画像を幅いっぱいで表示する方法を紹介します。

といっても、、

padding:0px;

paddingを0pxで指定するだけです。

目次

paddingとは?

念のための解説ですが、paddingとはボックス内側の余白です。
外側の余白はmarginです。

サムネイル画像を見てもらうとわかるかと思いますが、カードの内に余白が少しあって、余白に囲まれるようにサムネイルが表示されています。

なのでpaddingを0で指定しておけばとりあえず内の余白は消えます。

今使っているもの

とりあえず今使っているものを、メモ代わりに載せます。
※SWELLに乗り換えたのでもう使ってないです><

.entry-card-wrap{
padding:0px;
}
.entry-card-title{
padding: 10px;
}

こんな感じでいけると思います。

.entry-card-titleが文字部分になるので、そこだけ微調整してます。

【Cocoon】が好きなら【SWELL】乗り換えも

Cocoonは無料のテーマでは最も使いやすいなんて言われています。
個人的にもそれには同意で、これ以上のものってそうそうないと思います。

とはいえ、長年ブログをやってると、そろそろ有料テーマ使っていい感じにしていきたいなーなんて思ってしまいますよね。

私もそうでした。

個人的に乗り換えるなら【SWELL】一択かと思ってます。
いろいろ試しては見たんですが、一番しっくり来てます。

価格は17,600円そこそこ高いですが、まぁ一度きりと思えば納得です。
ぜひ詳細確認してみてください。

速度的にも、SEO的にも使いやすいですよ!

コメント

コメントする

目次