紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

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

f:id:slash1196:20210617180239j:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

あわせて読みたいってボックスよく見るんだけど、かっこいいよね。あれってどうやるのかな。
教えてほしいな。

 

こんなお悩みにお答えします。

 

この記事で分かること

  • あわせて読みたいを記事中に設置する方法【コピペOK】
  • あわせて読みたいを設置するメリット
  • あわせて読みたいにおすすめなデザイン3選

 

こんにちわ、紅蓮です。

 

別のブログを読んで、「あわせて読みたい」っていうのよく見ますよね。

あれを見て、「どうやるんだろう」って悩んでいませんか?


そこで今回は「あわせて読みたいを設置する方法」をお話ししていきます。

 

この記事を読むと、あわせて読みたいを設置する方法に加え、設置するメリット、おすすめのデザインがわかります。

 

この記事を書く僕は、はてなブログ歴は3年目。
今ではアフィリエイトで月3,000円位といただくことができています。

 

そんな僕も「あわせて読みたい」を表示するのには非常に悩んだ一人です。

というのもはてなブログは、そういうプラグインがないからです。

 

経験談からわかりやすく説明していくので、ぜひ最後までお読みいただけると嬉しいです。

 

では行ってみましょう。

Here We Go!!

 

 

あわせて読みたいを記事中に設置する方法

f:id:slash1196:20210617180335j:plain

ではさっそくあわせて読みたいを記事中に設置していきましょう。

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

 

  • 手順①コードをメモ帳にコピーする
  • 手順②コードをカスタマイズする
  • 手順③コードを貼る
  • 手順④HTMLに入力する
  • 手順⑤プレビューで確認する

 

では詳しく見ていきましょう。

 

手順①コードをメモ帳にコピーする

まずはメモ帳アプリを開いて、CSSコードをコピーしましょう。

基本的に、メモ帳はなんでもOKです。

 

CSSコード【コピーOK】

.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;
}

 

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

次に張り付けたコードをカスタマイズしていきます。

 

まず、カスタマイズする場所は上記のコードに/*変更点*/として書きました。

 

色を変更しましょう。

色に関しては、WEB色見本 原色大辞典で確認ができますね。

 

手順③コードを貼る

メモ帳に張ったCSSコードをカスタマイズが終わったら、次はそのコードをコピーして、はてなブログに張り付けます。

 

CSSを張る場所

デザイン→カスタマイズ→デザインCSSに張り付けましょう。

f:id:slash1196:20210606181402j:plain

貼り付けたら、「変更を保存する」のクリックもお忘れなく。

 

手順④HTMLに入力する

次にHTML編集で入れたい場所に、以下のコードを入力します。

 

HTMLコード【コピペOK】

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

 

前にアイコンを入れたいとき

<i class="blogicon-check">&nbsp;</i><p>ここに読みたいリンクを貼る</p>

のように入れるといいですね。

 

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

 

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

 

以下のような感じ。

 

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

 

見たまま編集でする場合には、リンクを貼り付けて、リストにして、そのあと囲んであげたほうが楽ですね。

 

手順⑤プレビューで確認する

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

f:id:slash1196:20210617182110p:plain

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

 

あわせて読みたいにおすすめのデザインCSS3選

あわせてよみたいにおすすめのデザインを選んでみました。

よかったら、お好きなようにお使いくださいね。


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

これはボックス内にラベルがあるタイプのデザインですね。

 

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

 

CSSコード

.box2 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #ff0000;
}
.box2 .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;
}
.box2 p {
margin: 0;
padding: 0;

 

HTMLコード

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

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

これは枠の中にタイトルがあるデザインですね。

短めのタイトルの時には、おすすめですね。


CSSコード

.box3 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #ff0000;
border-radius: 8px;
}
.box3 .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;
}
.box3 p {
margin: 0;
padding: 0;
}

 

HTMLコード

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

 

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

こちらはインデックスラベルを付けたようなデザインですね。

 

重要ポイントとか、見てほしい記事なんかにはおすすめで、まさにあわせて読みたいにはジャストフィットです。

 

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

 

CSSコード

.box4 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #ff0000;
}
.box4 .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;
}
.box4 p {
margin: 0;
padding: 0;
}

 

HTML

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

 

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

f:id:slash1196:20210609192239j:plain

