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

Technology
スポンサーリンク

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

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

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

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

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

おさかな
おさかな

ねえナビまる!

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

【WordPress】「サムネイル画像付きリンク」の作成方法をわかりやすく解説!【ブログ】
みなさんこんにちは!おさかなです!今回は「「サムネイル画像付きリンク」の作成方法」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・「サムネイル画像付きのリンク」の作り方がわからない方・でき...
ナビまる
ナビまる

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

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

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

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

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

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

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

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

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

コラーっ!!!

タグの意味は割愛しますが、リンク表示には不必要なものが付いていると考えてもらえばOKです!
HTMLプログラムについて勉強したい方はコチラもチェック↓
覚えなくていい?!常識を覆す「プログラミング」の勉強方法とは?
みなさんこんにちは!おさかなです! 今回は「覚えなくていい?!常識を覆す「プログラミング」の勉強方法」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・プログラミングの勉強をはじめようと思ってい...

原因は?

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

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

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

おさかな
おさかな

えーーーっ?!

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

【HTML】だけで!郵便番号から「住所」を自動入力する方法!【web】
みなさんこんにちは!おさかなです! 今回は「【HTML】だけで!郵便番号から「住所」を自動入力する方法!」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・HTMLを勉強中の人 ・お問い合わせ...

実際に修正していこう!

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

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

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

<a href="https://osakanav.com/wordpress-easy-image-size-configuration">https://osakanav.com/wordpress-easy-image-size-configuration</a>

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

 

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

 

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

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

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

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

おさかなでした!

【WordPress】ブログで「累乗」を表示する方法をわかりやすく解説!【HTML/CSS】
みなさんこんにちは!おさかなです! 今回は「「累乗」を表示する方法」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・WordPressで「累乗」を表示したい人 ・テキストタブの見方を知りたい...

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

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