ブログ運営

【JINカスタマイズ】PCヘッダーは表示、スマホヘッダーは非表示にする方法

さまざまなスタイルを、簡単1クリックで変更できる有能テーマ、JIN。

でも、インフォメーションバーやピックアップコンテンツ、コンテンツマガジンなど追加できるようになるにつれて、

PCデザインではよく見えるヘッダー画像が、スマホではうざったい…

と感じたことはないでしょうか。

新しいデザインを追加していくことでサイト上部に情報が詰め込まれ過ぎてしまい、

一瞬の見た目でブラウザバックしたくなるようなうるさいデザインになってしまっては元も子もありません。

今日は、

PCでヘッダー画像は設定したい、でもスマホヘッダーは非表示にしたい

という方のためにCSSコードをお教えします。(*’ω’*)

デザインをもっと凝ったものにしたい、自分の思った通りにカスタマイズしたい、と言う時にぜひご利用下さい。

スマホヘッダー画像を非表示にするCSSコード

パソコンのヘッダー画像表示はそのままに、スマホでのみ非表示にするコードはこちらです。

@media (max-width: 767px) {
.main-image{
display: none;
}
}

このコードを追加CSSへ貼り付ければ、ヘッダーのカスタマイズをすることができます。

 

コード貼り付け前と貼り付け後の比較

それでは、スマホヘッダー非表示コードを入力したものと、そうでないものの比較してみましょう。

当サイトはヘッダーありでデザインを組んでいますが、ヘッダー非表示にしたものはデザインがかなりさっぱりしていますよね。

この空いた部分に、

  • スマホスライドメニュー
  • インフォメーションバー
  • コンテンツマガジン
  • ピックアップコンテンツ

などを導入すれば、情報を詰め込み過ぎることなくデザインを組むことが出来ます。

 

CSSコードを貼り付ける方法

ここから、コードを使ったカスタマイズ方法が分からない方のために、先ほどご紹介したコードを張り付ける方法をご説明していきます。

 

ダッシュボードから外観⇒カスタマイズへ

まずは、ダッシュボードから外観⇒カスタマイズと選択してください。

 

メニュー一覧の下、追加CSSを選択

表示されるメニューを下にスクロールし、追加CSSを選択します。

 

そこへコピペ。追加済のCSSがある場合は、その下にコピペ

あとは、表示されるカスタマイズ欄に、先ほどのコードをコピペするだけです。

すでにご自身で書き込んだコードがある場合は、その下にペーストして下さい。

 

あとは公開をクリックすれば、カスタマイズ完了です。

 

スマホのヘッダーを非表示にする方法 まとめ

サイト上部は、ユーザーの目に一番最初にとまるところ。

ぜひとも、自分自身の納得のいくようにカスタマイズしたいところですよね。

 

PCではヘッダーを表示したいけれど、スマホでは非表示にしたい…

そんなとき、今回ご紹介したコードが役に立てば嬉しいです。

 

\関連記事/

>>【JINカスタマイズ】自分のプロフィールにリンクを貼り付ける方法

>>ワードプレス記事下の関連記事が消えない!【消し方&エラー対処法】

【JINカスタマイズ】自分のプロフィールにリンクを貼り付ける方法 この記事では、Wordpressのテーマ、【JIN】を利用しているあなたのために、 ウィジェットの『プロフィール』...
ワードプレス記事下の関連記事が消えない!【消し方&エラー対処法】ワードプレス記事下の関連記事の編集方法と、エラーが出てしまった時の対処法です。不必要なものを消し、読者の利便性、サイトの快適性を上げましょう。...
ABOUT ME
りなきむ
りなきむ
ワーホリ⇒そのままシドニー永住となった元旅人。現在は、おうちでノートPCを片手に主婦をしながら、『シドニー すみっこ暮らし』でシドニーの生活情報を発信しています。ときどき、ギリシャ人オットとのあれこれも。詳しいプロフィールはこちらからご覧いただけます。 質問、お仕事の依頼はお問い合わせからお願いいたします。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です