ここではあわせて読みたいを設置するメリットについてお話していきます。
メリットに関しては、以下の通り。

 

  • メリット①読者が悩みを思い出すきっかけになる
  • メリット②行動してもらえる可能性が上がる
  • メリット③SEOにもいい

 

では一つずつ見ていきましょう。

 

メリット①読者が悩みを思い出すきっかけになる

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

 

読者って悩みを忘れていることもあるんです。
というのも読者は今の悩みを解決するために必死だからですね。

 

でもあわせて読みたいを置いておくと、「そういえばこんなことでも悩んいたんだ」と思い出すきっかけになります。

 

すると、記事を読むことになりますよね。だから、あわせて読みたいを置くとメリットなんですね。

 

メリット②行動してもらえる可能性が上がる

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

 

読者が一番行動しやすい時って、いつでしょうか。
実は記事を読んだあとなんですよね。

 

本を読んだ後を思い出してください。

 

本を読むと「よしやるぞ」って思っているけど、何日か経つと、やる気ってなくなっていたりしませんか。

 

実はモチベーションって一番読んだ直後が高いので、記事中に置いておくと読んでもらいやすいんですよね。

 

だから、あわせて読みたいを置いておくと、メリットなんです。

 

メリット③SEOにもいい

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

 

というのも、これは一つ目のメリットとリンクするんですが、読者の悩みを思い出すきっかけになるのは、読者の悩みを網羅的に書いていることになりますね。

 

そのために読者にとっては、ほかのサイトに行かなくてもいいので楽なサイトになるんです。


すると、読者ファーストの検索エンジンにも選ばれやすくなり、上位表示がしやすくなります。

 

だから、あわせて読みたいを置いておくとメリットなんですよね。

 

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

f:id:slash1196:20210503200746j:plain

あわせて読みたいを置く場所ってどこがいいのでしょうか?

 

ここでは置くべき場所についてお話していきます。

 

場所は、以下の通り。

 

  • 場所①冒頭
  • 場所②見出しの終わり
  • 場所③まとめの終わり

 

では詳しく見ていきましょう。

 

場所①冒頭

置くべき場所の一つ目は、冒頭ですね。
冒頭の導入文の自己紹介部分で使っているのがよくみられます。

 

というのも冒頭で自分の話を聞いてもらえるかが決まるからですね。

 

例えばアフィリエイトの話をしていくにあたって、実績の証拠がある人とない人ではある人のほうが聞きたいですよね。

 

そうなんです。冒頭文のところで読者はそれを判断するんです。

 

そこで、あわせて読みたいで自分の実績を置いておくと、信頼性が高まります。

 

だから話を聞いてもらう導入文である冒頭は、絶好の置く場所になるのですね。

 

場所②見出しの終わり

置くべき場所の二つ目は、見出しの終わりですね。

というのも、見出しの中では、たくさんの説明がありますよね。

 

当然そこでは説明が仕切れないものもあるわけで、その補足としてあわせて読みたいを利用しますね。

 

例えば以下のように使います。

違法行為については詳しくは、以下の記事にて詳しく解説をしてしますので是非そちらもお読みください。

 

 

こんな風に使うと、説得力がぐっと伝わりますよね。

 

そうするとこの記事も必要なことだと読まれるようになるので、おすすめですね。


場所③まとめの終わり

置くべき場所の3つ目は、記事のまとめの終わりで使うことです。

 

というのも読者はたまに記事を読んでどういう行動をとったらいいのか側からなくなるときがあるからです。

 

例えばあなたなら、次の行動がわかるブログとわからないブログならどちらの記事が読みたいですか?

 

結局何が言いたいのってなるブログって、読んでてしんどいですよね。

 

だから、あわせて読みたいを使って行動を誘導してあげるんです。

 

まとめ|「あわせて読みたい」は、みやすくなるだけではないのですぐに設置しよう

お疲れさまでした。

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

 

まとめると以下の通りですね。

 

まとめ
  • 「あわせて読みたい」の置き方はHTMLとCSSでできる
  • メリットがあるので、やっておいて損はない。
  • 置くべき場所は基本的には、3点あるが、まとめの最後には絶対置いたほうがいい。

 

こんな感じ。

 

というのもあわせて読みたいはやっぱり、サイトをSEO対策するうえでもかなりおすすめの方法ですね。

 

是非お試しになってほしいですね。

 

また当ブログでは以下のような記事も書いています。

よければぜひ、お読みくださいね。

 

 

 

では今回はこの辺で。

また次回に。