STORK(ストーク)のサイドバーが記事下にずれる原因と対策【WordPress(ワードプレス)】

アイキャッチ画像

どうも、たろう丸(@tarohmal)です。

先日から当ブログで発生していた『サイドバーが記事下にずれる現象』の原因と対策方法が見つかったので、同じ現象に悩むあなたのために記事に残しておきたいと思います。

 

  • 『サイドバーが記事下にずれる現象』の対策方法だけを手っ取り早く知りたい!

という方は、前半の原因と対策部分だけ読んでもらえれば大丈夫です。

その他にも不具合原因の調べ方を知りたい人は、3分くらいで読めますので最後までご覧ください。

具体的な状況と症状

当ブログが遭遇した『サイドバーが記事下にずれる現象』の具体的な状況と症状はこんな感じです。

  • 使用しているWordPressテーマは「STORK(ストーク)」
  • サイドバーずれが起こるのは、個別記事ページのみ
  • トップページや固定ページ(プライバシーポリシー等)では発生しない

ビジュアルとしては次の画像のように、サイドバーがまるごと記事の下に追いやられてしまってました。

サイドバーずれの症状① サイドバーずれの症状②

原因と対策

原因:STORK(ストーク)の機能「この記事を書いた人」の表示がトリガーになっていた

ぼくが遭遇した『サイドバーが記事下にずれる現象』の原因を最初にお話すると、STORK(ストーク)の記事下に「この記事を書いた人」を表示する機能がトリガーになっていました。

「この記事を書いた人」を表示させると、同時になぜか”DIV閉じタグ”というものが1つ余計に追加されてしまうことで、「この記事を書いた人」のあとに記述されているサイドバーが記事本体から追い出されて記事下に表示されていたんです。

対策:「この記事を書いた人」を非表示にして解決

対策方法としてはシンプルに、「この記事を書いた人」の表示を消すことにしました。

当ブログの場合はサイドバーにもプロフィール欄を設置しているので、記事下のプロフィール欄は消してもしまっても問題はないという判断です。

HTMLの知識をお持ちの方であれば、テーマをいじったり原因動作を探したりできるかもしれませんがそれには時間もかかるので、今回はトリガーとなっている「この記事を書いた人」機能を取り下げるだけにしました。

 

「この記事を書いた人」の消し方

「この記事を書いた人」を非表示にする手順をあわせてご紹介します。

  1. WordPressのダッシュボードから[ユーザー]→[あなたのプロフィール]を選択する
  2. [プロフィール情報]を空欄にする
記事下プロフィール欄の消し方① 記事下プロフィール欄の消し方②

もし同じ状況・同じ現象に悩んでいる方がいれば一度、「この記事を書いた人」を非表示にして様子を見てみてください。

原因究明のために試したチェック方法

プラグインを全て無効化してみる

WordPress(ワードプレス)で問題が起こったときの定番のチェック方法として、『プラグインを全て無効化してみる』を試してみました。

ただし今回は、プラグインに原因がなかったので現象に変化はありませんでした。

DIVタグの過不足がないか確認してみる

サイドバーのレイアウトが崩れる原因としてよくあるのが、[DIVタグ]の過不足です。

「DIVタグ閉じ忘れチェッカー」というサービスを使えばカンタンに[DIVタグ]を数えてくれるので、レイアウト崩れで困っている方はひとまずチェックしてみましょう。
>>DIVタグ閉じ忘れチェッカー(外部リンク)

DIVタグ閉じ忘れチェッカー

今回の場合は、[DIV閉じタグ]が一つ多くなっているということがわかったので、エディターに記事ページのHTMLソースをコピペして、ひとつずつ[DIVタグ]と[DIV閉じタグ]のセットがどこでズレているか確認してみました。

[DIVタグ]をひとつずつ数えていくと、今回の原因箇所と判明した「この記事を書いた人」の部分で[DIV閉じタグ]が余ることを見つけました。

(ちなみに、[DIVタグ]の対応チェックは手動でチェックしたのでかなり時間がかかってしまいました。もしも、もっと効率のいいやり方を知っている方がいれば教えてください……。)

おわりに

今回は『STORKでサイドバーが記事下にずれる現象』について、

  • 具体的な状況と症状
  • 原因と対策
  • 原因究明のために試したチェック方法

をご紹介しました。

STORKテーマによくある現象なのか?当ブログだけの特別な現象なのか?
ということまでは分かりませんでしたが、もし同じ現象に悩むブロガーさんの問題解決の一助になれば幸いです。

それでは、最後まで読んでいただいてありがとうございましたっ!

コメントを残す

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

CAPTCHA