アイキャッチ付きの内部リンクの貼り方を解説 | 生活の『楽しい』『便利』『疑問』を発信するブログ。

生活の『楽しい』『便利』『疑問』を発信するブログ、ライフスタイル etc.(エトセトラ)へようこそ！

こんにちは！

ブログを運営していると、他の人のブログはどうなってるのかな？と見にいくことがありますよね？

そして、下みたいなアイキャッチ付きの内部リンクが置いてあったりして、自分もこういうの置きたいけど、どうやってるのかなと思ったりしませんか？

特にブログ初心者だとサッパリだったりしますよね。

このアイキャッチ付きの内部リンクを貼るには、プラグインを入れるとかCSS編集が必要なのかな？と思っていたのですが、特にそういう必要がありませんでした。

ワードプレスを使っている方向けに、その方法を解説していきます。

ちなみに↓は実際にアイキャッチ(画像)と文字にリンクを貼っています。

A8のAmazonアフィやAmazonアソシエイトに何度も落ちているなら、アマゾンアフィの提携ハードルが低い【もしもアフィリエイト】がオススメです！

提携後のリンクの使い方や会員登録方法について説明しています。

【アイキャッチ　リンク】で調べると、URLを置くだけでアイキャッチ付きリンクになるのは、ワードプレスの基本機能という記事があったんですが、今までも普通にリンクを置いてきましたが、全て文字リンクにしかなってない記憶しかありません。

いろいろ試してみて、画像と文字どちらにもリンクを付ける方法も分かったので、同じように『リンクを貼ってもアイキャッチなんか出た覚えないよ？』『アイキャッチ付きのリンクを置きたい』という人向けで、自分含めて初心者向けに書いたので、参考までに見ていってください。

画像だけにリンクを貼る手順

まずは一番簡単な画像だけにリンクを貼る方法です。

投稿編集画面の【メディアを追加】から、お好きな画像を選んで貼ってください。

そして画像をクリックし【リンクの挿入/編集】で、貼りたいリンクを選んでペーストで画像にリンクが貼られています。

もし画像に記事タイトルや説明文がなければ、この記事はどんな内容なのかの説明をしておきましょう。

しばらく画像と文字を、一緒にリンクさせる方法が分からなかったんですが、いろいろやってたら、なんとなくできたのでやり方を説明します。

１.まずは普通に【リンクの挿入/編集】でリンクを置きます。もしくは、テキストにリンクをつけます。

２.そしてその下に好きな画像を置いてください。

３.テキストモードにして、リンクと画像にある隙間を消します。(下画像赤枠部分)この部分を消さないと、文字と画像がリンクしてくれません。

ビジュアルモードのまま消すと画像が文字の横に来てしまうので、文字下に画像を置きたいならテキストモードで消してください。

４.テキストモードのまま、文字リンクの最後尾にある </a> ←この文字列を画像テキストの最後尾にドラッグ(移動)してやると、画像にもリンクが付いてくれます。

そして下のものが文字と画像どちらにもリンクを貼ったものです。

文字と画像どちらにもリンクが付いていれば、文字・画像だけにカーソルを合わせるだけで、文字と画像どちらも【フワッ】と光ってくれます。

グーグルアドセンス画面に【ads.txtファイルが〜】なんて警告が出ていませんか？

放置していると広告が配信停止になる可能性があるらしいので、自分がやった対処法を書いてみました。

JINの投稿編集の下部には、便利なボックスデザインがあります。

ヒトデさんという方のブログを見ていたら、そのボックスごとリンクになっているところがあったので、そのボックスごとリンクにする方法も書いていきます。

【あわせて読みたい】を使って説明します。

ボックスデザインを使った場合は非常に簡単です。

ボックスデザインを置く→記事タイトルなどを書く→画像を置く→(コメントがあれば書いておく)→ボックスの文字列ごと全体を範囲指定→リンクを挿入で完了！

そして↓はボックス全体がリンクになっています。