アメブロのサイドバーに人気記事一覧を表示させるカスタマイズ

今回はアメブロのサイドバーに人気記事一覧を作る方法を解説していきます。応用してプロフィール欄にも設置ができるのでそれも紹介します。

人気記事一覧を設置する意味というのは自分の読んでもらいたい記事に誘導するという事が目的です、記事を更新していくと昔の記事が埋もれてしまいますよね。

またアフィリエイトしている場合は報酬が発生しやすいページを人気記事ランキングに入れておけばそのページへの誘導ができます。

人気記事-2
これはPVを増やしたりするのにも結構使えるので活用していきましょう。

スポンサーリンク
アメーバキング

ブログパーツを使わない理由

人気記事一覧を表示させるブログパーツが探せば色々あります。しかしながらこのブログパーツで人気記事一覧を作成した場合は自分の誘導したいページではなくて、「本当のランキング」になってしまいます。

前述したように人気ランキングの記事一覧を設置する意味は「自分が誘導したいページに誘導する」という目的があるので勝手にランキング順に並ぶブログパーツは使いません。自分で誘導したい記事をランキング一覧に載せるのが目的です。

簡単に言うと「人気記事ランキング」という名前ではありますが、実際は「読んでもらいたい記事ランキング」という事ですね。

サイドバーに人気記事一覧を設置する方法

アメブロのサイドバーで人気記事一覧を作る場合には2通りのやり方があります。

  • フリースペースを利用する
  • フリープラグインを利用する

これはどちらでもOK。どちらもやり方はほとんど同じですが若干違う部分もあります。

既に「フリースペース」や「フリープラグイン」を使っている場合でも設置コードを追記する事で利用できますので、それぞれのやり方を紹介していきます。

フリープラグインを利用する場合

アメブロのマイページから右上のメニューマーク「三」のようなマークをクリックして「プラグインの追加」をクリック。

ツイッターサイド-9

次に「フリープラグイン」をクリックします。

Twitter埋め込み-4

フリープラグインに次のコードを入れます。

<!--人気記事一覧-->
<div class="skinMenuHeader">
<span class="skinMenuTitle">人気記事一覧</span></div>
<div class="skinMenuBody">
<ul class="skinSubList">
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>
</div>
<!--人気記事一覧終了-->

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。

それから「記事1」から「記事5」には、表示する文字(記事タイトル)を記入。一応5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

それから「人気記事一覧」という部分も好きな文言に変更できます。

後は追記した「フリープラグイン」をサイドバーの好きな位置に移動させます。

ツイッターサイド-11

このように表示されているはずです。

アメブロ人気記事一覧-1

もし上や下のメニューと詰まってしまっている場合は余白を作るために改行タグ<br />を追加して下さい。

アメブロ人気記事一覧-2

最後に「保存」を忘れないように。以上がフリープラグインを利用する場合の設置方法です。

フリースペースを利用する場合

フリースペースを使う場合もやり方はほとんど同じですが、注意する点は「フリープラグイン」では「Enter」の改行が反映されないが、「フリースペース」では「Enter」の改行が反映されてしまうという点です。これも説明していきます。

まずはアメブロのマイページの右上にメニューマーク「三」をクリックして「フリースペース編集」をクリック。

アメブロ人気記事一覧-3

ここに次のコードを入れます。

<!--人気記事一覧-->
<div class="skinMenuHeader">
<span class="skinMenuTitle">人気記事一覧</span></div>
<div class="skinMenuBody">
<ul class="skinSubList">
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>
</div>
<!--人気記事一覧終了-->

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。

それから「記事1」から「記事5」には、表示する文字(記事タイトル)を記入する。一応5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。それから「人気記事一覧」という部分も好きな文言に変更もできます。

それでこのまま「保存」せずに若干修正が必要です。前述したようにフリースペースでは「Enter」での改行が反映されてしまいます。そのため、すべての改行を削除してコードを並べます。こんな感じにします。

アメブロ人気記事一覧-4

これで「保存」してサイドバーに配置設定すれば完成です。

何度も繰り返しになりますが「フリースペース」では「Enter」の改行が反映されるので上や下にスペースが欲しい場合は「Enter」で改行しておきましょう。

プロフィール欄に人気記事一覧を設置する場合

プロフィール欄も訪問者に見られる部分なのでこのプロフィール欄からも誘導できるように人気記事一覧を設置しておきます。

やり方は上記で説明した「フリースペースを利用する場合」という部分と全く同じです。この部分も「Enter」での改行が反映されますので注意。

マイページから右上のメニューマーク「三」をクリックしてプロフィールの「フリースペース」から編集できます。

アメブロ人気記事一覧-5

ただ、最初と最後のという文字が反映されてしまうのでこの部分は削除しておきましょう。

好きなタイトルと紹介文等を一緒に書いて「保存」すれば完了です。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。