はてなブログで人気記事をタイトル下に表示する方法

タイトルの下に人気記事セレクションを設置したのでやり方を紹介していきたいと思います。これがあることで直帰率が下がり、多くの記事を読んでもらえるようになります。

多くの人気ブログでこういった人気記事が記事の上に表示されていて、そこをクリックした経験が僕自身何度もあるので今回導入してみました。

こんな感じで表示されます

こういうよくみるやつです。この記事の上部にも表示されているのでクリックすればわかりますが、リンク先に飛ぶようになっています。

ユーザーにとってもそのブログの人気記事をファーストインプレッションで確認できるので便利です。

コピペで一発！導入方法

やり方は簡単です。下のコードを自分のURLに変更してコピペすればOKです。

👍人気記事セレクション
<ul>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
</ul>

コピペする場所はデザイン→記事→記事上です。パソコン、スマホともに同じコードで大丈夫です。

周りを線で囲ったバージョンもあります。お好みのほうを使ってみてください。

👍人気記事セレクション

<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>
👍人気記事セレクション
<ul>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル”></a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
</ul>
</div>

スマホではゴチャゴチャしすぎていたので、すっきりとしたバージョンも作りました。

人気記事セレクション

<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>
人気記事セレクション
<ul>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<li><a style=”color: #1464b3;” href=”記事のURL”>記事タイトル</a></li>
<ul>
</div>