記事上、記事下にオススメ記事を表示させる方法まとめ【ブログカスタマイズ】

こんにちは、masa（＠ masa）です！

ブログの回遊率を高めるという目的で「記事上、記事下にオススメ記事を表示させてみた」ので今日はその方法について書いていきたいと思います。

本当に回遊率が高まるかどうかはよく分かりません汗

▼完成版がこれです。 

①導入

メインのコードはこちらのページを参考にしました。

はてなブログの記事上、記事下に人気記事を入れるカスタマイズについて - I AM HARRY

上記ページに書いてあるコードは以下の通りです。

<p><strong><span style="font-size: 120%;"> 人気記事セレクション

</span></strong></p>
<ul>
<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=

"記事URL">記事タイトル</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=

"記事URL">記事タイトル</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=

"記事URL">記事タイトル</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=

"記事URL">記事タイトル</a></span></li>
<li><span style="color: #1464b3;"><a style="color: #1464b3;" href=

"記事URL">記事タイトル</a></span></li>
</ul>

導入するとこんな感じになります▼

②自分流のアレンジ

枠線の導入

枠の種類や形状はこちらのページを参考にしました。丸みのある二重線にしています。

HTMLのお勉強･枠をつける - ウェブサイト制作ツール紹介 Jimdo diy

○コード

<div style="padding: 10px; margin-bottom: 10px; border:

5px double #333333; border-radius: 10px;background-color:#f0f8ff">

ハイパーリンクの下線の解除 

HTMLでのハイパーリンクの下線削除の方法はこちらのページを参考にしました。

ホームページ作成 - リンクの下線を消す方法

○コード 

;text-decoration:none;

記号のHTML

♣のHTMLを取得しました。HTMLはそのまま入力すれば勝手に反映されることを知りました。

【みんなの知識 ちょっと便利帳】使いたいときの HTML特殊文字 & 機種依存文字 - よく使う記号、使われる記号、いざという時の...

○コード

&clubs;

色のHTML

色のHTMLを取得しました。

WEB色見本 原色大辞典 - HTMLカラーコード

僕はaliceblueを選びました。

○コード

#f0f8ff 

背景色のHTML

<div style="○○">の中に;background-color:#f0f8ff"を入れるだけでOKです。

○コード

<div style=    ;"background-color:#f0f8ff">

③完成したコード

以下のコードを使うと完全に僕と同じやつが出来上がりますw 

<div style="padding: 10px; margin-bottom: 10px; border: 5px double

#333333; border-radius: 10px;background-color:#f0f8ff">
<p><strong><span style="font-size: 120%;">&clubs;

人気記事セレクション</span></strong></p>
<ul>
<li><span style="color: #1464b3;"><a style="color: #111111;

text-decoration:none;" href="URL">記事タイトル</a></span></li>

<li><span style="color: #1464b3;"><a style="color: #111111;

text-decoration:none;" href="URL">記事タイトル</a></span></li>

<li><span style="color: #1464b3;"><a style="color: #111111;

text-decoration:none;" href="URL">記事タイトル</a></span></li>

<li><span style="color: #1464b3;"><a style="color: #111111;

text-decoration:none;" href="URL">記事タイトル</a></span></li>

</ul>

</div>

おわりに

いかがでしょうか？記事上、記事下にオススメ記事を表示させる方法をまとめてみました。コードの挿入位置等の説明は割愛しましたが、それ以外の変更点については細かく書いているつもりです！

また、人気記事セレクションと書いていますが、これは単に僕が読んで欲しいヤツをチョイスしただけですw読んでくださいｗ

で、この施策によりブログの回遊率が高まると期待しています！

おしまい。