『ACR WEB』の『ページランキング』で画像が表示できた

【カテゴリ：パソコン　ブログカスタマイズの記録】

このブログの右側のサイドバーに表示している『ACR WEB』の『ページランキング』ですが、各記事のタイトルの上に画像を表示させることができました。


↑画像を表示している箇所の例

今までネット上のサイトで、画像付きで『ACR WEB』の『ページランキング』を表示しているサイトをときどき見かけることがあったのですが、どうやっているのかずっと不思議でした。

というのは、マニュアルを見ても画像を表示させるような方法についての記述は見当たらないし、環境設定などにもそのような設定項目が全く無かったからです。

そのため、機能を拡張した有料サービスでもあるのだろうかと思っていました。

しかし、今日（9月30日）google の検索で以下のページを見つけました。

ACR WEBのページランキングに画像を表示 - マンガとラノベ:
http://mangatoranobe.blog45.fc2.com/blog-entry-308.html

なんと、このページに画像を表示させる為の方法が書かれていました。

スポンサーリンク

原理としてはとても簡単なのですが、この方法を最初に考えて実践した人は、ある意味すごいと思いました。

簡単に方法を説明すると、表示するタイトルの文字列の頭に画像のタグをつけているだけです。

↓下の画像で『置き換え後のタイトル：』の箇所


例えば通常のタイトルは、単純に以下のような文字列です。

『Z9 PLUS』のサイドパネルの穴を塞いでみた

これを以下のようにします。

<img src=https://kingpcfx.up.seesaa.net/image_pr/2011-04-17_PR150x112.jpg><br>『Z9 PLUS』のサイドパネルの穴を塞いでみた

先頭に『<img src=画像のURL><br>』を付加しているだけです。

これだけで画像が表示されるようになります。

しかし原理は分かったのですが、実際に画像を表示させようとすると、かなり面倒な事がありました。

当たり前の事ですが、表示させる画像を自分で用意しなければならない事です。

自分は、各記事の中から代表となる画像を選び、横のサイズを 150 ピクセルとなるように縮小などの加工をして、ブログにアップロードしました。

とりあえずランキングの上位30記事分についての画像を用意してアップロードし、『ACR WEB』の管理画面の『置換設定』でひとつひとつ設定を行いましたが、かなりの時間を要しました。

量が多いと、ひとつひとつの手入力作業では厳しいので、今後は『上級者向け設定』の機能を利用して一括処理できるようにするなど、方法を考えようと思います。

補足：
　参考にさせていただいた前記サイトには、画像のURLをダブルクォーテーションで囲んでいましたが、自分はダブルクォーテーションを付けないようにしました。
　ダブルクォーテーションで囲んだ場合、全部のランキングを表示するページや『置換設定』の画面で画像が正しく表示されなかったからです。
　ダブルクォーテーションを省略すると正しく表示されるようになりました。
　あと、<Br> は <br>（＝小文字）でも同じです。

以下は、参考までに自分の『環境設定』の内容をキャプチャした画像です。




↑幅の指定ですが、自分は『表全体の幅』のみ設定しています。

以上です。

スポンサーリンク