ブログ

はてなブログでコピペで簡単に人気記事セレクションやおすすめ記事を設置する方法

今回は僕がブログで使っている人気記事やおすすめ記事を記事上や記事下に表示する方法を紹介していきます。

 

僕自身ブログに実際に設置しているのでそちらも参考にしてみてください。URLを書き換えて貼り付けるだけなので、興味のある方はぜひ設置してみてください。

 

以前書いたこちらの記事でコメントを頂けたり、実際に設置してくださる方がいて嬉しかったので今回はパワーアップバージョンです。

www.tontonpig.com

 

 

目次

人気記事セレクション①

人気記事セレクション

1. Amazonプライムビデオでおすすめの映画ベスト50を年間100本以上映画をみた僕が紹介!
2. 実際に使っておすすめの年会費無料クレジットカード5選!
3. Amazonで「本当に買ってよかった捗るもの」をまとめて紹介!【2016】
4. ドナルド・トランプ氏はバック・トゥ・ザ・フューチャーの悪役ビフのモデルだった

こちらはパソコン向けのシンプルな人気記事セレクションです。こちらのコードを記事上か記事下に貼り付ければ表示されます。 

<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> 

 

 

人気記事セレクション①(色付き)

人気記事セレクション

1. Amazonプライムビデオでおすすめの映画ベスト50を年間100本以上映画をみた僕が紹介!
2. 実際に使っておすすめの年会費無料クレジットカード5選!
3. Amazonで「本当に買ってよかった捗るもの」をまとめて紹介!【2016】
4. ドナルド・トランプ氏はバック・トゥ・ザ・フューチャーの悪役ビフのモデルだった

先程の人気記事セレクションに色をつけて目立つようにしたものです。 「2px solid #ff8c00」のが外の枠の色で、「background-color: #faf0e6」が枠の中の色です。

 

色見本から好きな色をコピーしてきて貼り付けると自分好みの色にカスタマイズできます。

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

<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>

 

 

人気記事セレクション②

👍人気記事セレクション

こちらはすっきりとしたタイプの人気記事セレクションです。 

<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>

 

 

おすすめ記事

おすすめ記事▼

Amazonプライム会員のメリットをまとめて紹介【破格の月額325円!】無料体験できます!

続いて紹介するのは文中にもさりげなく挿入できるシンプルなおすすめ記事の紹介です。 

<fieldset style=”word-wrap: break-word; border: 1px dotted #000000; margin: 0px 2px; padding: 10px;”><legend>おすすめ記事▼</legend><a href=”記事のURL” target=”_blank”>記事タイトル</a></fieldset>

 

 

おすすめ記事(色付き)

おすすめ記事▼

Amazonプライム会員のメリットをまとめて紹介【破格の月額325円!】無料体験できます!

こちらはおすすめ記事の色付きのものです。先ほどと同じように色を自分好みに変更することができます。 

<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>

 

 

記事下人気記事

僕が記事下に表示している人気記事の表示です。結構目立つのでおすすめです。 

<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種類のカスタマイズを使わせていただいています。

3ヶ月前に書いたトランプの記事に1日で30000アクセスがあった話 

shiromatakumi.hatenablog.com

 

 

まとめ

今回ははてなブログで簡単におすすめ記事を設置する方法を紹介しました。うまく関連記事を設置すればサイト回遊率が上がりGoogleの評価も上がります。

 

また検索が強い記事からアフィリエイト記事への導線を引くのにも役立ちます。気になるカスタマイズがあれば是非試してみてください。

 

おすすめ記事

学生・サラリーマンブロガーは年間に何円ブログ収入があったら確定申告をする必要があるの?

ブログ開設から10ヶ月で目標だった収益5万円に到達しました

月額500円でプレミアリーグ全試合が見放題の「スポナビライブ」がスポーツ好きには最高!

はてなブログで過去記事を効果的にリライトする方法 

ABOUT ME
トントン
漫画、映画、アニメなどサブカルチャーを幅広く紹介するブログです。 お問い合わせはこちら:today.tonton@gmail.com

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です