「あわせて読みたい」をCSSコピペで簡単設置！PV増の方法を解説！

2023年6月16日

さまざまなブログ記事を読んでいると、記事の最後に「あわせて読みたい」と書かれたボックスを見かけることがあります。

これは「関連する記事だから、この記事も読んでくださいね」という呼びかけです。あなたもついクリックしてしまったことがあるのではないでしょうか。

そこで今回は「あわせて読みたい」ボックスの設置方法を紹介します。この記事を参考にして、ぜひあなたのブログにも「あわせて読みたい」ボックスを設置してみてください。きっとユーザーの滞在時間も増え、ページビューが増えていくはずです。

「あわせて読みたい」をcssで作成する！

まずは「あわせて読みたい」ボックスをcssで作成する方法から解説しましょう。「同一のタブ内で別記事へリンクさせるケース」と、「別のタブで別記事へリンクさせるケース」の2つを紹介します。

なお、リンク部分にアンダーラインを引きたくないという人や、複数のテキストリンクを表示させたいという人もいるはずです。それらの場合についても解説します。

「あわせて読みたい」で同じタブ内で別記事とリンクさせる方法！

まずは、クリックした時に、別記事が同一のタブ内で表示されるというパターンです。

必要なHTMLと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: FontAwesome;
position: absolute; bottom: 100%;
left: -2px;
padding: 2px 6px;
content: \f24a この記事もチェック！;
background-color: #ee7917;
color: #fff;
font-weight: bold;
border-radius: 6px 6px 0px 0px;
}

「あわせて読みたい」で別のタブで別記事とリンクさせる方法！

もう1つは、クリックした際、別記事がブラウザの別タブで表示されるというパターンです。新たなタブで表示されるため、「元記事が途中までしか読まれない」という事態を防ぐことができます。

HTMLと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: FontAwesome;
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: \f24a この記事もチェック！;
background-color: #ee7917;
color: #fff;
font-weight: bold;
border-radius: 6px 6px 0px 0px;
}

.emphasize-link-tab a::after {
font-family: FontAwesome;
content: \f08e;
color: #0044cc; /*色はリンクと同じに*/
}

.emphasize-link-tab a:hover:after {
color: #b22222; /*色はリンクをマウスオーバーした時と同じに*/
}

リンク部分にアンダーラインを引かない場合

以上が、同じタブ内でリンクをさせる方法と、別タブでリンクをさせる方法になります。

この方法でも問題はありませんが、中には「リンク箇所に下線を引きたくない」という場合もあるでしょう。その場合は、以下のCSSを追記して下さい。

(1) 同じタブ内でリンクさせる場合
.emphasize-link a {
text-decoration: none;
}

.emphasize-link a:hover {
text-decoration: underline;
}

(2) 別タブでリンクさせる場合
.emphasize-link-tab a {
text-decoration: none;
}

.emphasize-link-tab a:hover {
text-decoration: underline;
}

複数のリンクを設定したい場合

つづいては、複数のリンクを設置したい場合です。HTMLは以下のようになります。

<p class=”emphasize-link”>
<a href=”https://maipyon.net/”>1つ目の記事へのリンク</a>
<a href=”https://maipyon.net/”>2つ目の記事へのリンク</a>
<a href=”https://maipyon.net/”>3つ目の記事へのリンク</a> </p>

これは3つのリンクを設置するHTMLになっていますが、もしさらに追加したい場合は、

<a href=”https://maipyon.net/”>X個目の記事へのリンク</a>

を追記してください。

「あわせて読みたい」をショートコードで自作する！

今度は「あわせて読みたい」をショートコードで自作する方法を解説します。

ショートコードはwordpressに用意されたもので、「短い文（プログラム関数）で、簡単に機能を呼び出す」ことができます。順番に説明していきましょう。

今回紹介する5つの機能

ショートコードで作成する場合、かなりの自由度でデザインすることができます。今回紹介するのは、次の5つの機能です。

記事のIDからデータを取得できるように設定
複数の記事がデータ取得できるよう、記事IDをカンマで区切って設定
「この記事もチェック」のラベルも変更可能に
取得データを「記事パーマリンク、アイキャッチ、タイトル、日付」で設定
エラーが起きた時ハンドリング処理

