《すぐわかるワードプレス講座ランキング》

▼当ブログおすすめのワードプレス講座はコチラ!

【1位】 10分ブログ作成 《たった10分でブログ完成!!》

【2位】 WPHack 《30代向けホームページ作成講座!》

【3位】 テックアカデミー 《無料体験ありプロになるための講座!》

《すぐわかるWordPress講座ランキング》

▼私のおすすめのWordPress講座はコチラ!

【1位】 10分ブログ作成
《たった10分でブログ完成!!》

【2位】 WPHack
《30代向けホームページ作成講座!》

【3位】 テックアカデミー
《無料体験ありプロになるための講座!》

今回は、WordPressブログCocoonテーマのアイキャッチ画像の高さを、変更します。

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

WordPressブログCocoonテーマのアイキャッチ画像の高さ変更

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

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

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

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

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

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

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

/*アイキャッチ画像高さ変更*/
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:250px;
}
/*アイキャッチ画像高さスマホ用*/
@media screen and (max-width: 510px) {
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
height:150px;
}
}
.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位】 10分ブログ作成 《たった10分でブログ完成!!》

【2位】 WPHack 《30代向けホームページ作成講座!》

【3位】 テックアカデミー 《無料体験ありプロになるための講座!》

 

Wordpressの関連記事
  • 【動画付き】XFREEのデータをエックスサーバーに引っ越し(移行)させる方法
  • 【動画付き】WordPressブログのプラグインを一括インストールと有効化する方法(Multi Plugin Installer)
  • 【動画付き】エックスサーバーのWordPressブログを初期化する方法
  • Multi Plugin Installerをインストールする方法とダウンロード
  • 【動画付き】XFREEのWordPressブログのFTP接続設定
  • 海外からXFREEの無料WordPressブログを使う方法
おすすめの記事