ブログカスタマイズをやっているとどうしても出てくるのが思わぬ不具合。
ブログカスタマイズのやり方を説明している紹介記事からそのままコードをコピペしたのにサンプルと同じように表示されない…
- CSSが効かない…
- カラム落ちしている…
- スマホで見ると横揺れが発生している…
こんなトラブルはないでしょうか？思い通りならなくて困り果ててしまいますよね。
誰か詳しい方に聞いたり、有料でサポートしてもらったり色々対処方法はあります。ですが、やはり自分で直せるなら直したいですよね。
ここではブログカスタマイズのトラブルを自分で解決できるようになるやり方をご紹介します。あくまで私がよくやっているやり方の例として挙げるので、全ての場合に使える訳ではありませんが、なるべく多くの場合に応用できるやり方を説明したいと思うます。
まずはどこに問題があるか調べる
まずはどこに問題があるのかを調べます。CSSの問題、HTMLの問題、WordPressの問題、キャッシュの問題、プラグインの問題など。原因がどこにあるか探します。
- キャッシュを削除する
- プラグインを停止する
- Chromeの検証機能で問題があるところを調べる
- レンタルサーバーの設定を調べる
- テーマ使用者のTweetを検索する（同じような不具合が起きていないか）
キャッシュを削除する
CSSを追加したのに効いていないというトラブルの場合、まずはブラウザのキャッシュを疑います。ブラウザをスーパーリロードするとキャッシュがクリアされます。
Mac: Command+Shift+R
ブラウザのキャッシュを完全に削除したい場合は以下の記事をご参照下さい。
PCやスマホのブラウザのキャッシュを消す方法
CSSを頻繁に変更する場合は以下の記事を参考にするとキャッシュが読み込まれないように出来ます。
WordPressの子テーマでCSS更新時にクエリを自動付加してキャッシュ対策をする
サーバー側のキャッシュの削除
レンタルサーバー側の高速化機能としてサーバーでキャシュを生成する設定が有効になっていることがあります。一時的な保持なので手動でキャッシュを削除する必要はないと思いますが、サイトの更新内容が反映されないといった場合は、手動でキャッシュを削除することもできます
プラグインの停止
テーマとプラグインの相性が悪かったり、ずっと更新されていないWordPressのバージョンに対応していないプラグインが原因で不具合が起こることがあります。
Chromeの検証機能
Chromeの検証機能を使うと、問題が起きている箇所のコード（HTML/CSS）を調べることができます。
例えば調べたところのクラス名とCSSを確認したいときは
- ①調べたいところで右クリック→検証
- ②Elementsで該当するHTMLでクラス名を確認
- ③Stylesで適用されているCSSがわかる
このように使います。
他にもスマホやタブレットなど端末サイズごとの見え方や、CSSを変更した時の表示プレビュー、JSのエラー、Mixed Contentsの有無など、webデザインの様々な場面で活用できます。
サルワカさんの記事にとても詳しく書いてありますので、是非ご参照ください。
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
レンタルサーバーの設定を見直す
サーバー側の設定でトラブルが起きることもあります。
例えば、ロリポップではWAFという不正アクセスによるサイトの改ざんや情報漏洩を防ぐためのセキュリティ機能が標準で導入されていますが、これが原因でウィジェットが変更できなかったり、カスタマイザーの変更ができないことがあります。
【ロリポップ】WordPressのカスタマイザーで「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」が出たときの対処方法
WAFは安全のために入れられているので、WAFが悪い訳ではないのです。SiteGuard WP Pluginの「WAFチューニングサポート」で誤検知を除外する設定をすれば解決しますので、上記の記事をご参照ください。
テーマ本体に原因がある場合
WordPress.orgの公式テーマであれば致命的な不具合はあまりないと思いますが、テーマ自体の問題で不具合が起こる場合もあります。バグがないテーマってないので、これは仕方ないですね。
作者さんに問い合わせるか、テーマのユーザーフォーラムで質問する、他の同じテーマを使用しているユーザーで同様の不具合で出ていないか調べてみましょう。
作者さんに問い合わせて解決すれば一番良いですが、テーマが原因かどうかはっきりしない事も多いので、まずは同じテーマで同様の不具合がないか調べてから問い合わせた方がスムーズだと思います。
よくあるブログカスタマイズのトラブル例
CSSのエラー
CSSの記述ミスなどでエラーがあると、エラーがある箇所以降の記述が無効になります。スペル間違いなど結構単純なミスがあるので、よく確認します。
- セミコロン（;）が抜けている
- 全角スペースが入っている
- class名、id名が間違っている（スペル間違い）
- カッコ{}のとじ忘れ、または閉じかっこが多い
#sample {
background: red;
width: 300px;
/* カッコとじ忘れ */
#sample {
background: red;
width: 300px;
}}/* カッコ多い */
スマホで見ると広告や画像がハミ出て横スクロールが発生している
スマホ閲覧時にブログが横揺れ（横スクロール）が発生していることがあります。GoogleAdSenseの広告がレスポンシブ広告になっていなかったり、画像や要素が親要素よりはみ出していたりすると、横揺れが発生します。
/* 画像のはみ出し防止 */
img {
max-width: 100%;
height: auto;
}
画像がはみ出している場合は、上記のCSSを追記すれば直ります。画像が内包する親要素の幅に合わせて縮小されます。
AdSenseが問題ある場合はAdSenseヘルプに修正方法が書いてありますので以下のページをご参照ください。
レスポンシブ広告コードを修正する方法
WordPressのサイトが真っ白になった
WordPressユーザーにとって一番恐ろしい不具合ですね。私も何度かやらかしたことがありますが（自分のサイトでのみ）、大体以下の手順で対処できます。
- functions.phpやその他テーマのPHPファイルを編集した後に起きた→編集前の状態に戻す
- プラグインを入れた・更新した後に起きた→プラグインを停止
- 管理画面に入れない場合はプラグインのファイルをFTPソフトで削除
いずれにせよ、「エラーが起きる前の状態に戻す」ということが重要です。日頃からバックアップはしっかりしておきましょう。
バックアップは「UpdraftPlus」がおすすめです。
【保存版】プラグインUpdraftPlusの設定と使い方【WordPressのバックアップ】
またWordPressユーザーはFTPソフトの使い方にも慣れておいた方が良いです。FTPソフトは安全な通信プロトコルであるFTPSやSFTPが簡単に使える「FileZilla」をおすすめします。
【FileZillaの使い方】WordPressでFTPソフトを使おう
wordpress アドレスとサイトアドレスを間違ったURLで設定した
WordPress管理画面＞設定＞一般設定でWordPressアドレスを間違ったURLに書き換えてしまうと管理画面にログインできなくなります。
サイトアドレスを間違えた場合は管理画面に入って直せます。
- FTPでWordPressがインストールされているディレクトリにある「wp-config.php」というファイルをダウンロード
・「wp-config.php」の最後の行に以下のコードを追加して保存し直し、再アップロード
define('WP_HOME','https://example.com');
define('WP_SITEURL','https://example.com'');
WP_HOME は サイトアドレス (URL) を定義します。
WP_SITEURL は WordPress アドレス (URL) を定義します。
https://wpdocs.osdn.jp/wp-config.php_%E3%81%AE%E7%B7%A8%E9%9B%86#WP_HOME
まだまだ色々なトラブルがありますが、ここでは上記のようなよくあるWordPressのトラブルをまとめてみました。
不具合の原因の可能性として考えられるものを一つずつ潰して原因を特定し、エラーが起きる前の状態に戻すことを目指しましょう。
少しでもお役に立てば幸いです。