5分で覚える人気記事ランキングに画像を表示マニュアル

上の画像が変更(修正)後の表示画面です
下の画像が今までのよく見るテキスト表示のみのACR WEBのページランキングです

ACR WEBのページランキングに画像を表示する方法

まずACR WEBの管理画面に入り『置換設定』に進みます
『置換ルールの追加』という項目があるのでこのように編集します


『置き換え前のＵＲＬ』と『置き換え前のＵＲＬ』は同じにします｡｡｡変わったら困るので当たり前w
『置き換え後のタイトル』とは通常は古い記事がURL表記になっているのを記事タイトル名に変えるためにあるのですがこの枠はHTMLタグが利用できるのでここで画像タグを貼付け＋記事タイトル名にしました
試行錯誤の末に行き着いたのはこれです

<img src="●" border="0" width="220"><Br>記事名
※●は画像URLをコピペしてください
※width="220"はブログの最適な幅に調整してください

自分のACR WEBのページランキングの環境は
表全体の幅　280px
順位部分の幅　20px
アクセス数部分の幅　40px
このようになっていますので［280－20－40］で画像の幅をwidth="220"にしています

画像URLとはFC2ブログの場合だと『ファイル管理画面』にあります



ここの画像と一緒に記載されているURL　http://blog-imgs-･･･をコピペして完了です
出来上がったものはこの記事の最初(1番目)の画像や現在のサイドバーにあるような仕上がりになります

もっとカッコイイ人気記事ランキングにしたい場合

<img src="●" border="0" width="220"><Br>記事名
これだと画像の下に記事タイトル名という状態になっています
どうせ手作業でイジるのでしたらもっとカッコイイ仕上がりにできる!?
例えば見た目に美しいホームページや人気ブログでしたら左に画像で右に文章ってスタイル
こんな感じでいけるのではないかな？

<img src="●" align="left" border="0" width="120">記事名
※align="left"で左側に画像
※右側にテキストが来るので先ほどよりも小さな画像サイズwidth="120"
※画像下に文章ではないので改行タグ<Br>は削除

参考記事
ACR WEBのページランキングに画像を表示 - マンガとラノベ