Amazon アソシエイトで、テンプレート (XSLT) を使って画像の大きさを変更する方法

「Amazon アソシエイトで、画像の表示を自由に変更する方法」では、アマゾンにアクセスして得られる画像のリンクの仕様を紹介した。

これがわかれば、ブログの個々のページに貼付けた iframe（インライン）経由でアマゾンにアクセスし、XSLT を使って画像を表示するときにも応用できる。その方法は「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する方法」で紹介した通りであるが、このテンプレートを変更して画像の大きさを変えてみよう。

変更部分は青色で示した部分で、

select="concat(substring-before($image, '.jpg'), 'PC_.jpg')" /> <xsl:value-of select="<font color="blue">$height div 2"</font> /> $width div 2" />

大きな画像 (Large) を右からのドロップシャドウ付きで取得して、そのサイズの 1/2 の大きさで表示するというものである。

XSLT では、割り算は div を使い、アマゾンから取得した URL 文字列の操作は concat(substring-before($image, '.jpg'), 'PC_.jpg') で行っている。

<?xml version="1.0"?> 
<body>
    <a>
        <xsl:attribute name="href"  ><xsl:value-of select="$detail" /></xsl:attribute>
        <xsl:attribute name="target">_blank</xsl:attribute>
        <img>
            <xsl:attribute name="src"   >
            <xsl:value-of
                select="<font color="blue">concat(substring-before($image, '.jpg'), 'PC_.jpg')</font>" /></xsl:attribute>
            <xsl:attribute
                name="height"><xsl:value-of select="<font color="blue">$height div 2"</font> /></xsl:attribute>
            <xsl:attribute
                name="width" ><xsl:value-of select="<font color="blue">$width div 2</font>"  /></xsl:attribute>
            <xsl:attribute name="alt"   ><xsl:value-of select="$title"  /></xsl:attribute>
            <xsl:attribute name="title" ><xsl:value-of select="$title"  /></xsl:attribute>
            <xsl:attribute name="border">0</xsl:attribute>
        </img>
    </a>
</body>

admin

Tags

Comments