みなさんこんにちは!おさかなです!
今回は「【WordPress】URLを貼り付けても、サムネイル画像付きリンクにならない場合の対処法!」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・サムネイル画像付きリンクが上手くできない方
・URLがそのまま表示されてしまう方
・WordPress初心者の方
サムネイル画像付きリンクが表示されない?!

ねえナビまる!
前回の記事の通りにやってみたけど…上手くいかないよー💦


ありゃりゃ。
もしこうなってる↓なら、チェックしてみるといい場所があるよ!
テキストタブをチェックしよう!
それではまずWordPressにログインして、上手く表示されないリンクの部分をチェックしていきましょう!(よしっ!)
「ダッシュボード」>「投稿」からリンクが上手く表示されない記事の編集画面へ移動します。
プレビューで確認すると、こんな感じで「リンクのまま」表示されてしまいます😭
一度編集画面に戻って、リンクにカーソルを合わせておきます。これをすることで、次の工程をスムーズに行えるのでオススメです✨
そして右上から「テキスト」タブに切り替ます!
すると…何やら不思議なコードがたくさん出てきました!(んんん?)





コラーっ!!!

原因は?
原因は今回の場合、記事内の装飾だと思われます。
↓例えばこんな感じのボックス
↓おさかなくんの吹き出しなど

えーーーっ?!
これらの装飾には<div>を使っています。(なんと!!)
記事を書いている途中で装飾の<div>を引き継いでしまい、そこにリンクを貼りつけたため、上手く表示されなかったのだと考えられます。(そうだったのか…。)

実際に修正していこう!
もし、<a>タグの周りに<div>などの余計なものを発見できたら、それを削除することができれば、リンクが上手く表示されるはずです!(よっしゃ!)
編集後は<a>タグだけになり、スッキリしました!
<a href="https://osakanav.com/wordpress-easy-image-size-configuration">https://osakanav.com/wordpress-easy-image-size-configuration</a>
プレビューから表示を確認していきましょう!
すると…こうです!無事にサムネイル画像付きリンクが表示されているのが確認できます!(おおお✨)
これで全ての設定は完了です!(やった~~!)
おつかれさまでした…🍵
いかがだったでしょうか?
おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!
それでは今回はこの辺で!
ここまで読んでくださり、ありがとうございました!
おさかなでした!
