【WordPress】画像に青い枠線が入ってしまった場合の対処法 と 5.5へのアップデート ～超初心者のためのカスタマイズ～

WordPress 超初心者が、体験したことや疑問に思ったことを手探りで解決しています。

先日のテーマアップデートか、プラグインが影響しているのかは分かりませんが、過去記事を修正していると、画像の周りに青い点線の枠が付いていることに気づきました。

知恵袋でも質問を見かけましたので、少なからず同じ状況に陥ってしまった方はいらっしゃるようです。私もそのうちの一人ですが。

なので、早速対処方法を探して、解決できた方法をご紹介したいと思います。後半は、WordPress 5.5へのアップデートしたときに体験したお話です。

問題：青い点線（枠線）

この点線が付いているのは、記事の中にあるすべての画像ではありません。

また、一つの記事の中でも、枠線が付いているものもあれば、何もないものもあります。しかも、ずれています。

原因

マウスの右クリックで「検証」してみると、borderに色が設定されていることが分かりました。

しかし、設定をした記憶がありませんし、チェックを外すと消えるのですが、それを保持する方法を知りません。

なので、ネットで検索して「解決方法」を順番に試してみることにしました。

解決方法①　style.css

まず、「子テーマ」の style .css にコードを設置する方法を試しました。

私が使っているのは WING (AFFINGER5) です。

その「子テーマ」の style .css は、WordPressダッシュボードから「外観」＞「カスタマイズ」で見つかります。

「追加CSS」に、以下のコードをコピペしました。

a img {border: 0px;}

知恵袋にあった方法ですが、コードを追加しますので、ご自身の責任のもとでお願いいたします。

結果

いくつかは消えたのですが、何枚かの画像には、まだ青い枠線が残っています。

また、青い枠線が消えたとされる他のコードも試しましたが、うまくいきません。

なので、自力で別の方法を試してみることにしました。

momoka

解決方法②　画像を大きくする

私はコードを作ることはできません。なのでアナログな方法を取ることにしました。

それは、投稿編集の画面上の画像を、一つ一つ大きくすることです。

写真をよく見ると、位置がずれているだけでなく、なんとなく小さくなっている気がしました。

私の場合「601×452」以上の大きさにすると、枠線が消えましたが、中にはもう少し小さくても大丈夫だった画像もあります。

確認して少しずつ大きくしていくことで大半の画像の枠線が消えました。

画像が小さすぎることでも枠線が付くようです。

momoka

解決方法③　画像を貼り付けなおす

それでも、まだ修正できない画像が、ほんの少しですが残りました。

最後の手段は、画像を貼り直すことです。

メディアライブラリからの貼り付け、もしくは一度PCの「ピクチャ」に保存して、再度アップロードしてから貼り付けました。

これで、完全に青い点線は消えました！

momoka

まとめ

青い点線の枠が出たら、以下のことを試してみました。

WordPress 5.5へのアップデート

めでたしめでたし・・・と思っていたら、もう一つの壁にぶつかりました。

８月11日、上のようなアップデートのお知らせが表示されました。テーマに引き続き、WordPressのアップデートです。

WordPressのアップデート（更新）には、大きく分けて次の2種類があります。

• メジャーアップデート
• マイナーアップデート：マイナーアップデートは、2.1.2　 から 2.1.3への更新のことです。

今回は、「5.4」から「5.5」へのメジャーアップデートのようです。早速、翌日、やり方を検索して、アップデートしました。

と同時に、TinyMCE Advanced というプラグインのアップデートも表示されたので、更新しました。

TinyMCE Advanced は、ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) を拡張、強化するものです。

WordPress超初心者講座さんの WordPressをアップデート（更新）する を参考にさせていただき、行いました。

バックアップを取るためのプラグインは「UpdraftPlus - Backup/Restore」をダウンロードして使いました。

無事、初めてのWordPressのアップグレードを成し遂げました（といっても書いてあった通りにやっただけですが）。難しい内容を分かりやすく説明してくれているので、とても分かりやすかったです。

しかし、「投稿の編集」の画面に不具合がでてしまいました。

AFFINGER５の不具合

記事を書こうとして気づきました。会話や枠を簡単に作ることができる（AFFINGER５のおすすめ機能）クイックタグが消えているのです！

前回のWordPressのメジャーアップグレードのときも、AFFINGER５では同じような不具合が出たそうです。なので、前回の不具合を解決した方法を探して試しましたが、どれもダメでした。

キャッシュを削除したり、プラグインを無効化させたりしましたが、クイックタグは復活しません。

もうお手上げ状態で諦めていると、今日、Twitterに「お知らせ」がありました。

WordPress5.5について https://t.co/kLQ3lolL20 #AFFINGER @WPSTINGERより

— ステ子@STINGER公式 (@WPSTINGER) August 13, 2020

解決方法

解決方法は、ダウングレードをすることです。

ダウングレードに使ったプラグインは「WP Downgrade | Specific Core Version」です。

私が使っているテーマ「AFFINGER５」では未検証となっていたのですが、公式サイトでもダウングレードさせるときのプラグインとして紹介されていたので、ダウンロードして有効化させました。

アップグレードしたときと同じように、プラグインを全て無効化させたうえで、WordPressを「5.4.2」にダウングレードさせました。

momoka

あっけないほど簡単にダウングレードされ、クイックタグも復活しました！

クイックタグは復活、しかし・・・

ダウングレードさせた後、再度プラグインを一つ一つ有効化させていると、TinyMCE Advanced という拡張機能のプラグインだけにエラーメッセージがでました。WordPress5.5に合わせて更新させたため、ダウングレード版には合わなくなったようです。なので、 無効化(停止) させました。

追記

その後、プラグインの SiteGuard WP も更新のお知らせがきました。SiteGuard WP は、WordPressにインストールするだけで、セキュリティを向上させることができるものです。まずは、詳細を表示させてみました。すると、

つまり、SiteGuard WP は、最新バージョンにも対応しているけど、「WordPress 3.9」以上であればOKということのようです。

ということで、更新しました。(私の場合）不具合はでませんでした。ちなみに、エラー表示がでた TinyMCE Advanced の詳細を見てみました。

TinyMCE Advanced の場合は、WordPressをダウングレードしたので、バージョンに合わなかったようです。

プラグインを更新するときは、WordPressのバージョンに対応しているかどうかも確認する。

さいごに

はてなブログからWordPressに移行して、セキュリティだけでなく、アップグレードなど、自分でやらなければならないことが増えました。でも、ネットにいろいろ情報があるので、手間ではありますが、知識が乏しい私でもなんとか対処できている感じです。

今回学んだこと

アップグレードは急がない！不具合が出る場合もあるので、公式サイトなどで情報を収集して、2週間～1か月後に行う方がいいようです。

最後までご覧いただきありがとうございます。

こちらもあわせてどうぞ。