今回はアメブロのサイドバーに「サムネイル画像付き」と「サムネイル画像なし」での人気記事一覧を自作して表示する方法を解説していきます。
人気記事一覧を設置する意味というのは自分の読んでもらいたい記事に誘導するという事が目的です、記事を更新していくと昔の記事が埋もれてしまいますよね。
またアフィリエイトサイトの場合は報酬が発生しやすいページを人気記事ランキングに入れておけばそのページへの誘導ができます。
ブログパーツを使わない理由
人気記事一覧を表示させるブログパーツが探せば色々あります。しかしながらこのブログパーツで人気記事一覧を作成した場合は自分の誘導したいページではなくて、「本当のランキング（PVが多い順）」になってしまいます。
前述したように人気ランキングの記事一覧を設置する意味は「自分が誘導したいページに誘導する」という目的があるので勝手にランキング順に並ぶブログパーツは使いません。自分で誘導したい記事をランキング一覧に載せるのが目的です。
簡単に言うと「人気記事ランキング」という名前ではありますが、実際は「読んでもらいたい記事ランキング」という事ですね。
サイドバーに人気記事一覧を設置する方法
アメブロのサイドバーで人気記事一覧を作る場合には2通りのやり方があります。
- フリースペースを利用する
- フリープラグインを利用する
これはどちらでもOKです。どちらもやり方はほとんど同じですし、既に「フリースペース」や「フリープラグイン」を使っている場合でも設置コードを追記する事で利用できます。
今回はフリープラグインを使ってやってみます。
設置したいそれぞれの記事の画像URLを調べておく
まずは設置する記事タイトルと一緒に表示したい画像をアップロードして画像のURLを調べます。
↓↓この部分の画像です。
それぞれの記事に１つずつサムネイル画像を表示できます。サイズはCSSで調整するので特に気にする必要はありません。
マイページから「ブログ設定」⇒「設定・管理」⇒「画像フォルダ」を選択。
それぞれの人気記事で使いたい画像のファイルを選択してアップロード。
アップロードされた画像にカーソルを合わせて右クリックし、「画像のアドレスをコピー」を選択。
それぞれ人気記事で使う画像のURLを調べてメモ帳などにコピペしておきます。
CSSの編集をしておく
人気記事の設置をしていきますが、そのまま設置するとデザインが崩れるので先にCSSで位置調整などをしておきます。
アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。
CSSの一番下に次の記述を追加して下さい。
/* 人気記事一覧サムネイル付き */
.popular {
margin-left:0px !important;
margin-top:20px !important;
padding-left:0px !important;
}
.popular li{
list-style-type:none;
list-style-image:none;
clear: both;
margin-left: 0px !important;
padding: 5px 0 5px 0;
border-bottom: none !important;
}
.popular img{
margin-right: 10px;
padding:0px;
float: left;
max-width: 100px !important;
height: 100px;
}
.popular li a {font-weight: bold !important;}
ul.popular:after {
content: "";
display: block;
clear: both;
}
.side-pop {
margin-top:30px;
margin-bottom:30px;
}
/* 人気記事一覧サムネイルなしの場合 */
ul.pop-list {
list-style: disc;
padding-left: 30px;
margin-top: 20px;
}
.pop-list li {
line-height: 1.75;
font-size: 15px;
font-weight: bold;
}
.pop-list li a {
text-decoration: none;
}
CSSは以上で完了。次に人気記事を設置していきます。
フリープラグインを使う場合
マイページから「ブログ管理」⇒「設定・管理」⇒「プラグインの追加」をクリック。
「フリープラグイン」をクリックして以下のコードを追加（既に別のコードがあってもそのまま追加してOKです）。
<div class="side-pop"> <div class="skin-widgetInner"> <div data-uranus-component="widgetHead" class="skin-widgetHead"> <h3 data-uranus-component="widgetTitle" class="skin-widgetTitle">人気記事一覧</h3></div> <ul class="popular"> <li><a href="#"><img decoding="async" src="">人気記事タイトル1</a></li> <li><a href="#"><img decoding="async" src="">人気記事タイトル2</a></li> <li><a href="#"><img decoding="async" src="">人気記事タイトル3</a></li> </ul></div></div>
#の部分は消して飛ばしたい記事のそれぞれのURLを入力。「img src=””」の「””」の間にそれぞれの画像のURLを入れて、タイトルなどを書き換え。
フリープラグインがこんな感じになります。
「保存」すると次のページで「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら。」と書かているので、「こちら」の部分をクリック。
フリープラグインをサイドバーの好きな位置に追加。
最後に「保存」を忘れない事。
保存できたらブログを確認。反映されてない場合には再読み込み（F5）を押して確認してみて下さい。
こんな感じに設置されていればOK。
サムネイル画像は必要ないよって場合
画像は必要なくて人気記事のタイトルだけ羅列したい場合もあるかもしれません。プロフィール欄とかは画像なしの箇条書きスタイルで以下ように設置するのが良いかも。
この場合はフリープラグインやフリースペースに以下にようなコードを入れます。
<div class="side-pop"> <div class="skin-widgetInner"> <div data-uranus-component="widgetHead" class="skin-widgetHead"> <h3 data-uranus-component="widgetTitle" class="skin-widgetTitle">人気記事一覧</h3></div> <ul class="pop-list"> <li><a href="#" target="_blank" rel="noopener">人気記事１</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事２</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事３</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事４</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事５</a></li> </ul></div></div>
「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。
こんな感じになります。
それから「記事1」から「記事5」には、表示する文字（記事タイトル）を記入。一応５つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。
それから「人気記事一覧」という部分も好きな文言に変更できます。
最後に「保存」を忘れないように。以上がフリープラグインを利用する場合の設置方法です。
フリースペースを利用する場合
フリースペースを使う場合もやり方はほとんど同じですが、注意する点は「フリープラグイン」では「Enter」の改行が反映されないが、「フリースペース」では「Enter」の改行が反映されてしまうという点です。
例えば先程の人気記事のコード（リスト表示のコード）でやってみます。
フリースペースに先程のコードをいれます。
<div class="side-pop"> <div class="skin-widgetInner"> <div data-uranus-component="widgetHead" class="skin-widgetHead"> <h3 data-uranus-component="widgetTitle" class="skin-widgetTitle">人気記事一覧</h3></div> <ul class="pop-list"> <li><a href="#" target="_blank" rel="noopener">人気記事１</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事２</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事３</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事４</a></li> <li><a href="#" target="_blank" rel="noopener">人気記事５</a></li> </ul></div></div>
それでこのまま「保存」せずに若干修正が必要です。前述したようにフリースペースでは「Enter」での改行が反映されてしまいます。そのため、フリースペースを使う場合はすべての改行を削除してコードを並べます。こんな感じにします。
これで「保存」してサイドバーに配置設定すれば完成です。
何度も繰り返しになりますが「フリースペース」では「Enter」の改行が反映されるので上や下にスペースが欲しい場合は「Enter」で改行しておきましょう。
以上アメブロのサイドバーに人気記事一覧を表示させるカスタマイズでした。
コメント