今回は僕がブログで使っている人気記事やおすすめ記事を記事上や記事下に表示する方法を紹介していきます。
僕自身ブログに実際に設置しているのでそちらも参考にしてみてください。URLを書き換えて貼り付けるだけなので、興味のある方はぜひ設置してみてください。
以前書いたこちらの記事でコメントを頂けたり、実際に設置してくださる方がいて嬉しかったので今回はパワーアップバージョンです。
- 人気記事セレクション①(色付き)
- 人気記事セレクション②
- 人気記事セレクション②(枠付き)
- 人気記事セレクション(スマホ向け)
- おすすめ記事
- おすすめ記事(色付き)
- 記事下人気記事
- シロマティさんのおすすめ記事カスタマイズもおすすめ
- まとめ
目次
人気記事セレクション①
こちらはパソコン向けのシンプルな人気記事セレクションです。こちらのコードを記事上か記事下に貼り付ければ表示されます。
<fieldset style=”word-wrap: break-word; margin: 36px 0px 16px; position: relative; padding: 16px 10px; border: 2px solid; color: #000000;”><legend><strong>人気記事セレクション</strong></legend><a href=”記事のURL” target=”_blank”>1. 記事タイトル</a> <br /><a href=”記事のURL” target=”_blank”>2. 記事タイトル</a><br /><a href=”記事のURL” target=”_blank”>3. 記事タイトル</a><br /><a href=”記事のURL” target=”_blank”>4. 記事タイトル </a></fieldset>
人気記事セレクション①(色付き)
先程の人気記事セレクションに色をつけて目立つようにしたものです。 「2px solid #ff8c00」のが外の枠の色で、「background-color: #faf0e6」が枠の中の色です。
色見本から好きな色をコピーしてきて貼り付けると自分好みの色にカスタマイズできます。
<fieldset style=”word-wrap: break-word; margin: 36px 0px 16px; position: relative; padding: 16px 10px; border: 2px solid #ff8c00; background-color: #faf0e6; color: #000000;”><legend><strong>人気記事セレクション</strong></legend><a href=”記事のURL” target=”_blank”>1. 記事タイトル</a> <br /><a href=”記事のURL” target=”_blank”>2. 記事タイトル</a><br /><a href=”記事のURL” target=”_blank”>3. 記事タイトル</a><br /><a href=”記事のURL” target=”_blank”>4. 記事タイトル </a></fieldset>
人気記事セレクション②
👍人気記事セレクション
- Amazonプライムビデオでおすすめの映画ベスト50を年間100本以上映画をみた僕が紹介!
- 実際に使っておすすめの年会費無料クレジットカード5選!
- Amazonで「本当に買ってよかった捗るもの」をまとめて紹介!【2016】
- ドナルド・トランプ氏はバック・トゥ・ザ・フューチャーの悪役ビフのモデルだった
こちらはすっきりとしたタイプの人気記事セレクションです。
<p><strong>👍人気記事セレクション</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>
</ul>
人気記事セレクション②(枠付き)
👍人気記事セレクション
「人気記事セレクション②」に 枠をつけて目立たせたバージョンです。
<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>
<p><strong>👍人気記事セレクション</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>
</ul>
</div>
人気記事セレクション(スマホ向け)
人気記事セレクション
スマホ向けに少しフォントを小さくしたものです。僕はスマホのヘッダーに取り付けています。
<p>
<div style=”padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;”>
<p><strong><U>人気記事セレクション</u></strong><p>
<ul>
<FONT size=”2″><li><span style=”color: #1464b3;”><a style=”color: #1464b3;” href=”記事のURL” target=”_blank”>記事タイトル</a></span></li>
<li><span style=”color: #1464b3;”><a style=”color: #1464b3;” href=”記事のURL” target=”_blank”>記事タイトル</a></span></li>
<li><span style=”color: #1464b3;”><a style=”color: #1464b3;” href=”記事のURL” target=”_blank”>記事タイトル</a></span></li>
<li><span style=”color: #1464b3;”><a style=”color: #1464b3;” href=”記事のURL” target=”_blank”>記事タイトル</a></span></li></FONT>
<ul>
</div>
おすすめ記事
続いて紹介するのは文中にもさりげなく挿入できるシンプルなおすすめ記事の紹介です。
<fieldset style=”word-wrap: break-word; border: 1px dotted #000000; margin: 0px 2px; padding: 10px;”><legend>おすすめ記事▼</legend><a href=”記事のURL” target=”_blank”>記事タイトル</a></fieldset>
おすすめ記事(色付き)
こちらはおすすめ記事の色付きのものです。先ほどと同じように色を自分好みに変更することができます。
<fieldset style=”word-wrap: break-word; border: 2px solid #ff8c00; margin: 0px 2px; padding: 10px; background-color: #faf0e6; color: #000000;”><legend><strong>おすすめ記事▼</strong></legend><a style=”color: #1111cc;” 記事のURL” target=”_blank”>記事タイトル</a></fieldset>
記事下人気記事
- 人気 Amazonプライムビデオでおすすめの映画ベスト50を年間100本以上映画をみた僕が紹介!
- 人気 実際に使っておすすめの年会費無料クレジットカード5選!
- 人気 Amazonで「本当に買ってよかった捗るもの」をまとめて紹介!【2016】
僕が記事下に表示している人気記事の表示です。結構目立つのでおすすめです。
<ul style=”margin: 0px; padding: 0px;”>
<li style=”list-style-type: none; text-decoration: none; padding: 10px 0px;”><a style=”background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;” href=”記事のURL”><span style=”color: #ffffff;”><strong><span style=”background-color: #ff4500;”>人気</span></strong></span> 記事タイトル</a></li>
<li style=”list-style-type: none; text-decoration: none; padding: 10px 0px;”><a style=”background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;” href=”記事URL”><span style=”color: #ffffff;”><strong><span style=”background-color: #ff4500;”>人気</span></strong></span> 記事タイトル</a></li>
<li style=”list-style-type: none; text-decoration: none; padding: 10px 0px;”><a style=”background-color: transparent; color: blue; text-decoration: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, opacity 0.15s ease-in-out; font-weight: bold;” href=”記事URL”><span style=”color: #ffffff;”><strong><span style=”background-color: #ff4500;”>人気</span></strong></span> 記事タイトル</a></li>
</ul>
シロマティさんのおすすめ記事カスタマイズもおすすめ
シロマティ (id:shiromatakumi) さんが公開しておられるリンクを枠で囲って目立たせるカスタマイズが本当に素晴らしいのでおすすめです。
僕はこの2種類のカスタマイズを使わせていただいています。
11月のPVは25万!収益は11万でした!11月のブログ運営を振り返る!
3ヶ月前に書いたトランプの記事に1日で30000アクセスがあった話
まとめ
今回ははてなブログで簡単におすすめ記事を設置する方法を紹介しました。うまく関連記事を設置すればサイト回遊率が上がりGoogleの評価も上がります。
また検索が強い記事からアフィリエイト記事への導線を引くのにも役立ちます。気になるカスタマイズがあれば是非試してみてください。
おすすめ記事
学生・サラリーマンブロガーは年間に何円ブログ収入があったら確定申告をする必要があるの?
月額500円でプレミアリーグ全試合が見放題の「スポナビライブ」がスポーツ好きには最高!
