【WordPress】URLを貼り付けても、サムネイル画像付きリンクにならない場合の対処法!

WordPress

みなさんこんにちは!おさかなです!

今回は「【WordPress】URLを貼り付けても、サムネイル画像付きリンクにならない場合の対処法!」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・サムネイル画像付きリンクが上手くできない方
・URLがそのまま表示されてしまう方
・WordPress初心者の方

サムネイル画像付きリンクが表示されない?!

おさかな
おさかな

ねえナビまる!

前回の記事の通りにやってみたけど…上手くいかないよー💦

【WordPress】「サムネイル画像付きリンク」の作成方法をわかりやすく解説!【ブログ】
【WordPress】初心者に向けて、「サムネイル画像付きリンク」の作成方法を解説!この記事だけで、かんたんに設定できちゃいます!プラグイン不要!リンクの設定で、ブログの見栄えを良くしてみましょう!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!
ナビまる
ナビまる

ありゃりゃ。
もしこうなってる↓なら、チェックしてみるといい場所があるよ!

テキストタブをチェックしよう!

それではまずWordPressにログインして、上手く表示されないリンクの部分をチェックしていきましょう!(よしっ!)

「ダッシュボード」>「投稿」からリンクが上手く表示されない記事の編集画面へ移動します。

プレビューで確認すると、こんな感じで「リンクのまま」表示されてしまいます😭

一度編集画面に戻って、リンクにカーソルを合わせておきます。これをすることで、次の工程をスムーズに行えるのでオススメです✨

そして右上から「テキスト」タブに切り替ます!

すると…何やら不思議なコードがたくさん出てきました!(んんん?)

このページはHTMLの知識が必要ですが、今回は知識がなくてもチェックできるように解説していくのでご安心ください☆
テキストタブの中身を良く見てみると、カーソルの近く
<a href=””></a>
こんな感じのものを見つけられると思います!これはリンクを表示するための<a>タグと呼ばれるもので、HTMLコードの一種です。
↓青で選択したところが<a>タグの中身です!(発見できたかな~?)
この<a>タグの周りに何か変なものがくっついていたりしませんか?
今回の場合よーく見てみると、前にも後ろにも<div></div>という変なものがくっついています。(ありゃりゃ💦)
<div>以外にも<a>タグの前後に何かしらくっついていたら、こいつらが犯人です!笑
おさかな
おさかな

コラーっ!!!

タグの意味は割愛しますが、リンク表示には不必要なものが付いていると考えてもらえばOKです!
HTMLプログラムについて勉強したい方はコチラもチェック↓
覚えなくていい?!常識を覆す「プログラミング」の勉強方法とは?
プログラミングの勉強をはじめたけど、思ったように進まないというお悩みをお持ちの方へ。プログラミングがスムーズに学べる「勉強方法」をご紹介!ちょっとのコツでプログラミングが楽しくなっちゃう!?必見です!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

原因は?

原因は今回の場合、記事内の装飾だと思われます。

↓例えばこんな感じのボックス

↓おさかなくんの吹き出しなど

おさかな
おさかな

えーーーっ?!

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

【HTML】だけで!郵便番号から「住所」を自動入力する方法!【web】
【HTML】を勉強中の方に向けて、郵便番号から「住所」を自動入力する方法をわかりやすく解説!お問い合わせフォーム作りを行うときなどに使えます!ぜひ、web制作に役立ててみてください!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

実際に修正していこう!

もし、<a>タグの周りに<div>などの余計なものを発見できたら、それを削除することができれば、リンクが上手く表示されるはずです!(よっしゃ!)

コードを扱っているため、編集は充分に注意して行ってください。
それでは、テキストタブに直接手を加えていきます!
↓削除する部分はこの部分だけなので、慎重に作業しましょう。
<div>、</div>

編集後は<a>タグだけになり、スッキリしました!

プレビューから表示を確認していきましょう!
すると…こうです!無事にサムネイル画像付きリンクが表示されているのが確認できます!(おおお✨)

 

これで全ての設定は完了です!(やった~~!)
おつかれさまでした…🍵

 

いかがだったでしょうか?

おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【WordPress】ブログで「累乗」を表示する方法をわかりやすく解説!【HTML/CSS】
【WordPress】で「累乗」を表示する方法をわかりやすく解説!【HTML/CSS】を学習中の人にも!ブログ初心者でも安心!この記事だけでまるっと解決できちゃいます!コピペで完了するので難しい知識0「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

この記事は役に立ちましたか?

タイトルとURLをコピーしました