エントリーカード・サムネイルの余白を均等にするカスタマイズ

Cocoon のエントリーカード インデックス表示されるものや サイドバーで表示されるもの カルーセル いろいろあります

そんなエントリーカードにサムネイルを付ける事が出来るのですが サムネイル周辺の余白が気になったのでカスタマイズを行います

check
  • カスタマイズは自己責任でお願いします。
  • 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タグ
サムネイルの img タグ

サムネイルは <img> タグで設置されており そのサイズは 320px × 180px となっています

imgタグを囲んでいるfigureタグ
img タグを囲んでいる figure タグ

そして その <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タグ
調整後の figure タグ

不要な余白を削除できます

またこの際 <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 と同じ値を上マージンに指示します

paddingと同じ値で上マージン
padding と同じ値で上マージン

ここでも line-height が効いてくるので実際にはより広くなって表示されます

まぁ コレ位は気にしないのが吉なのですが えてこれを防ぐには line-height: 1; を指定します 実際に指定してみると

line-height: 1;
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; 
 } 

などと指定して

改行禁止
改行禁止
paddingと共に表示
padding と共に表示

この様に改行禁止にするのも良いかもしれません 全体像はこうなります

line-height指定、ナシとアリ
line-height 指定 ナシとアリ

右上部 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; 
 } 

コメント