カテゴリページの画像を大きくする裏技の使い方
下のhtmlをヘッダー・レフトナビ・フッターまたはカテゴリページの編集画面に記述するだけでカテゴリページの画像は大きくなります。<style>
#risFil .categoryWindowImg {
width: 230px !important;
height: 230px !important;
}
</style>
<body onpageshow="
jQuery(document).ready(function ($) {
$('table').each(function () {
var src = jQuery(this).html();
jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=230:230'));
});
});
"></body>
htmlは2つの手順で構成されています。
- 画像のサイズを大きくする
- 画像がぼやけないようにする
１．画像のサイズを大きくする
商品画像のサイズを大きくすることは簡単です。外部CSSもしくはstyleタグに下のCSSを記述するだけです。#risFil .categoryWindowImg {
width: 230px !important;
height: 230px !important;
}
しかし、これだけでは充分ではありません。
実際は縦横128pxの画像を230pxに引き伸ばして大きく見せているだけですので、画像はぼやけてしまいます。
この問題は次の手順で解決します。
２．画像がぼやけないようにする
画像がぼやけないようにJavaScriptを使用します。<body onpageshow="
jQuery(document).ready(function ($) {
$('table').each(function () {
var src = jQuery(this).html();
jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=230:230'));
});
});
"></body>
具体的には画像URLの末尾についている『?fitin=128:128』（URLパラメータ）の数値をJavaScriptを用いて書き換えます。
URLパラメータの数値を置換することで画像のサイズが変わります。
例
?fitin=128:128を?fitin=230:230に置換すると縦横128pxの画像が230pxサイズの画像になります。
