【WordPress】サイドバーがメインコンテンツの下にズレた時の対処法|バックアップから復元する方法解説【ブログサイトエラー】

こちらの記事では、サイドバーがメインコンテンツの上や下、斜めにズレた時の対処方法を解説しています。

ブログサイトで「テーマファイルエディター」内にある「header.php」や「footer.php」などを弄って、レイアウトが崩れてしまった場合の直し方をまとめているので参考にしてください。

WordPressの復元では、データベースを復元したり「ブログを始めたばかりでバックアップを取っていない」初心者の方が多いかと思います。

今回はエックスサーバーの機能を使って、誰でもできる簡単な復元方法紹介します。

サイドバーがコンテンツ下にずれる原因

1、テーマファイルが原因のズレ

まず始めに、WordPressのサイドバーがコンテンツの下や斜めにズレる原因の多くは、テーマファイルによるものが多いです。

特に「外観→テーマファイルエディター→(style.css・header.php・footer.php)」などで、「padding」や「margin」などの余白を編集したり、書き換えたりした時にエラーが発生することがあります。

▼テーマファイルのphpを確認する

全ページでサイドバーのレイアウトがずれている場合は、上記だけでなくテーマファイルエディターの「Single.php」「Siguler.php」「Pages.php」など、記事単体ページを出力している場所を確認してみましょう。

 

2、CSSが原因によるサイドバーのズレ

テーマファイルエディター以外の原因としては、CSSによるメインコンテンツとサイドバーの高さや横幅の設定が正しく行われていない可能性があります。

CSSでエラーが起きる原因の例として、上記のコンテンツとサイドバーの要素が合計100%以下のサイズになっていない場合だと、サイドバーがコンテンツの下に回り込んで表示されてしまう原因となります。

 

3、HTMLやdiv要素が原因のエラー

次に、記事ごとでサイドバーのレイアウト崩れが起きているエラーの原因は、div要素やhtml要素によるものが多いです。

「div」や「html」が余分に多かったり、少なかったりすることで要素が閉じられずに、サイドバーのズレが発生します。

▼エラーが発生しているページを特定する

サイドバーがコンテンツの下やズレる減少は、ブログサイト全体でなく特定の記事のみで発生している可能性があります。

そのため、TOPページやカテゴリ、投稿記事などの編集画面で「div」や「html」の閉じ忘れがないか探して、エラーを引き起こしている部分を修正する必要があります。

 

WordPressの復元が必要な場合

復元する作業が必要なシーン

  • カスタマイズに失敗して画面が真っ白になった
  • アップデートして正しく動作がしなくなった
  • 外部からハッキングされた場合

WordPressの復元が必要なパターンは主に上記の3つです。

画面が真っ白になった場合は、下記のバックアップより簡単に復元できるので「画面が真っ白になった時の対処方法」ご覧下さい。

 

復元に必要なファイル

  • データベース:記事内容やユーザ情報を保存するファイル
  • ソースコード:WordPressを動かすファイル

WordPressは、主に上記のデータベースとソースコードで構成されており、ブログを復元するためには、この2つを元に戻す必要があります。

アップデートに失敗した場合は、ファイルの復元だけで元に戻ることが多いですが、サイトが改ざんされた場合はデータベースの復元も必要となります。

▼エラーはなるべく早く直す

ブログサイトを弄って、画面表示がおかしくなった際は、早く修復作業を行わないと記事の更新が出来ないだけでなく、ユーザー離れを起こしてしまうので注意しましょう。

それでは、下記でサイドバーのトラブルが発生した際の復元方法を具体的に説明していきます。

 

WordPressのエラー復元

エラー発生時の復元方法一覧

  1. レンタルサーバーの機能で復元する
  2. プラグインのバックアップ機能で復元する

WordPressの復元は「レンタルサーバーの機能で復元する方法」と「プラグインのバックアップ機能で復元する方法」の2つのパターンがあります。

それぞれ、メリットやデメリットがあり、ブログサイトの環境によって使える方法・使えない方法があります。

 

1、レンタルサーバーの機能で復元する

レンタルサーバー会社が提供している復元機能は、ボタン操作だけでバックアップから復元できることが多く、初心者でも利用しやすい点最大のメリットです。

ですが、レンタルサーバー会社によっては「復元機能を提供していない」「日時指定でバックアップ復元ができない」などがあるので注意が必要です。

当サイトで使用している「エックスサーバー(Xserver)」であれば、契約後は何も依頼せずとも自動的にバックアップを取っており、1日単位で好きな日時で復元可能です。

