あわせて読みたいをはてなブログで設定する方法【コピペOK】

この記事でわかること

こんにちわ、Jouji(@jouji0720)です。僕は現在webライター4年目で、専業ライターとして生活をしています。

そんな僕が今回あわせて読みたいの設置方法をご紹介していきます。この記事を読むと、あわせて読みたいを設置する方法に加え、設置するメリット、おすすめのデザインがわかります。

ぜひ最後までお読みの上、一緒に手を動かしていきましょう。

はてなブログで記事中に「あわせて読みたい」を記事中に設置する方法

あわせて読みたいの設置する手順は、以下の通り。

それぞれ解説します。

コードをメモ帳にコピーする

はてなブログで記事中に「あわせて読みたい」を記事中に設置する手順の1つ目は、コードをメモ帳にコピーすることです。

コードをコピーして、メモ帳に貼り付けしましょう。この時にいきなりはてなブログ側に貼り付けるのはやめておきましょう。というのも、カスタマイズしているときにブログが動かなくなる可能性があるからです。

メモ帳はなんでも、ＯＫです。メモ帳アプリに下記のコードをコピーして貼り付けましょう。

.box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;/*変更点①：＃62c1ceを好きな色に*/
}
.box .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;
}
.box p {
margin: 0;
padding: 0;
}

コードをカスタマイズする

はてなブログで記事中に「あわせて読みたい」を記事中に設置する手順の2つ目は、コードをカスタマイズすることです。

メモ帳にコピーしたコードを、カスタマイズしていきましょう。

カスタマイズすべき場所は、コードに/*変更点*/として書かれた場所があります。そこのcolor:を変更していきましょう。

色のコードに関しては、下記にて確認できるので、参考にやっていきましょう。

>>WEB色見本 原色大辞典

はてなブログにコードを貼る

はてなブログで記事中に「あわせて読みたい」を記事中に設置する手順の3つ目は、はてなブログにコードを貼ることです。

コードのカスタマイズが終わったら、そのコードをコピーして、はてなブログに貼り付けましょう。

貼り付ける場所は、以下の通りです。

貼り付けたら、「変更を保存する」のクリックも忘れないようにしましょう。

HTMLに入力する

はてなブログで記事中に「あわせて読みたい」を記事中に設置する手順の4つ目は、HTMLに入力することです。

記事作成エディターのHTML編集で、リンクを入れたい場所に、以下のコードを入力します。

<div class=box0″><span class="box-title">あわせて読みたい</span>
<p>ここに読みたいリンクを貼る</p>

blogiconコードに関しては、 フォントアイコンの使い方を知れば、はてなブログは最高な話にて詳しく説明していますので、是非参考にしてください。

複数の記事を入れたいとき

複数の記事を入れたいときには、ページの下に新しいページを書き加えて、ページごとに<p>タグで囲ってあげましょう。

書き方は、次の通りです。

<div class="box"><span class="box-title">あわせて読みたい</span>
<p>あわせて読みたい記事①</p>
<p>あわせて読みたい記事②</p>
</div>

プレビューで確認する

プレビュー画面で、確認しましょう。

できていたら投稿しましょう。

はてなブログで「あわせて読みたい」におすすめデザイン3選

はてなブログで「あわせて読みたい」におすすめのデザインは、次のものがあります。

それぞれ解説します。

ボックス内にラベルがあるデザイン

おすすめのボックスデザインの1つ目は、ボックス内にラベルがあるタイプのデザインです。

このタイプの囲い枠は、よく目にします。シンプルで分かりやすいことから、ブロガー目線でよく目にします

コードの行数も少ないことから、表示速度が速いのでかなりおすすめのデザインです。

コードは以下の通りです。

CSSコード

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

HTMLコード

<div class="box1"><span class="box-title">あわせて読みたい</span>
<p>ここに記事のリンクを貼る</p>

上記の画像では、黄色になっていますが、border: solid 2px #ff0000;の＃ff0000を書き換えると色の変更ができます。

ラベルが左になっているのですが、.box-titleのleft: -2px;をright：に変更すると右からラベルを出すことができます。

枠の中にタイトルがあるデザイン

おすすめのボックスデザインの2つ目は、枠の中にタイトルが表示されるデザインです。

