Cocoon のエントリーカード。 インデックス表示されるものや、 サイドバーで表示されるもの、 カルーセル、 いろいろあります。
そんなエントリーカードにサムネイルを付ける事が出来るのですが、 サムネイル周辺の余白が気になったのでカスタマイズを行います。
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
まずはサイドバー
まず上記の画像がエントリーカードにドロップシャドウをつけた状態です。 css はこちら。
.a-wrap {
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
transition-duration: 0.3s;
}
.a-wrap:hover {
transform: translateY(-4px);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.24);
transition-duration: 0.3s;
} Cocoon の COLORS スキンから流用しています。
サイドバーのサムネイル周りの余白が狭く感じますので広げます。 ついでに、 エントリーカード間のマージンも広げます。 （設定する数値はお好みで ♪）
.widget-entry-cards .a-wrap {
margin: 12.25px 0;
padding: 9.8px;
} 結果がこちらになります。 まだまだ歪ですが多少はゆとりができました。
サムネイル下部の余白を調整する
続いて、 メインカラムのエントリーカード。 サムネイルの上下の余白が揃っていないので調整します。
サムネイルは <img> タグで設置されており、 そのサイズは 320px×180px となっています。
そして、 その <img> タグを <figure> タグが囲んでいます。
この <figure> タグに上部 margin 指定がされています。 また、 サイズは <img> タグとは異なり 320px×190px と高さが増えています。
上下の余白を揃えるために上部 margin は打ち消すとして、 高さが 10px 増えているのをなんとかしなければなりません。 「height: 180px;」 とすればカンタンなのですが、 あまりにも対処療法すぎるので原因を探っていた処、 やっと特定できました。
犯人は line-height
またか。 またお前なのか。 どうもコイツには困らされるケースが多い。 いや、 むしろそれがために気付けたとも言えます。
.entry-card-thumb,
.widget-entry-card-thumb,
.related-entry-card-thumb,
.carousel-entry-card-thumb {
margin-top: 0;
line-height: 0;
}
と指定することにより、
不要な余白を削除できます。
またこの際、 <figure> に内包されるタグにも line-height: 0; が効いてくるので、 カテゴリーラベルを表示されている方などは
.cat-label {
line-height: 1.8;
} などの記述も必要になります。
こんな記述でもイケるかもしれません ♪
[class$="card-thumb"] {
margin-top: 0;
line-height: 0;
}
.cat-label {
line-height: 1.8;
} 2019-03-11 ：追記
スマホ表示の際に不要な余白が出るケースもあるので、 次の表記で良さそうです。
[class$="card-thumb"] {
margin-top: 0;
margin-bottom: 0;
line-height: 0;
}
.cat-label {
line-height: 1.8;
} 全体像はこちらになります。 メインカラムのサムネイル周りは均等になりましたが、 サイドバー右上部の 「大きなサムネイル」 仕様のエントリータイトルとサムネイルがくっついてしまいました。
大きなカード
メインカラムのカードタイプが 「大きなカード」 の場合も、 エントリータイトルとサムネイルがくっついてしまうので、
.front-top-page .ect-big-card-first .a-wrap:first-of-type .card-content,
.ect-big-card .card-content {
margin-top: 10px;
} と指定します。
大きなサムネイル
サムネイル下部の余白がなくなったため、 大きなサムネイル （全体像の右上部） とタイトルのマージンを調整します。
.widget-entry-cards.large-thumb .card-content {
margin: 9.8px 0 0;
}
とし、 エントリーカードの padding と同じ値を上マージンに指示します。 が、
ここでも line-height が効いてくるので実際にはより広くなって表示されます。
まぁ、 コレ位は気にしないのが吉なのですが、 敢えてこれを防ぐには 「line-height: 1;」 を指定します。 が、 実際に指定してみると
この様に行間が無くなってしまうので見辛くなります。 ですので、 「line-height: 1;」 を指定する場合は
.widget-entry-cards.large-thumb .card-content {
margin: 9.8px 0 0;
line-height: 1;
white-space: nowrap;
overflow: hidden;
}
などと指定して、
この様に改行禁止にするのも良いかもしれません。 全体像はこうなります。
右上部、 「php 処理で〜」 が line-height 指定ナシ、 「エントリーカード〜」 が line-height 指定アリです。
タイトルを重ねた大きなサムネイル
エントリータイトルがサムネイルに重なりますので、 margin 指定は不要です。
ただ、 この表示方法はタイトル部の高さに制限 （max-height） が設けられているため、 タイトルがサムネイル上から見切れてしまうケースもあります。
その際に、 先程の改行禁止を応用して、 この様な指定をしても良いかもしれません。
.widget-entry-cards.large-thumb-on .card-content {
white-space: nowrap;
overflow: hidden;
} 関連記事
エントリーカード （デフォルト）
デフォルトの状態は、 タイトルと抜粋の文字数によって行の高さが変化します。
文字数が多く、 サムネイルの高さより大きくなる場合は余白の調整は難しいですが、 サムネイルの高さより低いのに余白が均等にならない場合は次の指定をします。
.rect-entry-card .related-entry-card-content {
padding-bottom: 0;
} ミニカード
ここまでのカスタマイズに連動し、 既に余白は均等になっているハズ ；；
縦型カード
縦型カードは、 隣り合う記事の文字数によってカードの高さが互いに影響し合うので、 全てのケースで余白を均等にするのは難しいです。
サムネイル周囲の余白に限定し、 且つタイトルの line-height を気にしなければ次の指定でオッケーです。
.rect-vartical-card .related-entry-card-content {
margin: 9.8px 0 0;
}
.rect-vartical-card .related-entry-card-wrap {
padding: 9.8px;
}
コメント