▼レンタルサーバーの機能がおすすめな人

  • 初心者でも簡単に元に戻したい方
  • WordPressのバックアップをしていない方

 

2、プラグインのバックアップ機能で復元する

2つ目は、WordPressのプラグインを利用した復元方法で、エラー発生前に設定したバックアップの保存データを復元する流れになります。

プラグインのバックアップ機能は、WordPressに特化しており精度の高い復元が可能です。

使い方としては、ブログサイトの内部を編集する前にバックアップを取っておき、万が一のことがあれば以前のデータを復元すること可能です。

注意点としては、事前にプラグインを導入して設定を行っておかないと、いざというときに利用できない点がデメリットです。

▼プラグインの機能がおすすめな人

  • WordPressのバックアップがあり、細かい日時で復元したい方
  • 復元するデータやファイルをカスタマイズしたい方

 

WordPress本体のバックアップ復元方法

本体バックアップの復元手順一覧

  1. レンタルサーバーにログイン
  2. バックアップをクリックする
  3. バックアップの復元内容を選択
  4. バックアップ内容を確認して復元する

それでは、多くの方がレンタルサーバーを使用しているかと思うので、初心者でも簡単にできる復元方法を実際の作業手順で解説していきます。

ほとんどの場合「バックアップ」や「MySQL復元」でWordPressがエラー発生前に戻ります。

まず初めに、ファイルをバックアップで元の状態に戻し、ファイルの復元でエラーが直らなければデータベースを復元する流れで進めていきます。

 

1、レンタルサーバーにログインする

まずはWordPressの契約しているレンタルサーバーにログインしましょう。

今回は当サイトで使用している「エックスサーバー(Xserver)」で復元する手順を解説していきます。

まずはエックスサーバーの「サーバーパネルログインフォーム」から、サーバーパネルにログインしましょう。

 

2、バックアップをクリックする

アカウントのカテゴリ内にある「バックアップ」をクリックします。

 

3、バックアップの復元内容を選択する

バックアップする日時や対象のデータを選択します。

 

4、バックアップ内容を確認して復元する

復元内容に間違いがないことを確認して「復元を開始(確定)」をクリックしましょう。

画像や動画ファイルの多いサイトだと、復元に時間が掛かりますが気長に待ちましょう。

 

WordPressのMySQL復元方法

MySQLで復元する手順一覧

  1. MySQL復元をクリックする
  2. 復元日時を選択する
  3. バックアップ内容を確認して復元する

上記の「WordPress本体のバックアップ復元方法」を行っても改善しない場合や、記事を元の状態に戻したい場合は、データベースの復元を行いましょう

 

1、MySQL復元をクリックする

「WordPress本体のバックアップ復元方法」と同様にサーバーパネルにログインし、データベースのカテゴリ内にある「MySQL復元」をクリックしましょう。

 

2、復元日時を選択する

復元したいデータベースと、復元したい日付を選択して「復元」をクリックしましょう。

 

3、バックアップ内容を確認して復元する

バックアップ復元する確認画面が表示されますので、復元するデータベースと日にちに間違いがないことを確認して、「復元する」をクリックします。

 

データベースがどれか分からない場合

MySQLデータベース名の確認方法

データベースを復元したいけど、サイトが複数あってどのデータベースか分からない場合は、WordPressカテゴリー内の「WordPress簡単インストール」機能から確認しましょう。

ドメイン選択後に以下のような画面が表示されますので、復元したいサイトを見つけて「MySQLデータベース名」を確認します。

 

サイドバーのエラー対処方法まとめ

今回の記事では、メインコンテンツからサイドバーがズレた時の、WordPressの復元方法2つと実際の復元手順を図解付きで紹介しました。

WordPressの復元方法は次の2パターンです。

  1. レンタルサーバーの機能を利用する方法
  2. レンタルサーバーの機能を利用する方法

「画面が真っ白になってアクセスできない」「変なエラー文が消えない」という場合など、バックアップから復元することで元に戻せる場合があります。

WordPressに不具合が出た場合など、本記事を参考に復元作業を行ってみて下さい。

 

関連記事

新着記事一覧


2023年6月7日
NEW! 【株式会社マイム広告依頼】連絡が来た時の掲載内容や単価|会社は怪しい?特徴・口コミ・評判【要注意】

2023年6月2日
【グッドライフ広告依頼】連絡が来た時のCPM単価・掲載する種類内容|会社は怪しい?特徴・口コミ・評判【GOOD LIFE】