こちらもすっきりしているために、よく使われるデザインです。とはいえ、デメリットもあり、長いタイトルを入れられないことです。

スタイトルは、短めにしておきましょう。

CSSコード

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

HTMLコード

<div class="box2"><span class="box-title">あわせて読みたい</span>
<p>ここに記事のリンクを貼る</p>

もし色を変化させたい場合には、.box2や.box2.box-titleの＃のところを変更すれば、色が変えられます。

インデックスラベルを付けたようなデザイン

おすすめのボックスデザインCSSの3つ目は、インデックスラベルを付けたようなデザインです。

こちらもよく見るデザインで、読者の目を引くのにはもってこいのデザインです。見てほしい記事を囲むのにはおすすめです。

上記の説明でも使ったデザインですが、色を変更しています。

CSSコード

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

HTML

<div class="box4"><span class="box-title">あわせて読みたい</span>
<p>ここに記事のリンクを貼る</p>

あわせて読みたいを設置するメリット

あわせて読みたいを設置するメリットは、次のものがあります。

それぞれ解説します。

読者が悩みを思い出すきっかけになる

あわせて読みたいを設置するメリットの1つ目は、読者が悩みを思い出すきっかけになることです。

あわせて読みたいを設置することは、読者に「こんな悩みもありませんか」という呼びかけです。それに気づいた読者は「そういえばこんなことでも悩んいたんだ」と関連した悩みを思い出すきっかけになります。

すると読者は、その悩みもあなたのブログの中で解決するために、提示した記事を読んでいきます。

行動してもらえる可能性が上がる

あわせて読みたいを設置するメリットの2つ目は、行動してもらえる可能性も上がることです。

あわせて読みたいを設置する場所は、見出しの最後のことが多いです。このタイミングは、読者の悩みを解決して、モチベーションがマックスの状態のことが多いといわれています。

だから、あわせて読みたいを置いておくと、読者に行動してもらいやすいのです。

SEOにもいい

あわせて読みたいを設置するメリットの3つ目は、SEOにもいいことです。

あわせて読みたいを設置することは、内部リンクで記事同士をつなぐということです。つながると、読者にとっては、ほかのサイトに行かなくてもいいので楽なサイトになりますよね。

すると、読者ファーストの検索エンジンにも選ばれやすくなり、上位表示がしやすくなります。だからあわせて読みたいを置いておくと、SEOにもいいのです。

「あわせて読みたい」を置く場所

あわせて読みたいを置く場所は、以下の通りです。

それぞれ解説します。

冒頭

あわせて読みたいを置くべき場所の1つ目は、冒頭です。というのも、記事に対する先入観がないからです。

例えば、小説を読むときでも、一番最初と真ん中くらいの時では、最初のほうがモチベーションが高いはずです。

だから冒頭にあわせて読みたいを置いておくと、読んでもらいやすくなります。

各見出しの終わり

あわせて読みたいを置くべき場所の2つ目は、各見出しの終わりです。というのも、読者が読みやすくなるタイミングだからです。

例えば、ブログの稼ぎ方について書いていたとします。稼ぎ方の中には、当然「ブログを作る」ということが必要です。見出しを入れて、そこの最後にあわせて読みたいを入れてリンクを置く感じです。

すると、読者は、どうやって作るのかを気になるので、読みに行く可能性が高いのでおすすめです。

まとめの終わり

あわせて読みたいを置くべき場所の3つ目は、記事のまとめの終わりです。というのも、読者が次の行動を探すタイミングだからです。

例えば、アフィリエイトで稼ぐ方法の記事を書いているとします。まとめが終わったときに、次に読むべき関連記事を書いてなかったら、読者は行動ができません。

だからまとめの終わりに、あわせて読みたいを使って、読んでほしい記事に誘導してあげるのが重要なのです。

まとめ｜はてなブログを見やすくするには、「あわせて読みたい」は絶対必要

ここまであわせて読みたいの設置方法とおすすめのデザイン、メリットと置くべき場所についてお話してきました。

あわせて読みたいは、読者が迷子にならないためにも、必須の地図の役割をします。ですからぜひ使って、読者を誘導してあげましょう。

今回は以上です。

次に読むのにおすすめの記事

アフィリエイト記事の書き方を知りたいなら

アフィリエイトの始め方を知りたいなら

アフィリエイトを体系的に勉強したいなら