サイドバーに『月間人気ページランキング』を設置していますが画像を設置してみました
最初は面倒でしたが試行錯誤に末に煩雑な作業を減らしてシンプルにできたので紹介です

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

人気ページランキング変更前

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


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

置換ルールの追加方法
『置き換え前のURL』と『置き換え前のURL』は同じにします。。。変わったら困るので当たり前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ブログの場合だと『ファイル管理画面』にあります

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のページランキングに画像を表示 - マンガとラノベ

スポンサーリンク

 カテゴリ
 タグ
None