2023年6月2日
【企業サイト】広告掲載依頼の料金比較一覧|目安や相場はいくら?|PV数とジャンル毎の費用まとめ

2023年6月2日
【個人ブログ】広告掲載の仕事依頼が来た時の対応・確認すること|メールの返信内容・聞くこと・注意点

2023年6月2日
【個人ブログ】広告掲載依頼の20サイト比較料金一覧・目安や相場はいくら?|連絡が来た時のPV数や配置場所による金額設定

2023年6月2日
【Zo Digital Japan広告依頼】連絡が来た時の掲載内容や単価|会社は怪しい?特徴・口コミ・評判【ゾ・デジタルジャパン】

2023年6月2日
【WordPress】スマホ画面で謎の余白ができて横にズレる(ガクガク・グラグラする)原因と対処方法【ブログサイトのエラー対策】

2023年6月1日
【TwitterToolsPro評価】ツイッター自動化ツール導入!使用感想レビュー【SNS検証・口コミ・副業】

2023年6月1日
【TwitterToolsPro】ツイッター自動化ツール「10,000円割引券」配布中!【SNS検証・口コミ・副業】

2023年6月1日
【Wordpress】画面表示がおかしくなった時のエラー原因やバックアップ復元方法【ブログサイト】

2023年5月31日
【WordPress】「404 File Not Found」エラー表示で編集画面にログインできない対処方法|アクセスしようとしたページは見つかりませんでした【HTTPステータスコードの意味】

2023年5月31日
【Googleインターネット】HTTPステータスコード一覧と意味|サーバーエラー発生時の詳細【WordPress】

2023年5月24日
【WordPress】preタグ内で文章を改行するCSS|Br要素が反映されない時やテキストが詰まる改善策【THE THOR】

2023年5月24日
【Twitter】自分のツイートが表示されない原因「シャドウバン」の確認や解除方法|垢BANされない対策方法

2023年5月22日
【WordPress】使っていない不要なCSSやJSを特定して削除・無効・除外する方法

2023年5月22日
【WordPress】おすすめのアフィリエイトASP10選|単価の高い稼げる広告案件の選び方【ブログ収益化】

2023年5月21日
【WordPress】自動変換で「▶」の絵文字になるを無効化するfunctions.php|三角マークが勝手に化ける対策【ワードプレス】

2023年5月19日
【Googleアドセンス】スマホのアンカー広告をページ上部や下部のみ表示・無効化する方法|オーバーレイ固定化【WordPress収益】

2023年5月19日
【WordPress】作業効率化おすすめショートカットキーまとめ|サイト制作で絶対覚えておきたいコマンド一覧【Windows・MacOS】

2023年5月18日
【Googleアドセンス】広告がスマホやPC画面に表示されない時の原因やエラー対処方法【WordPress収益化】

2023年5月18日
【WordPress】記事上に謎の余白(隙間)ができた時の原因と対処方法|空白で表示される場所や文字を消す方法【ブログ初心者向け】

2023年5月16日
【Googleアドセンス】エラー解決方法「お客様からのリクエストを処理することができません」【ご迷惑・問題解決】

2023年5月13日
【Googleアドセンス】広告を2列横並びで配置するダブルレクタングルのCSSとHTML【WordPress】

2023年5月13日
【WordPress】Amazonアソシエイトリンクの作り方とブログへの貼り方・カスタマイズまとめ【アマゾンアフィリエイト広告収益化】

2023年5月13日
【WordPress】コメント欄に絵文字を使えるようにする方法|文字化けで表示されないときの対策

2023年5月13日
【WordPress】指定サイドバーウィジェットのタイトルを非表示にする方法|プラグイン不要コード【サイト制作】

2023年5月13日
【THE THOR (ザ・トール)】アイキャッチ画像を非表示にする簡単な方法|サムネイルを消す設定場所【WordPressテーマ】

2023年5月13日
WordPressの余白「margin」上下左右の場所確認・空白を消すCSS|コンテンツ幅と高さ調整方法【ワードプレス】

2023年5月13日
WordPressの余白「border」上下左右の場所確認・空白を消すCSS|コンテンツ幅と高さ調整方法【ワードプレス】

2023年5月13日
WordPressの余白「padding」上下左右の場所確認・空白を消すCSS|コンテンツ幅と高さ調整方法【ワードプレス】

人気ジャンルの記事一覧

ブックマークお願いします♪