しらぎくモバイルシステムFULL 携帯端末向けに埋め込む画像を変更するには。

しらぎくモバイルシステムFULLでは、第0.9320版(平成22年 4月 2日)より<img>要素で埋め込む画像をPCとモバイルとで変える機能を追加しました。

PC向けに用意した画像が携帯端末では不適切と判断した際に、より適切な画像を代わりに表示させる事が可能になります。

携帯電話に対して埋め込む画像を変更する方法。

携帯電話に対して埋め込みたい画像を変更するには、当該<img>要素に対して、携帯電話向けの画像のURLを data-mobilesrc 属性で記述します。

更に、横幅及び高さが異なる場合には、携帯電話用の画像の横幅及び高さをそれぞれ data-mobilewidth 属性及び data-mobileheight 属性で指定します。

  • 通常の src, width, height 属性の前に data-mobile が付くと覚えてください。

data-mobile が前に付いた属性が併記されている場合、しらぎくモバイルシステムFULLでは data-mobile が前に付いた属性が優先されます。

  • 尚、alt属性など、上記の三属性以外についてはこのような記述はありません。

実際の記述例。

以下のHTMLをご覧ください。

<img alt="堀北真希ちゃん" src="HORIKITA_Maki-PC.JPG" width="600" height="800" data-mobilesrc="HORIKITA_Maki-Mobi.JPG" data-mobilewidth="240" data-mobileheight="320" />

この場合、しらぎくモバイルシステムFULLを通さない場合には、

  • src属性で示される、HORIKITA_Maki-PC.JPG が、
  • 幅600ピクセルズ
  • 高さ800ピクセルズで

表示されますが、しらぎくモバイルシステムFULLを通すと、

  • data-mobilesrc属性で示される、HORIKITA_Maki-Mobi.JPG が、
  • data-mobilewidth属性で指定された幅240ピクセルズ
  • data-mobileheight属性で指定された高さ320ピクセルズで

表示されます。

注意事項。

  • data-mobilesrc属性がない場合には、当然src属性が有効になります。同様に、
    • data-mobilewidth属性がなければ width属性が
    • data-mobileheight属性がなければ height属性が

    それぞれ有効となります。従って、幅と高さの片方だけPC向け画像と携帯端末向け画像とで違うと言う場合には違う方だけを記述すれば良い事になります。

  • data- で始まるユーザ定義属性は、HTML 5で新たに追加されたものです。従って、HTML 5以外でこの機能を用いた場合は不適合文書となります。