読者の悩み
- 「あわせて読みたい」のリンクを追加したい
- CSSコピペですぐに終わるものがいい!
- 初心者でも簡単にあわせて読みたいリンクを設置する方法を教えてください!
こんな悩みに答える記事になっています。
ブログでよくみかける「あわせて読みたい」のリンク、設置してみたいなと思う人はいませんか?
実は、コピペだけで簡単につくれてしまいます。
この記事では、「あわせて読みたい」のリンクの作り方を2種類、紹介します。
作成できるリンクの種類
- 同じタブで遷移する「あわせて読みたい」のリンク
- 別のタブで遷移する「あわせて読みたい」のリンク
「あわせて読みたい」のリンクがあれば、今までのただのリンクよりも遷移率が上昇します!
この記事の目次
「あわせて読みたい」リンクの完成品
2種類あるのですが、まずは1つ目の、同じタブのまま飛ぶリンクです。
クリックするとブログのTOPへ戻ることができます。
どこへ遷移するのか、タイトルは何かというのも、もちろん変更可能です。
タイトルが試験的なものなので変に見えますが、記事のタイトルならびしっと決まること間違いなし(笑)
続いて2つ目の、別タブで飛ぶリンクです。
クリックして違いを確かめてみると分かりやすいです。
なぜ同じタブで遷移するものと別のタブで遷移するものを分けたかというと、ユーザにとって便利だからです。
記事の途中に「こんな記事も参考になりますよ」というのは別のタブに飛ばしてあげたほうがもともと読んでいた記事に戻ってきやすいです。
また、記事の最後なら「帰る前にこれもどう??」という感覚で同じタブで飛ばしてあげると、(もともと読んでいた記事に戻る必要はないので)ユーザにとって楽です。
同じタブへ飛ぶ「あわせて読みたい」の作り方とCSS
では、同じタブで遷移するリンクの作り方です。
まず、HTMLはこのようになっています。
<p class="emphasize-link"><a href="リンク先URL">リンク先タイトル</a></p>
次に、CSS
.emphasize-link { position: relative; margin: 15px 0 16px; padding: 16px 10px; border: 2px solid #ee7917; background-color: #fffbf5; } .emphasize-link p:last-child { margin-bottom: 0; } .emphasize-link::before { font-family: "Font Awesome 5 Free"; position: absolute; bottom: 100%; left: -2px; padding: 2px 6px; content: "\f15c あわせて読みたい"; background-color: #fb8c00; color: #fff; font-weight: bold; border-radius: 6px 6px 0px 0px; }
これで、完成します。
HTMLを辞書登録でもしておいて、簡単に呼び出せるようにしておき、WordPressのテキストモードで書き込み(ビジュアルモードの方では無理です)。
その後URLとタイトルを各自で変更すればいつでも簡単に使えます。
別のタブへ飛ぶ「あわせて読みたい」の作り方とCSS
HTMLはこのようになっています。
長いのでコピペするときはスライドして見てください。
<p class="emphasize-link-tab"><a href="リンク先URL" target="_blank" rel="noopener">リンク先タイトル</a></p>
続いてCSS
.emphasize-link-tab { position: relative; margin: 15px 0 16px; padding: 16px 10px; border: 2px solid #ee7917; background-color: #fffbf5; } .emphasize-link-tab p:last-child { margin-bottom: 0; } .emphasize-link-tab::before { font-family: "Font Awesome 5 Free"; position: absolute; bottom: 100%; left: -2px; padding: 2px 6px; content: "\f15c あわせて読みたい"; background-color: #ee7917; color: #fff; font-weight: bold; border-radius: 6px 6px 0px 0px; } .emphasize-link-tab a::after { font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; color: #0044cc; /*リンクの色と同じにする*/ }
リンクの最後に「別のタブへ飛びますよ」というアイコンもつけています。
ここのアイコンの色は、各自リンクに指定している色と同じになるように変えてくださいね~。
あわせて読みたいのリンクの下線を引かないためのCSS
ここは各自のお好みで。
あわせて読みたいのリンクには下線を引かないようにし、マウスがホバーしたときに下線が現れるようにしたい場合は追記してください。
同じタブで遷移する方のCSS
.emphasize-link a { text-decoration: none; } .emphasize-link a:hover { text-decoration: underline; }
上記のコードを追記するだけでOKです。
続いて別タブに飛ばす方のCSS
.emphasize-link-tab a { text-decoration: none; } .emphasize-link-tab a:hover { text-decoration: underline; }
これも追記すればできます!
あわせて読みたいの中にいくつもリンクを入れる
こういった使い方もできます。
これのコードは、↓こんな感じになっています。
<p class="emphasize-link"> <a href="https://maipyon.net/">リンクひとつめ</a> <a href="https://maipyon.net/">リンクふたつめ</a> </p>
中身のaタグを増やすことによって、いくらでもリンクをふやすことができます。
同様に、別タブに飛ばすHTMLコードも、aタグを中に増やすことでいくらでもリンクを増やすことができます。
あわせて読みたいリンクの作成方法まとめ
あわせて読みたいのリンクを2種類紹介しました。
内側にあるリンクの色ですが、今回は特に指定をしていないので皆さんがaタグ(リンクの色)に指定している色と同じになります!
単純なリンクよりも、デザインされたリンクの方が目につくこと間違いなしですし、回遊率もあがります。ぜひやってみましょう!

