WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ウィジェット：追従サイドバーエリア」の不具合対策についてまとめてみました。
ウィジェット：追従サイドバーエリアの不具合について
これまで、JavaScriptの読み込みを後回しにするためのWordPress プラグイン【Scripts-To-Footer】を導入していたのですが、「ウィジェット：追従サイドバーエリア」が正常に表示されなくなるので外しました。
しかし、追従サイドバーエリアの上に謎の空白が表示されています。
これまでWordPress プラグイン【Scripts-To-Footer】に導入していたため気づかなかったようです。
検証で確認したところ、
<div class="fit-sidebar-blank" style="border: 0px solid rgb(255, 255, 255); margin: 0px; padding: 0px; height: 318px; display: none;"></div> <div class="fit-sidebar-blank" style="border: 0px solid rgb(255, 255, 255); margin: 0px; padding: 0px; height: 318px; display: none;"></div>
と言うdivタグが2つ設定されていました。
下側のdivタグは「ウィジェット：追従サイドバーエリア」に設定したウィジェットですが、それと全く同じdivタグが上にも追加されており「ウィジェット：追従サイドバーエリア」の先頭に空白が出来てしまっています。
class名が”fit-sidebar-blank”と言うことなので、FITのTHE THOR側が新しいバージョンのWordPressに対応していな可能性があります。
但し、私の導入しているプラグインやカスタマイズが起因されている可能性もあり、自分が使っているTHE THORだけで発生している可能性もあります。
「ウィジェット：追従サイドバーエリア」を使わなければ問題ないのですが、目次ウィジェットを追従させたかったので、「ウィジェット：追従サイドバーエリア」の謎の空白を削除するカスタマイズを行ってみました。
ウィジェット：追従サイドバーエリアの不具合対策
WordPressテーマ THE THOR（ザ・トール）での「ウィジェット：追従サイドバーエリア」の不具合対策を行います。
カスタマイズ内容
「ウィジェット：追従サイドバーエリア」の不具合対策のカスタマイズ内容は、下記の通りです。
このカスタマイズ内容を「スタイルシート(style-user.css)」に追記します。
/*****************************
** ■追従サイドバーエリアの空白対策
*****************************/
.fit-sidebar-blank {
height: 0!important;
}
最後に
divタグ内の高さ(height)の設定を0に強制設定することで、追従サイドバーエリア上の謎の空白を消してみました。
コメント