【画像付き解説】スマホでのみヘッダーを非表示にする超簡単な方法(STORK)

スマホトップページのヘッダー部分を赤で囲っている




トップページのスクリーンショット
 

現在このブログのトップページはこのようにヘッダーが表示されるようになっていて、 

 スマホでのトップページのスクリーンショット
 

スマホだとこのように表示されるようになっています。

 

スマホトップページのヘッダー部分を赤で囲っている

スマホで見るときにヘッダーが表示されていると邪魔だな〜と思い、

どうやって消したら良いのか検索したのですが、

超初心者の私にも理解できるように説明してあるページにたどり着くことができませんでした。

 

OPENCAGEにメールで直接問い合わせたところ とても簡単にできることがわかったので、
(もしかしたらOPENCAGEのHPにも書いてあったのかな・・・わからなかった・・・。)

STORKでブログを作成している方向けに、スマホで見る場合のみヘッダー画像を削除する方法をご紹介します。

 

ヘッダー画像の追加

まずは、《外観》→《カスタマイズ》→《トップページ設定》から《ヘッダー背景画像》を追加します。

トップページのヘッダー追加
 

この時、《ヘッダー背景画像(SP用)》には画像を追加しないでください。

注意

ヘッダー背景画像の上の《英語表示テキスト》《日本語表示テキスト》(またはどちらか) は

ヘッダー画像を表示するなら必須ですので、必ず入力してください

《保存して公開》をお忘れなく

 

CSSの追加

次に《外観》→《カスタマイズ》→《追加CSS》へ行き、次のCSSをコピペで追加してください。

追加cssを編集している
以下のcssを追加してください
@media only screen and (max-width: 480px) {
#custom_header {display:none;}
}
 

できたら《保存して公開》

 

スマホで確認

パソコンでスマホから見た場合の表示をみると、正しく出ないことがあるので

手持ちのスマートフォンから直接確認しましょう。

Before

スマホでのトップページのスクリーンショット


After

スマホでトップページのヘッダーを削除した

 

こうなったら完成です。お疲れさまでした。

 







コメントを残す