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


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

元画像の縦横比を変えずにリサイズして表示する方法

元画像の縦横比が変わってしまうのが気になるかたは、以下の方法でがぞりんコードを設置してください。

gazoline.show(0, 'label', 'resize_sample', '150x150t20')

上記は設定の一例ですが、ポイントは4番目のパラメータ「幅x画像高さtテキストの高さ」の指定で出力される画像リンクのサイズ指定できます。例えばこの元画像が170×150のオリジナルサイズだった場合、以下のように150×150にリサイズされて表示され、そのときに幅150pxからはみ出した左右10pxを切り取って表示します。
gazoline_size
この方法で表示された画像リンクは第4パラメータで指定されたサイズで出力しますので、ユーザ設定のスタイルと干渉しないようご注意ください。このようにがぞりんコードにサイズ指定するメリットは元画像の縦横比を保持するだけでなく、サイズ調整のためにCSSファイルを修正する手間も省ける点です。
また、がぞりんが指定するスタイルは図中のサイズのみなので、この方法においてもユーザ設定のスタイルを適用することできます。例えば、記事タイトルのテキスト部分を上部に持って行きたい場合や、テキスト部分を画像の上に透過パネルで表示したい場合など、お好みのスタイルを適用できます。そのサンプルについては別のページでご紹介したいと思います。

サイズ指定すると、以下のようような表示となります。

一方、がぞりんのリサイズを無効にして、ユーザ定義のCSSでサイズ設定した場合は以下のようになります。

前者のサイズ指定した場合のサンプルコードは以下です。

<!-- 当ブログのスタイルと干渉するので必要なプロパティを上書き -->
<style><!--
.gazoline_group { line-height: 0px; }
.gazoline_group div[name=gazoline] { float: left; margin: 0px 5px 0px 0px; line-height: normal; }
.gazoline_group img[name=gazoline_image] { max-width: none; }
--></style>
<div class="gazoline_group">
	<script>gazoline.show(0, 'label', 'resize_sample', '150x150t20')</script>
	<script>gazoline.show(0, 'label', 'resize_sample', '150x150t20')</script>
	<script>gazoline.show(0, 'label', 'resize_sample', '150x150t20')</script>
	<div style="clear: both;"></div>
</div>

関連記事

コメント

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

  1. この記事へのトラックバックはありません。

お勧め記事トップ5

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

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

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

ピックアップ記事

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

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

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


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

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

人気記事紹介

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

パワープッシュ!

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