当サイトではアフィリエイト広告を利用しています

WordPressテーマ GOLD BLOGでキービジュアル画像-スマホで横幅いっぱいに表示する方法

GoldBlog

GOLD(ゴールドブログ)で、トップページのキービジュアル(メインビジュアル)に、横長の画像を設定した際、デフォルトのままだと、縦幅が100%表示となり、画像の一部しか表示されません。

その際の対処方法をお伝えします。

ゴールドブログの設定で簡単に対処できるのですが、最初は設定場所が分かりにくかったです。

GOLD BLOG(ゴールドブログ)公式サイト

目次

キービジュアルとは

キービジュアルとは、以下の画像のようにトップページで画像や動画を大きく使うビジュアルのことです。

メインビジュアルやファーストビューとも言われます。

以下の画像は、デモサイトのものです。

スマホでうまく表示されないキービジュアル

デモサイトの例で解説します。

画像は横長です。

PCでは、先に掲載した画像の通り、横長で、横いっぱいに表示されています。

しかし、スマホで見ると、以下の画像のように一部だけが表示されました。

ゴールドブログ

以下のような感じで、画像の縦が100%の状態で、切り取られていたのだと思います。

これは、ゴールドブログの「デザイン着せ替え」機能でデザイン設定し、キービジュアルに動画を大きく使った場合も同様でした。(こちらのデモサイト

スマホでうまく表示されるように設定

管理画面→「カスタマイズ」→「トップページ設定」→「キービジュアル設定」

デフォルトでは、キービジュアル設定の「基本設定」「表示高さを選択」が以100%になっています。

この状態で、先の画像のようになっています。

ゴールドブログ設定

そこで、「表示高さを選択」「数値」にし、SP(スマホ)とPCの値を入力します。

数値は、キービジュアルの画像のサイズに合わせて入れてください。

デモサイトの場合は、スマホは縦幅250px、PCは500pxにしています。


ゴールドブログ設定

設定後は以下のように表示されました。

ゴールドブログ

設定は以上です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次