「がぞりん」は逆アクセスランキングに連動してリンク画像を表示する画像RSSブログパーツです。


サポートブログ内の記事へパッとアクセスできるように目次を作りました。

がぞりんサンプル#4 ランキング連動のテキストRSSとして使いたい場合

がぞりん

アクセストレードにおいて画RSSのようなテキストRSSは必須のツールです。がぞりんを使って、ランキング連動のテキストRSSとして表示させる方法を紹介しましょう。↓こんな感じです。



htmlコードはこんな感じです。

<div class="gazoline-midwrap2">
<div class="gazoline-midbox-noimage color0">
    <script type="text/javascript">gazoline.show(0,'label','ad',false)</script>
</div>
<div class="gazoline-midbox-noimage color1">
    <script type="text/javascript">gazoline.show(1,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color1">
    <script type="text/javascript">gazoline.show(2,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color1">
    <script type="text/javascript">gazoline.show(3,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color2">
    <script type="text/javascript">gazoline.show(4,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color2">
    <script type="text/javascript">gazoline.show(5,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color2">
    <script type="text/javascript">gazoline.show(6,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color3">
    <script type="text/javascript">gazoline.show(7,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color3">
    <script type="text/javascript">gazoline.show(8,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color3">
    <script type="text/javascript">gazoline.show(9,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color3">
    <script type="text/javascript">gazoline.show(10,'rss',1,false)</script>
</div>
<div class="gazoline-midbox-noimage color0">
    <script type="text/javascript">gazoline.show(0,'label','ad',false)</script>
</div>
</div>



今回はちょっと修飾してみるため、cssを凝ってます。オリジナルのデザインを作る際、ご参考にどうぞ。

.gazoline-midwrap2 {
  margin: 20px 0px;
  padding: 0px;
  width: 650px;
  height: 200px;
  clear: both;
  overflow: scroll;  /* スクロールバー表示 */ 
  overflow-x: hidden;  /* 横スクロールバーを非表示にする */
}
.gazoline-midbox-noimage {
  clear: both;
  width: 600px;
  height: auto;
  margin: 4px 0px 2px 0px;
  padding: 1px 0px 1px 10px;
  font-size: 14px;
  font-weight: none;
  white-space: nowrap;  /* テキストを折り返させない */
  overflow: hidden;  /* widthで設定した幅以上になるテキストは表示しない */
}
.gazoline-midbox-noimage img {
  width: 0px;  /* 画像は非表示にする */
  height: 0px;  /* 画像は非表示にする */
  float: left;  /* デフォルトで画像の下にあるテキストを画像の横に回りこませる */
}
.gazoline-midwrap2 .color0 {
  border-left: 6px solid #999999;  /* 上と下に入れる広告行の色 */
}
.gazoline-midwrap2 .color1 {
  border-left: 6px solid #FF4500;  /* 1~3位の色 */
}
.gazoline-midwrap2 .color2 {
  border-left: 6px solid #FFA500;  /* 4~6位の色 */
}
.gazoline-midwrap2 .color3 {
  border-left: 6px solid #FFD700;  /* 7~10位の色 */
}



htmlコードの1位~10位の表示部分はがぞりんサンプル#1 ランキングトップ10をRSS参照で表示させたい場合で使ったコードと全く同じです。上下に広告用の一行を入れてみてますが、この例からも判るようにがぞりんではデザインをユーザに委ねているので、cssでユーザオリジナルの見せ方ができます。

「よくあるね、これ」的に画一的なサイト構造になることを防げますし、自サイトの色に合わないデザインに苦しむこともありません。ご自身のサイトに溶け込ませてお使いください♪



★ ワンポイントアドバイス ★
この例で上下に入れている広告部分もがぞりんで管理させています。がぞりんにサイト登録する際、表示させたいアフィリエイト等のURLで登録し、ラベル「ad」を付けてみました。

画RSS等で挿入される冒頭の広告、自分の実入りにしたいと思ったこと、ありませんか?
がぞりん使えば実現できますよwww
広告記事を登録する方法はがぞりんに広告記事を登録したいにまとめました。ご興味あればご参照ください。

なお、パラメータAが「0」になっていますが、この使い方は次のがぞりんサンプル#5 ランキングと無関係に特定サイトへの画像リンクを設置したい場合で紹介します。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. 2013年 11月 03日

お勧め記事トップ5

ACRランキング上位5サイトの画像リンクを、RSSで取得した画像を使って表示しています。
→この表示方法を知りたい

お勧めおっぱい記事トップ5

ACRランキング上位5サイトの画像リンクを、RSSで取得した画像の内、おっぱいに関する記事を優先的に使って表示しています。
→この表示方法を知りたい

ピックアップ記事

ランキング順位とは無関係に、一押しサイトのRSSを取得してランダム表示させています。
→この表示方法を知りたい

がぞりんアクセスランキング

外部サービスによるアクセスランキング


本サイトの画像リンクは「がぞりん」を利用しています。

アクセスランキング
全ランキングはこちら

人気記事紹介

ACRランキングに連動し、上位10サイトのRSSを取得してテキスト表示させたテキストRSS風の表示です。先頭と末尾の1行ずつは広告です。この広告もがぞりんで任意のものを設定できます。
→この表示方法を知りたい

パワープッシュ!

ACRランキングとは無関係に、今この瞬間お勧めの記事を紹介することができます。
→この表示方法を知りたい
ページ上部へ戻る