ブログで稼ぐ

【テーマJIN】のウィジェット追尾サイドバー導入で問題発生!?

【テーマJIN】のウィジェット追尾サイドバー導入で問題発生!?

この記事では、テーマJINのウィジェット追尾サイドバーはデザイン崩れが起きるのでスマホで読まれる記事を書いているなら使用しない方がいいということについてまとめている。

エルマー
エルマー
テーマJINってPCだけで表示させることができる追尾サイドバーが使えるんでしょ?
ホロン
ホロン
そうそう。めちゃくちゃ便利で、目次とか大きめのアドセンスを入れると便利なんだけど、

テーマJINにはウィジェットを細かく指定することができ、

  • サイドバー
  • 追尾サイドバー
  • トップページ上部
  • トップページ下部
  • 記事上部
  • 記事下部
  • フッター【左】
  • フッター【中央】
  • フッター【右】

とそれぞれ設定できる。(上はフッター3つ分けの場合)

その中でも、追尾サイドバーはPCだけで表示することができ、画面をスクロールすると追尾し表示されるので、導線や広告の配置に使いやすい。

そんな追尾サイドバーだが、多くのテーマでトラブルを引き起こす原因の一つとして挙げられる厄介な部分だ。

そのため、安易に設定してしまうとデザイン崩れが起きてしまう。

今回はそんなテーマJINの追尾サイドバー導入問題とその解決策、や導入時の注意点などを紹介していこう。

それではいってみよう。

jinの追尾サイドバーを導入すると発生する問題

jinの追尾サイドバーを導入すると発生する問題

まずjinの追尾サイドバーを導入すると発生する問題・不具合が以下になる。

画面を縮小した際に表示デザインが崩れてしまう。

ブラウザを読み込んでしまえば、修正される問題ではあるのだが、例えばGoogleなどの検索結果で直接、自分のブログやサイトに読者が訪れた時・SNSで拡散したリンクから直接ユーザーが訪れたときなどに厄介だ。

その読者たちが、記事を読もうと下にスクロールしていくと追尾サイドバーを導入しているがために、画面縮小時のデザイン崩れが起きてしまう。

再びブラウザを読み込んでくれれば解決するのだが、多くの訪問者はサイト自体に違和感を覚えて離脱してしまうことだろう。

もちろん、全ての場合にこういう問題が起きるのではないが、僕のこのブログで以前ウィジェットの設定から追尾サイドバーを導入した際、上記のような問題が起きてしまった。

キャッシュ削除やプラグインの相性チェックなど色々解決策を模索したが、結局次のような結論に至った。

ウィジェット追尾サイドバー問題の解決策

ウィジェット追尾サイドバー問題の解決策

テーマJINでウィジェット設定から追尾サイドバーを導入すると発生してしまう問題・不具合の解決策。

それは、次の3通りになる。

問題の解決策
  1. PCで読まれる記事だけを書いているなら気にしないでOK
  2. スマホで読まれるサイトとPCで読まれるサイトを別々に作る(noindexで記事をコピペもアリ。)
  3. 導入しないorデザイン崩れを承知で導入する

PCで読まれる記事を書いているなら気にせず導入

まずあなたが、書いている記事は「PCで読まれるか?」それとも「スマホで読まれることが多いか?」それとも「両方で読まれるか?」

を考えた場合、明らかにPCで読まれることの方が多い場合はデザイン崩れの問題を気にせず導入してしまえばいい。

テーマJINの追尾サイドバーの問題は、画面縮小の時、つまりスマホで読まれるタイミングでデザイン崩れが発生してしまうだけなので、PC画面上では一切問題ない。

そのため、PCで読まれる記事(例えば、プログラミング系のコード、カスタマイズ、ワードプレスやブログ系の記事、PCツールの使い方系の記事など)を量産しているブログやサイトはそのまま導入でOKだ。

スマホで読まれるサイトとPCで読まれるサイトを別々に作る

しかし、大抵の場合PCだけで読まれる記事だけしかないメディアというのはないだろう。

スマホが普及している時代だからこそ、スマホでサイトに訪れる読者の方が多いくらいなので、自分がPCで読まれていると思っていても、スマホで読まれていることの方が多いくらいだ。

そんな時はどうすればいいのか?

どうしても追尾サイドバーを導入したい場合には、スマホで読まれる記事をまとめたサイトとPCで読まれる記事を集めたサイトを別々に作るのがおすすめだ。

確かにドメインパワーやGoogleの評価などは分散されるリスクがあるが、noindexをうまく使いこなして記事などをコピペしていけば読者様のコンテンツは補填できる。

ただし、やり方を間違えるとSEOでペナルティを食らうリスクもあるので、ある程度SEOに詳しい人にしかおすすめしない。

導入しないorデザイン崩れを承知の上で導入

最後の方法が導入しないorデザイン崩れを承知の上で導入することだ。

過去の僕は、前者を選んだ。(最近は2番目の方法でテーマJINを使った新サイトを作っている。)

