作業目安時間5分

次は、アイキャッチ画像の高さを、変更します。

現在は、アイキャッチ画像の高さがバラバラになっているので、画像の高さをそろえていきます。

アイキャッチ画像の高さ変更

ワードプレス管理画面を開きます。

左下の「外観」を押します。

左下の「外観」の下の「テーマエディター」を押します。

「理解しました」を押します。

右上の「スタイルシート(style.css)」を押します。

「スタイルシート(style.css)」の一番下へ移動します。

一番下 7357行目(6668行目)に下記コードを、コピーして貼り付けます。

.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:250px;
}
@media (max-width: 500px) {
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:100px;
}
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img:hover{
opacity:0.7;
transition:0.3s;
}

.card-thumb img:hover{
opacity:0.7;
transition:0.3s;
}

コードを貼り付けました。

一番下の「ファイルを更新」を押します。

ブログを見てみると、アイキャッチ画像の高さがそろったことがわかります。

コードに関しての説明

パソコン用画像高さheight:250px、スマホ用画像高さheight:100pxの数値を変更することにより、画像の高さを調整できます。

講座1の関連記事
  • 私がビジネスで絶対ゆずれない部分
  • カテゴリー設定 未分類を変更
  • ワードプレスキーワード
  • 時間の使い方のコツ
  • キーワードのコツ
  • 文字の先頭にタグをつける
おすすめの記事
講座1
次は、にほんブログ村の登録について説明します。 にほんブログ村の登録 作業手順 まずは、にほんブログ村のサイトを開きます。 ↓ https:...
講座1
次は、カテゴリ変更について説明します。 カテゴリ変更 作業手順 ワードプレスの管理画面を開きます。 左上の「投稿」を押します。 左側の「投稿...