Blog SEO

WordPressでサイドバーをスマホ画面から非表示にする方法を紹介します

[chat face="ojisan2_think-1.png" name="" align="left" border="none" bg="gray"] スマホで見たときにPC画面のサイドバーがページの下に表示されるの長くて邪魔だな〜。 [/chat]

[chat face="chaneko-kaisetsu.png" name="" align="right" border="none" bg="blue"] サイドバーを非表示にする方法があるから説明するね! [/chat]

みなさんこんにちは。UD(@ud_34m)です。

これは実際に僕が直面した問題です...

ワードプレステーマの「JIN」を使用しているのですが、スマホで自分のサイトはどう見えるんだろうと思い確認した時に事件は起こりました...

WordPressを利用してブログを運営している方がとても多いと思いますが、サイトを作る際、PC画面の見栄えだけ考えてサイトを作っていませんか?

もちろんPC画面のサイトデザインも大事なのですが、スマホ画面の見栄えも大事なんです。

実は、PCよりもスマートフォンの方がが持っている方が多く手軽に検索できるため、閲覧する方が多いのです。

 

そもそもサイドバーの重要性とは?

冒頭でスマホで検索する方が多いと言いましたが、もちろんPCで検索してサイトを閲覧する方も大勢います。

PCでサイトを閲覧している場合は、サイドバーはどのページを開いても右側に表示されるとても存在感のあるものになりますよね!

[chat face="chaneko-kaisetsu.png" name="" align="right" border="none" bg="blue"] でも、スマホでサイトに訪れたらどうだろう? [/chat]

スマホでサイトを閲覧した場合、サイドバー記事を最後まで読み終わったあと、スライドするとずらずらーっと表示されて長くて邪魔と感じてしまう可能性があるものになってしまいます

PC画面の時にはサイドバーを表示してスマホ画面の時だけ非表示にするHTMLやCSSは難しくて分からない...

そんな方に、サイドバーをスマホの時だけ簡単に非表示できるプラグインがありますのでご紹介します!!

 

スマホ画面でサイドバーを非表示にできるプラグイン「Widget Logic」

HTMLやCSSについてあまり詳しくない方にはとても助かるプラグインです!

では、導入(インストール方法)と使用方法についてご紹介します。

1.インストール方法

プラグインのインストールは他にプラグインと同様で簡単です。

  1. 左メニューの「プラグイン」から「新規追加」を開く
  2. 「Widget Logic」と検索し、「インストール」→「有効化」

<img src=”puppy.jpg” alt=”Widget Logic”/>

 

⬅︎このプラグインをインストールしましょう。

 

インストールはこれで完了です。

2.利用方法

設定方法もとても簡単です。

  1. 左メニューの「外観」から「ウィジェット」を開く
  2. サイドバーの欄の非表示にしたいウィジェットを開く

    例として「検索」を開きました

  3. 「ウィジェットのロジック」の欄に「!wp_is_mobile()」と入力して保存

設定方法はこれだけ!

もし入力するのが面倒であれば以下をコピペしてください。

!wp_is_mobile()

設定が終わったらスマホでしっかり非表示になっているか確認してみてください。

まとめ:サイドバーを非表示にする隠されたメリット

さて、ここまでスマホ画面でサイドバーを非表示にする方法をまとめてきました。

サイトのデザイン上の問題解決以外に、サイドバーが記事の下の表示させなくすることで得られる隠されたメリットが存在します。

それは、収益の増加です。

理由は、以下のこの2つです。

  1. 記事の下の要素を無くし、広告が目に入りやすくなる。
  2. 画面を最後までスクロールした時に広告が表示される。

ぜひ一度、サイドバーの削除をオススメします!

 

ブログランキング参加中!クリックで応援お願いします!

  • この記事を書いた人
  • 最新記事

-Blog, SEO
-,

© 2020 ジブンナビ