STINGER 5のヘッダー画像を3分でスマホに表示させる方法

STINGER 5のヘッダー画像はスマホでは表示されません。最近は、スマホでのアクセスが多く、調べたら、85%のアクセスがスマホによるものだったので、せっかくヘッダー画像があるのにもったいない・・・かもしれません。そこで、STINGER 5で、ヘッダー画像をスマホでも表示させる方法を考えました。しかも、3分でやってしまいます(笑)。

親テーマをいじる方法と子テーマをいじる方法の二つを紹介します。

親テーマを修正する方法

style.cssの999行目にヘッダー画像の設定がありますので、これを下記のように書き換えます。

書き換え前
#gazou {
display: none;
}

書き換え後
#gazou {
height: auto;
width: 100vw!important;
}

vwはviewport widthの略で、この設定は、「横幅を画面の横幅にして、高さを自動調整する」という設定です。

子テーマを修正する方法

自分でカスタマイズしている人は子テーマを使っていると思いますが、子テーマではこの方法は効きません。

親テーマの989行目の・・・

/*レイアウト スマートフォン
----------------------------------------------------*/

・・・以下を全部コピーして、子テーマに貼り付けます。

すでに子テーマで加えたコードはこの中の適切な場所に移動します。

構造はスマホ→タブレット→PCの順になっていますので、スマホ関係は、スマホの末尾、つまり、タブレットの設定の直前に移動し、PC関係は末尾に移動します。

そこで、スマホ画面へのヘッダー画面の表示をする設定ですが、コメント、及び、その上の部分を除き、上から9行目のところにある設定(上と同じ部分)を下記のように書き換えます。

書き換え前
#gazou {
display: none;
}

書き換え後
#gazou {
display: block;
height: auto;
max-width: 100vw!important;
}

「display: block」の設定がみそです。この設定がないと画像が表示されません。あとは、親テーマの編集の場合と同じ意味になります。

子テーマに複雑な設定がされていなければ、3分もあれば、完了するでしょう。

なお、ヘッダー画像を表示すると、それだけ表示が重くなりますので、アクセスの多いブログでは、キャッシュ・プラグインの使用がお勧めです。画像部分の負荷はたいして軽減されませんが、他のプロセスによる負荷が軽減されます。