【JIN】フッターの位置が「右に」ズレてしまった！原因と解決方法を解説

WordPressはカスタマイズの自由度が高いと言われています。

私はHTMLやCSSの知識は持っていませんが、ワードプレステーマ『JIN』のおかげで、毎日のブログライフを楽しむことができています！

改めて『JIN』を開発してくださった方々に感謝いたします。

今回は、フッターが右にズレた原因と解決方法をご紹介します。

自分の不注意が原因だったのですが、正直なところ、かなりアタフタしました(⌒-⌒; )

私と同じ状況になった場合は、ぜひ参考にしていただければと思います。

フッターが右にズレた！！！

こちらは私が運営している別のブログのフッターですが、本来のフッターは上記画像のように表示されますが、サイドバーに広告を追加したら・・・

フッターが右にギュッとズレたのです！！！

あまりのショックで、フッターが右にズレた時のスクショを撮るのを忘れてしまいましたが、左半分が真っ白なフッターは本当にかっこ悪い。。。

フッターの部分が右に寄って、スパッと切れてる！

フッター部分の設定は全く変更していなかったので、本当に悲しかったです。

【フッター位置　ずれた】【JIN　フッター位置　ずれた】【JIN　フッター】【ワードプレス　右にずれた】などなどの関連キーワードで1時間以上検索するも、解決策が全然見つかりません！

テーマの初期化をする、プラグインをひとつひとつ停止してみる、などの解決方法を見つけましたがどれもイマイチ説得力がなかったですね。

そこで、もう一度「フッターが右にズレた時に自分が何をしていたのか」を考えたところ、「サイドバーの編集」を思い出したのです！

フッターがずれた原因はサイドバーの編集だった！

フッターが右にギュッとズレた原因は、サイドバーの編集時に起きました。

HTMLやCSSの知識がなくてもワードプレスのカスタマイズは可能です。

ただし、その情報が正確なものかどうか、を判断する目を持つ必要はあります。

ネット上にある情報を全て鵜呑みにするのは危険ですので、今すぐやめましょう。

「テーマの更新等をやらなくてよかった！！！」

と本気で思いましたね。

サイドバー＞テキスト＞アフィリエイト広告リンクを追加＞中央寄せにするコードの追加をした際、本当は</div>と追加させなくてはならなかったところ、<div>のスラッシュ（/）が抜けていたのです！！！

そうなのです、【/】スラッシュが抜けていただけで、フッターが右に寄ってしまったのです。。。

この抜けていた【/】スラッシュを追加し、変更を更新したら呆気なくフッターは本来の表示に戻りました！

サイドバーに広告を表示させる方法

ウイジェットのサイドバーを使って広告を表示させる方法をお伝えしますね。

ウィジェット＞カスタムHTML＞サイドバー

「カスタムHTML」を使ってアフィリエイト広告をサイドバーに表示させたところ、中央寄せにするオプションがなかったので、私は「テキスト」を使います。

保存＞完了をクリックし、設定を終わらせ、トップページを確認すると・・・

ムムム？左寄りで表示されていますね。

ちょっとかっこ悪いと思いませんか？

中央寄せにしたいと考え、Google先生に【ウイジェット　画像　中央寄せ】【サイドバー　画像　中央寄せ】などで検索すると、いろいろな情報が出てきました！

ブログの先輩方、ありがとうございます！

サイドバーの画像を中央寄せにする方法

サイドバーの画像を中央寄せにする方法はとてもシンプルです。

アフィリエイト広告リンクの前に、<div class=“center”>を追加し、アフィリエイト広告リンクの後ろに</div>を追加するだけです。

これらのコードを設置すると・・・

上記画像のように、サイドバーの画像が中央に表示されます！！！

ちなみに、

ウィジェット内にあるテキストで貼り付けた広告の画像を確認したい場合は、テキストモードを『ビジュアルモード』に変えてくださいね。

フッターの表示がおかしい時は落ち着こう！

いかがでしたでしょうか？

ワードプレスは、HTMLやCSSなどの知識がなくても自由にカスタマイズすることは可能です。

しかし、今回のようにコードの【/】スラッシュが抜けたいただけで、フッターの位置が右に寄ったりするなど、ワードプレスのデザインが崩れてしまう場合があります。

このような場合は、まずは落ち着きましょう！

すぐに修正したい気持ちも分かります。

でも、ネット上にある情報が必ず正しいとは限りません。

この問題を解決するまでかかった時間は2時間。

しかもフッターが右にズレてしまったのは、【/】スラッシュが抜けていただけ・・・

完全なる人為的ミスです(⌒-⌒; )

サイドバーの画像を中央に寄せるコードを追加する際は、【/】スラッシュの抜けがないようにお気をつけくださいませ！