デザイン崩れが起きてしまうことのリスクは大きい。

新規訪問者のページ滞在時間が減り、離脱率が大きくなってしまえば、Googleから品質の悪い記事だと思われてしまう。

たとえそれが神クラスの良質な記事であっても。

たかが追尾サイドバーを導入しただけでSEO的なネガティブ評価を受けるくらいなら導入しない方がマシだ。

しかもサイドバーを導入する理由としては、目次や大き目のアドセンスの導入ぐらい。

個人的にはどちらもそこまで必要性は感じない。(もちろん追尾サイドバーに目次があったら便利だけど。)

なので、個人的にはデザイン崩れが起きてまで追尾サイドバーを導入しない方がいいと思う。

それでも、導入したい場合はデザイン崩れを承知の上で導入してしまえばOK。

追尾サイドバーでデザイン崩れが起きるかチェックする方法

追尾サイドバーを導入するとデザイン崩れが起きるかチェックする方法も一応サクッと紹介しておこう。(Mac)

まずは追尾サイドバーに適当にコンテンツを追加する。

(ここではそのままTOCの目次を追加してみた。)

JIN追尾サイドバーでデザイン崩れ問題確認方法1

次に記事をチェックし、追尾サイドバーが表示されていることを確認。

JIN追尾サイドバーでデザイン崩れ問題確認方法2

PC上では問題なく表示されるし、画面を追って付いてくる。

JIN追尾サイドバーでデザイン崩れ問題確認方法3

ここからデザイン崩れが起きるかチェックしていこう。

開発▶︎レスポンシブ・デザイン・モードにするをクリック!

JIN追尾サイドバーでデザイン崩れ問題確認方法4

すると画面がスマホで見たときのように表示される。(画面が縮小される。)

この状態で下にスクロールしてみてほしい。

JIN追尾サイドバーでデザイン崩れ問題確認方法5

するとこのようにデザイン崩れが発生してしまう。

もしも下にスクロールしてもデザインが崩れなければ問題ない。(そのまま追尾サイドバーの導入でOK)

JIN追尾サイドバーでデザイン崩れ問題確認方法6

ちなみに、再びブラウザを読み込むと。

JIN追尾サイドバーでデザイン崩れ問題確認方法7

このようにページが再び表示されるので、下にスクロールしてみてほしい。

JIN追尾サイドバーでデザイン崩れ問題確認方法8

下にスクロールしても先ほどのようなデザイン崩れ問題は発生しない。

つまり、ブラウザを再び読み込むことで、画面縮小のデザイン崩れは解決できる。

しかしながら、これでは意味がない。

画面を縮小でデザインが崩れた時点でアウトなので、ここはよく注意すべきだ。

テーマJINのウィジェット追尾サイドバー導入まとめ

テーマJINのウィジェット追尾サイドバー導入

ということで、今回はテーマJINのウィジェット設定『追尾サイドバー』導入で起こる問題について詳しくまとめてみた。

とてもマニアックな内容ではあるが、ここら辺もユーザビリティに深く関わる部分なので、きっちり設定しておきたいところ。

こういった問題もアップデートされて修正されていくだろうが、修正されるまでは追尾サイドバーの導入は慎重に行うべきだ。

また、特にこだわりがない場合は設定しないことをおすすめする。

1+
月収100万円をラクに達成するためのテンプレート「New Game+」
月収100万円をラクに達成するためのテンプレート「New Game+」

こんにちはホロンです。

突然ですが、 動画や電子書籍を無限に複製して 収入をガンガン増やすことが可能な 「情報販売」という職業をご存じですか?

パソコン1台で家から出ずに 年間6億円の利益を得ている講師による 情報を販売して自動的に 収入を得るための方法を 「基礎から応用」まで公開しています。

今だけ「特別プレゼント」もお渡ししていますが、 24時間限定となりますので、 チャンスを逃さないよう ご注意ください。 ↓↓↓

月収100万円をラクに達成するためのテンプレート「New Game+」

■卑怯すぎる裏技を公開 今回あなたにお伝えする 「情報販売」の手法は すでに月収100万円プレーヤーを 多数生み出していて、 中には3ヶ月で2300万円を 達成してしまった人もいる、 効果実証済みの手法です。

人間の購買意欲を強く刺激することも可能な 「危険な技術」を含むので 絶対に悪用しないでください。

・2019年だけで年間6億円の利益を得ている講師が使っている 「禁断の文章テンプレート」

・「卑怯すぎるカンニング」をして 勝てる勝負だけに挑む方法 (※もちろん合法です)

・不労所得を生み出す「自動販売機」を ネット上に設置する方法 上記のような強烈な内容を含むので、 人数と期間を限定しての公開となります。

詳細はこちらからご確認ください。 ↓↓↓

月収100万円をラクに達成するためのテンプレート「New Game+」

\今すぐCheck!/
公式ページ

本気で100万を望んでいる人しか見ないでください。ガチです。

0