今回紹介するプログラムのコード（php、HTML、CSS）

今回のプログラムは以下のとおりです。php、HTML、CSS、ショートコードという順です。

[php]
//この記事もチェックショートコード
function related_func ( $atts ) {
extract( shortcode_atts( array(
‘id’ => ”,
‘label’ => ‘この記事もチェック’,
), $atts ) );

$ids = mb_split(“,”,$id);
$outputTag = ”;

if($id):
$outputTag .= ‘
<div class=”awasete”>
<h5 class=”awasete__title”>
<span><i class=”fas fa-link”></i>’ . $label . ‘</span>
</h5>
<ul class=”awasete__list”>’;

foreach($ids as $value):
if(ctype_digit($value)):
$link = get_permalink($value);
$title = get_the_title($value);
$date = get_the_time(‘Y.m.d’,$value);
if(get_post_thumbnail_id($value)){
$thmbnail_url = wp_get_attachment_url(get_post_thumbnail_id( $value ));
}else{
$thmbnail_url = ‘/wp-content/themes/wdd2/images/common/no-image.jpg’;
}
$outputTag .=’
<li class=”awasete__list__item”>
<a class=”awasete__list__item__link flex flex–bet” href=”‘. $link . ‘” target=”_blank”>
<figure class=”awasete__list__item__link__image”>
<img src=”‘ . $thmbnail_url . ‘”>
</figure>
<div class=”awasete__list__item__link__content”>
<h6 class=”awasete__list__item__link__content__title”>’ . $title . ‘</h6>
<time class=”awasete__list__item__link__content__date”>’ . $date . ‘<time>
</div>
</a>
</li>
‘; else:
$outputTag .='<li class=”awasete__list__item”>記事のID指定が正しくありません</li>’;
endif;
endforeach;
$outputTag .= ‘</ul></div>’;
return $outputTag;
else:
return ‘
<div class=”awasete”>
<h5 class=”awasete__title”>
<span><i class=”fas fa-link”></i>’ . $label . ‘</span>
</h5>
<ul class=”awasete__list”>記事のIDがありません</ul>
</div>’;
endif;
}
add_shortcode(‘related’, ‘related_func’);

[HTML]
<div class=”awasete”>
<h5 class=”awasete__title”>
<span>入力したラベル</span>
</h5>
<ul class=”awasete__list”>
<li class=”awasete__list__item”>
<a class=”awasete__list__item__link flex flex–bet” href=”記事のパーマリンク” target=”_blank”>
<figure class=”awasete__list__item__link__image”>
<img src=”アイキャッチの画像のパス”>
</figure>
<div class=”awasete__list__item__link__content”>
<h6 class=”awasete__list__item__link__content__title”>記事タイトル</h6>
<time class=”awasete__list__item__link__content__date”>記事の日付<time>
</div>
</a>
</li>
</ul>
</div>

[CSS]
/*この記事もチェック*/
.awasete{
margin-bottom: 20px;
}
.awasete .awasete__title{
border: none;
margin: 0;
padding: 0;
}
.awasete .awasete__title span{
background: #333;
color: #fff;
display: inline-block;
font-size: 14px;
padding:5px 10px;
}
.awasete .awasete__title i{
margin-right: 5px;
}
.awasete .awasete__list{
border: 1px solid #ccc;
padding: 20px;
}
.awasete .awasete__list__item{
list-style: none;
margin:0 0 20px 0;
}
.awasete .awasete__list__item:last-child{
margin-bottom: 0;
}
.awasete .awasete__list__item__link{
text-decoration: none;
box-shadow: none;
}
.awasete .awasete__list__item__link__image{
width: 20%;
}
.awasete .awasete__list__item__link__image img{
height: auto;
width: 100%;
}
.awasete .awasete__list__item__link__content{
width: 75%;
}
.awasete .awasete__list__item__link__content__title:before{
content: none;
}
.awasete .awasete__list__item__link__content__date{
color: #666;
font-size: 14px;
}

