FC2ブログには、人気記事の一覧を表示するプラグインがありません。
人気記事一覧をブログサイト内に表示したい時、Rankletというサイトで人気記事一覧を作成してサイトに貼り付ける方法について説明します。
FC2ブロク以外でも、どのサイトでも作成可能です。
Ranklet(ランクレット)でコード作成する方法
Ranklet(ランクレット)
という外部サイトを開きます。
■Rankletのページはこちら
https://ranklet.com
①必要な入力項目を入力していく…
②この時点では、トップページやカテゴリ一覧のページも人気記事一覧に表示されてしまうので…
ブログ記事のみを人気記事一覧に表示させたい時は、基本情報の下のほうにある『ページの絞り込み条件』に画像のように入力する。
これを入力することで、人気記事一覧の表には記事のみを抽出して表示してくれます♪
③次に、人気記事一覧をカスタマイズしていきます♪
この状態だと、ランキング一覧は記事本文も表示されてしまい…
ごちゃごちゃした感じに見えるので、シンプルに画像と記事タイトルのみに変えていきます。
テンプレートという項目のHTMLを全て消して、下記のコードをコピーしてHTML欄に貼り付けます♪
<table class=”ranklet-table”>
<tbody class=”ranklet-pages”>
{{#context.pages}}
<tr class=”ranklet-page”>
<td class=”ranklet-rank”>
{{rank}}
</td>
<td class=”ranklet-image”>
{{#image}}
<a href=”{{url}}” class=”ranklet-link”>
<img class=”ranklet-img” src=”{{image}}” />
</a>
{{/image}}
</td>
<td class=”ranklet-meta”>
<div class=”ranklet-title”>
<a href=”{{url}}” class=”ranklet-link”>
{{title}}
</a>
</div></td>
</tr>
{{/context.pages}}
</tbody>
</table>
</div>
上記のコードをHTML欄に入れ替えると、画像と記事タイトルのみになり、とても見やすいランキング一覧になります(*^^*)
④『設定を更新』を押して、『サイトへの掲載』をクリックしてランキング一覧コードをコピーします♪
⑤そしてランキング一覧を表示したい場所にコードを貼り付ければ、ランキング一覧が表示されていると思います╰(*´︶`*)╯
最後に…
同じような壁に打つかる方が居そうだったので、この記事を書いておきます(^^)
&n自分らしいブログを作っていって下さいね♪
Rankletはサイトを重くさせることもないので、おすすめです。
