カード型のアイキャッチ画像のサイズカスタマイズ

「コンテンツのレイアウト」でカード型を選択したとき、
デフォルトで表示されるサイズだと、
表示したい画像の下部分が切れて表示されてしまい、
どこでサイズ変更できるのかなぁ。。とかなり探しまくったので、
それが設定されているファイルについて。

設定ファイルは、

ワードプレス設置フォルダ/wp-content/themes/wp-alpha/css/wpbasic.css

でした。

設定を変更するには、まずその「wpbasic.css」というファイルの
376行目にある/* カード型 */という部分を探す。

 /* カード型 */

.l-card .entry-img {
float: none;
margin: 0 0 .75em;
height: 15em;
max-height: 15em;
width: 100%;
}

となっているので、ここのheightとmax-heightの値を変更することで
画像の下部分が切れるのは防ぐことができた。

この下の、

 .l-card .entry-img-inner { /* htmlの方にbackground-imageが書いてある */
display: block;
width: 100%;
height: 100%;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}

の部分では、heightは100%のままで、widthを80%等にすると、
画像全体が縮小されて、縦は画像が切れることなく表示された。

でも、画像が縮小されると、バックの色が表示されて見栄えが悪いので、
このやり方はやめておく。

 

ちなみに、ファイルの573行目にある

 .h1,
.entry-content h1,
.textwidget h1 {
text-align: left;
}

の部分で画像の下のテキスト部分のスタイルを変更できた。