テーマ『Lightning』の投稿記事一覧ページのアイキャッチ画像を大きくする方法

ワードプレスの人気テーマ「Lightning」のアイキャッチ画像を大きく表示させる方法です。

PCでの表示

この投稿記事一覧ページのアイキャッチ画像を少し大きくして、訴求力をアップさせたい。
私の場合は、PCでは150pxから260pxにサイズ変更しました。(希望のサイズで)
FBでシェアした時のOGP画像との関係で正方形を止めて横長長方形に変更しました(縦430px・横286px )

 

 

スマホでの表示

全面表示に変更です

アイキャッチ画像を大きく表示させる方法をお伝えしていきます。長くなります。

管理画面(設定)→メディアへ サイズ変更します。

表示させたいサイズを入力させます。私の場合は260px × 260px です。
FBでシェアした時のOGP画像との関係で正方形を止めて横長長方形に変更しました(縦430px・横286px )
正方形でなくても構いません。

 

プラグイン「Regenerate Thumbnails」をインストールする

管理画面の(プラグイン)から新規追加、「Regenerate Thumbnails」を検索してインストールして有効化しましょう。

このプラグインは、今まで投稿してワードプレスの中に入っている画像のサイズを再生成するためのプラグインです。

プラグインをインストールすると、ツール内に「Regen.Thumbnail」という記載がありますのでクリックします。

ワードプレス「Regenerate Thumbnails」インストール

過去に投稿した画像が多いほど時間がかかります。

ここでお茶でも飲みながらゆっくり待ちましょう。

リサイズが完了したら、このプラグインは不要になるので、削除して構いません。

次はCSSのカスタマイズです。

管理画面の上にあるVK ExUnitの中にある「CSSカスタマイズ」の部分に下記のコードを記載します。

記載するコードはこちらです。コピペしてくださいね。
FBでシェアした時のOGP画像との関係で正方形を止めて横長長方形に変更しました(縦430px)

.media .postList_thumbnail{
    width: 430px !important;
}

@media (max-width: 480px){
    .media .postList_thumbnail{
    width: 100% !important;
    padding-right:0px!important;

}
}

これで、完了です。記事一覧ページを見てみてください。大きくなってますよ。スマホでの表示確認も忘れずに。ちゃんと表示されていれば完成〜!

ワードプレス講座を受講された方限定

「できない!時間ない!」という方はご依頼ください。
または教えてもらいながら自分でやりたい!という方は次回の勉強会、またはフォローアップレッスンへお越しください。

次回の勉強会は11月27日(月)19:00~です。

2017年11月27日 (月)19:00〜21:00 受講者限定勉強会「新機能ぞくぞく!試してみよう」

 

 

ホームページのお悩み相談室

初回のみのご相談となります

こんなことでお悩みの方へ

  • その場でワードプレスの操作方法を教えてもらいたい
  • ホームページは持っているけど、このままでいいのか不安
  • ホームページの内容が決まらない
  • とにかく急いでホームページがほしい
  • 時間がなくて、ホームページに手がつけられない
  • やりたいことがあるけどどう実現すればいいかわからない
  • プロの意見を聞いて相談しながらホームページを作りたい

オンラインにて毎日開催!

お仕事が終わったあとでもゆっくりご相談できる夜の時間帯に開催しています。
オンライン(ZOOM)を使ってご相談者様のホームページを画面共有しながら、ご相談に応じます。

Point
1

個別対面でじっくり相談!

大阪周辺のコワーキングスペースにて対面でじっくりご相談に応じます。

Point
2

プロと一緒にその場でアドバイス!

ホームページ作りのプロがその場でホームページを診断し、修正可能の箇所をアドバイスいたします

Point
3