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


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

がぞりんサンプル#1 ランキングトップ10をRSS参照で表示させたい場合

eyeimg600x225_gazolinecode

サイト管理者が望む、最も楽ちんな使い方です(笑)
ランキング順位を参照し、指定順位のサイトに対する画像リンクを、RSS情報を参照して作成します。
本サポートブログの左カラムにある『お勧め記事トップ10』は、この設定で表示させています。

表示させたい箇所に以下のようにhtmlコードを設置してください。

  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(1,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(2,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(3,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(4,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(5,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(6,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(7,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(8,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(9,'rss',1,false)</script>
  </div>
  <div class="gazoline-sidebox">
    <script type="text/javascript">gazoline.show(10,'rss',1,false)</script>
  </div>

がぞりんコードのパラメータについてはこちらの記事を参照してください(この例ではパラメータCは「1」に設定していますが、パラメータBが「rss」なので無視されます。)。

トップ10を表示させたいので、がぞりんのコードを10個並べ、それぞれに対して表示枠をカスタマイズするために<div>~</div>で囲み、それに対して以下のようにcssでスタイルを設定します。

cssの設定は以下のようにしています。

.gazoline-sidebox {
  margin: 10px 0px;
  padding: 0px;
  clear: both;
  width: 200px;
  max-height: 220px;
  white-space: normal;  /* 画像下のテキストをwidthで設定した幅で折り返させる */
  overflow: hidden;  /* 画像下のテキストがheightで設定した高さをはみ出す時はそれ以上表示させない */
}
.gazoline-sidebox img {
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 150px;
}

本サポートブログの左カラムの幅は200pxに設定してあるので、そこに表示させる画像リンクの画像幅も「width: 200px;」としています。この幅はご自身の設置箇所に応じて変更させてください。縦幅「height: 150px;」も同様です。

応用編

段組で表示させたい場合を考えてみます。例えばトップ6を3×2の段組で表示させるとこのようになります。



この時のhtmlは次のように組んでみました。

<div class="gazoline-midwrap">
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(1,'rss',1,false)</script>
  </div>
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(2,'rss',1,false)</script>
  </div>
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(3,'rss',1,false)</script>
  </div>
</div>
<div class="gazoline-midwrap">
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(4,'rss',1,false)</script>
  </div>
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(5,'rss',1,false)</script>
  </div>
  <div class="gazoline-midbox">
    <script type="text/javascript">gazoline.show(6,'rss',1,false)</script>
  </div>
</div>

ここでもパラメータBが「rss」なのでパラメータCは何を設定しても無視される点にご注意下さい。

cssはこんな感じです。画像を収納するboxの外に、boxを3×1で収納するwrapを設定しています。

.gazoline-midwrap {
  margin: 20px 0px;
  padding: 0px;
  width: 600px;
  height: 200px;
  clear: both;
}
.gazoline-midbox {
  margin: 0px 10px 0px 0px;
  padding: 0px;
  width: 190px;
  height: 200px;
  font-size: 11px;
  float: left;
  white-space: normal;  /* 画像下のテキストをwidthで設定した幅で折り返させる */
  overflow: hidden;  /* 画像下のテキストがheightで設定した高さをはみ出す時はそれ以上表示させない */
}
.gazoline-midbox img {
  margin: 0px;
  padding: 0px;
  width: 190px;
  height: 143px;
}

ここではwrapの横幅を600pxに設定し、box間の隙間を10pxとっています。従って画像の横幅は190px。画像のタテヨコサイズは200×150の比率を保つように、縦幅143pxに設定しました。
wrapとboxの縦幅は、画像の縦幅+テキストの表示部分の縦幅をざっくり計算して設定すると良いでしょう。

このように段組はがぞりんだからどうの、と言うことではなく、通常のcssを使ったスタイル設計と同様に考えて行って頂けます。

★ ワンポイントアドバイス ★
RSS情報を参照して画像リンクを表示させる場合、参照元記事のタイトルテキストが長いとデザインを崩してしまう可能性があります。上記のcssのようにwhite-spaceとoverflowを使ってテキスト表示を切ってしまうことをお勧めします。
なお、がぞりんでは「text-overflow: ellipsis;」は有効に働きませんのでご了承ください。

関連記事

コメント

お勧め記事トップ5

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

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

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

ピックアップ記事

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

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

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


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

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

人気記事紹介

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

パワープッシュ!

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