[ショートコード]
{related id=4175 label=この記事もチェック｝

記事のIDからデータを取得できるように設定

ここからは、コードの内容について説明していきます。

extract( shortcode_atts( array(
‘id‘ => ”,
‘label‘ => ‘この記事もチェック’,
), $atts ) );

記事のIDとボックスラベルについては、以下のように記述しています。

(1)記事のID：id
(2)ボックスラベル：label

複数の記事がデータ取得できるよう、記事IDをカンマで区切って設定

続いては、複数の記事を載せる場合です。

$ids = mb_split(“,“,$id);

このように、「カンマ」で記述をすることで、複数のIDを指定できるように設定できます。後述しますが、のちほどの設定で「foreach」部分に、その数を指定することになります。

「この記事もチェック」のラベルも変更可能に

‘label’ => ‘この記事もチェック’,

labelについては、上記のように設定しています。

取得データを「記事パーマリンク、アイキャッチ、タイトル、日付」で設定

foreach($ids as $value):
if(ctype_digit($value)):
$link = get_permalink($value);
$title = get_the_title($value);
$date = get_the_time(‘Y.m.d’,$value);
if(get_post_thumbnail_id($value)){
$thmbnail_url = wp_get_attachment_url(get_post_thumbnail_id( $value ));
}else{
$thmbnail_url = ‘アイキャッチ画像が無い場合の代替画像パス’;
}
$outputTag .=’
<li class=”awasete__list__item”>
<a class=”awasete__list__item__link flex flex–bet” href=”‘. $link . ‘” target=”_blank”>
<figure class=”awasete__list__item__link__image”>
<img src=”‘ . $thmbnail_url . ‘”>
</figure>
<div class=”awasete__list__item__link__content”>
<h6 class=”awasete__list__item__link__content__title”>’ . $title . ‘</h6>
<time class=”awasete__list__item__link__content__date”>’ . $date . ‘<time>
</div>
</a>
</li>’;
else:
$outputTag .='<li class=”awasete__list__item”>記事IDの指定が正しくありません</li>’;
endif;
endforeach;

先ほど、複数記事はカンマで区切りましたが、その数が、この「$ids」という変数の部分に影響します。「foreach」は「その数だけ処理を繰り返す」という指示を意味しますが、その数字を当て込みます。

また21行目については、記事のURLをIDから取得して代入します。22行目は記事のタイトルを、23行目は記事の日付を、それぞれ取得して代入するという仕組みです。

24行目から28行目は、その記事にアイキャッチ画像があるかどうかを判別する部分です。もし画像があれば「$thmbnail_url」に代入され、画像がなければ代替画像のパスが「$thmbnail_url」に入力されます。

エラーが起きた時ハンドリング処理

最後に欠かせないのがエラーのハンドリングです。エラーのハンドリングは、プログラムを実行した際、想定外のエラーが起きた時にエラーとして処理される仕組みを言います。

if($id)://記事IDの入力がある
foreach($ids as $value):
if(ctype_digit($value))://入力された記事IDが数値である
//記事IDの入力が正しい場合の処理
else://入力された記事IDが数値ではない
//記事IDが数値ではないエラーを出力
endif;
endforeach;
else://記事IDの入力がない
//記事IDの入力がないエラーを出力
endif;

まず1行目の「if($id):」で、記事IDが入力されているかどうかをチェックします。次に3行目の「if(ctype_digit($value)):」で、そのIDが数字であるかどうかをチェックします。

それぞれ問題がある場合は、エラーメッセージを出すという設定になっています。

「あわせて読みたい」おしゃれなボックスデザイン12選(cssとHTML）

最後に「あわせて読みたい」のデザイン例をいくつか紹介します。合計12のボックスを選出しました。

以下のCSSをコピーしてブログのCSSファイルに貼り付けた上で、掲載したい場所にHTMLを貼り付ければOKです。きれいなデザインがたくさんあるので、ぜひ試してみて下さい。

シンプルなボックスデザイン

まずはシンプルなボックスデザインから紹介します。

・四隅が丸っこいデザインのバージョン

[CSS]
.box1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3;/*文字色*/
background: #FFF;
border: solid 3px #6091d3;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box1 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box1″>
<p>ここにテキストを入れてください。</p>
</div>

・周囲の線が破線になっているバージョン

[CSS]
.box2 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0;/*点線*/
}
.box2 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box2″>
<p>ここにテキストを入れてください。</p>
</div>

・立体感を出すため影をつけたバージョン

[CSS]
.box3 {
padding: 0.5em 1em;
margin: 2em 0;
color: #00BCD4;
background: #e4fcff;/*背景色*/
border-top: solid 6px #1dc1d6;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box3 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box3″>
<p>ここにテキストを入れてください。</p>
</div>

かわいい系のボックスデザイン

次はかわいい系のボックスデザインです。

・ピンクを全開に打ち出したバージョン

[CSS]
.box4 {
padding: 0.2em 0.5em;
margin: 2em 0;
color: #565656;
background: #ffeaea;
box-shadow: 0px 0px 0px 10px #ffeaea;
border: dashed 2px #ffc3c3;
border-radius: 8px;
}
.box4 p {
margin: 0;
padding: 0;
}

[HTML] <div class=”box4″>
<p>ここにテキストを入れてください。</p>
</div>

・水色の斜めストライプのバージョン

[CSS]
.box5{
padding: 0.5em 1em;
margin: 2em 0;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.box5 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box5″>
<p>ここにテキストを入れてください。</p>
</div>

・布生地っぽいデザインのバージョン

[CSS]
.box6{
padding: 0.2em 0.5em;
margin: 2em 0;
background: #d6ebff;
box-shadow: 0px 0px 0px 10px #d6ebff;
border: dashed 2px white;
}
.box6 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box6″>
<p>ここにテキストを入れてください。</p>
</div>

こだわりデザインのボックス

3つ目に紹介するのは、こだわりデザインのボックスです。

・角がめくれているバージョン

[CSS]
.box7{
position: relative;
background: #fff0cd;
box-shadow: 0px 0px 0px 5px #fff0cd;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}
.box7:after{
position: absolute;
content: ”;
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ffdb88 #fff #ffdb88;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box7 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box7″>
<p>ここにテキストを入れてください。</p>
</div>

・角にボールがついたバージョン

[CSS]
.box8{
margin:2em 0;
position: relative;
padding: 0.25em 1em;
border: solid 2px #ffcb8a;
border-radius: 3px 0 3px 0;
}
.box8:before,.box18:after
{
content: ”;
position: absolute;
width:10px;
height: 10px;
border: solid 2px #ffcb8a;
border-radius: 50%;
}
.box8:after {
top:-12px;
left:-12px;
}
.box8:before {
bottom:-12px;
right:-12px;
}
.box8 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box8″>
<p>ここにテキストを入れてください。</p>
</div>

・セリフや独り言のようなバージョン

[CSS]
.box9 {
position: relative;
margin: 2em 0 2em 40px;
padding: 8px 15px;
background: #fff0c6;
border-radius: 30px;
}
.box9:before{font-family: FontAwesome;
content: “\f111”;
position: absolute;
font-size: 15px;
left: -40px;
bottom: 0;
color: #fff0c6;
}
.box9:after{
font-family: FontAwesome;
content: “\f111”;
position: absolute;
font-size: 23px;
left: -23px;
bottom: 0;
color: #fff0c6;
}
.box9 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box9″>
<p>ここにテキストを入れてください。</p>
</div>

上部にタイトルを付けたボックス

最後に紹介するのは、上部にタイトルを付けたボックスです。

・内側にタイトルがあるバージョン

[CSS]
.box10 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #FFC107;
}
.box10 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #FFC107;
color: #ffffff;
font-weight: bold;
}
.box10 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box10″>
<span class=”box-title”>ここにタイトルを入れてください。</span>
<p>ここにテキストを入れてください。</p>
</div>

・外側にタイトルがあるバージョン

[CSS]
.box11 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box11 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box11 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box11″>
<span class=”box-title”>ここにタイトルを入れてください。</span>
<p>ここにテキストを入れてください。</p>
</div>

・左上にタイトルがあるバージョン

[CSS]
.box12 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box12 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box12 p {
margin: 0;
padding: 0;
}

[HTML]
<div class=”box12″>
<span class=”box-title”>ここにタイトルを入れてください。</span>
<p>ここにテキストを入れてください。</p>
</div>