タグ/画像について
画像の自動処理について bookmark
ケータイキットは、ページ中に含まれている画像を自動的に変換し、各キャリア、各機種に合ったものに整形します。
サイズの自動縮小 bookmark
表示する端末の液晶サイズより大きい場合は、横幅に合わせて縦方向も同じ比率で縮小されます。
また、ケータイキットVer.1.21からは、液晶サイズに合わせて縮小したあとの画像のデータサイズが、まだ携帯電話端末のキャッシュサイズより大きな場合、横幅・縦幅を20%ずつ縮小し、再度画像生成を試みます。
携帯電話端末のキャッシュサイズを下回るサイズになるまで、その処理は繰り返されます。
色数・フォーマットの自動変換 bookmark
また表示する端末の色数が少ない場合や、その端末が対応していないフォーマットの場合も、自動的に変換されます。
画像URLにPHP変数を使用する場合 bookmark
この機能はVer.1.61から適用されます
PHPにより画像URLを動的に変更する場合は、以下のように$変数名をsrc属性に指定し、テンプレートを記述します。
<?php $url = '<画像のURL>'; ?> <img src="$url" />
ケータイキットでは、画像の自動変換のためimg要素全体をPHPスクリプトに置き換えます。そのため、下記のように記述を行うと画像変換が正しく行われません。
<!-- 動作しない例 --> <img src="<?php echo $url ?>" />
スタイル指定による処理 bookmark
imgタグのstyle属性に独自スタイルを記述することにより、処理のさせ方を変えることができます。
トリミング処理 （keitai-fit拡張スタイル） bookmark
この内容はVer.1.20から適用されます
画像サイズが携帯の画面より大きい場合に、はみ出た部分をカット（トリミング）して表示させることが出来ます。
縮小されると画像が見難くなってしまう場合は、keitai-fitスタイルを使い、適切な位置でカットしてください。
例のように、left、right、centerを指定して、トリミングする部位を変えることが出来ます。縦方向のトリミングは行われません。
なお、Ver.1.40からは、keitai-crop、keitai-trimと記述することもできます。
使用例 bookmark
<!-- 左側をトリミングし、右側を表示します --> <img src="/title.jpg" style="keitai-fit: right;" />
<!-- 両端をトリミングし、中央を表示します --> <img src="/title.jpg" style="keitai-fit: center;" />
自動変換の抑制 （keitai-convert拡張スタイル） bookmark
この内容はVer.1.21から適用されます
imgタグのstyle属性に下記のように指定することで、画像の自動変換を抑制できます。
<img src="xxx.jpg" style="keitai-convert: no;" />
携帯用のログ解析ツールには、ビーコンとして画像埋め込み式のものがいくつかあり、自動変換を行うとキャッシュが作成され、正しくログ解析ができませんでした。ビーコンを埋め込む場合などはこのスタイルを指定してください。
著作権保護機能 bookmark
この内容は1.30から適用されます
imgタグのstyle属性に下記のように指定することで、画像を携帯電話上のデータフォルダなどに保存する操作を抑制し、著作権を保護することができます。
<img src="xxx.jpg" style="keitai-copyright: yes;" />
著作権保護機能は、ブログ単位の設定でも設定することができます。ブログ単位の設定で著作権保護機能を有効にした場合、次のようにimgタグを記述することで、その画像についてのみ、著作権保護機能を無効にすることができます。
<img src="xxx.jpg" style="keitai-copyright: no;" />
具体的に著作権保護機能を利用すると、アクセスしたキャリアに応じて画像に対し、次の処理を行います。
- iモードの場合
- 画像データのコメントヘッダに「copy="NO"」を埋め込みます。
- EZwebの場合
- 画像データのコメントヘッダに「kddi_copyright=on」を埋め込みます。
- Softbankの場合
- 画像送信のHTTPヘッダに「x-jphone-copyright: no-store」を追加します。
いずれのキャリアでも、携帯端末のデータフォルダに保存し、閲覧する操作までが可能ですが、メールに添付したり、メモリーカードに移動やコピーする操作が禁止される状態となります。
サイズ変換の基準ディスプレイ bookmark
この内容はVer.1.47から適用されます
画像変換は、各機種についてキャリアから公表されているブラウザの表示幅に基づいて行われます。ただし機種によっては、スクロールバーが表示されない条件があるなどして、隙間が生じることがあります。
img要素に次の拡張スタイルを指定することで、サイズ変換の基準を液晶ディスプレイ全体の幅として隙間の発生を抑えることができます。
<img src="image.jpg" style="keitai-display:screen" />
この基準ディスプレイの設定は、プラグイン設定画面からシステム全体やブログ単位でも変更することができます。
逆に全体として液晶画面を基準にすることを選択し、一部の画像だけをブラウザ画面を基準にするには、次のようにkeitai-display拡張スタイルにbrowserを指定します。
<img src="image.jpg" style="keitai-display:browser" />
携帯用に別画像を指定する方法 bookmark
この内容は1.30から適用されます
ひとつのimgタグで、通常の画像と携帯用の画像の二種類を指定するには、次のように記述します。
<img src="xxx.jpg" keitai:src="m/xxx.jpg" />
MTKeitaiKitテンプレート・タグを使用したテンプレートでのみ、keitai:src属性で指定した画像が表示されます。
MTKeitaiKitテンプレート・タグを使わないテンプレートでは、src属性に指定した画像が表示されます。
特殊なスタイルの表記方法 bookmark
この内容は1.30から適用されます
style属性内に指定できる、keitai-fit、keitai-convert、keitai-copyrightなどの拡張スタイルは、keitai:style属性を使い、次のように書き換えることができます。
<img src="xxx.jpg" keitai:style="fit: left; convert: no; copyright: yes;">
画像のリンク化スタイル bookmark
この内容はVer.1.35から適用されます
大きなサイズの画像はリンク化し、選択した場合に表示することができます。MTKeitaiLinkImagesテンプレート・タグを使っても同様の処理ができますが、画像の拡張スタイルを指定することにより、個別にリンク化することができます。
keitai-link-over bookmark
imgタグのstyle属性にkeitai-link-overを指定することで、画像が指定したサイズより大きな場合にリンク化することができます。
下限となる画像サイズをバイト数を指定するか、キャッシュサイズに対する割合を%で指定します。
MTKeitaiLinkImagesのover属性を参照してください。
keitai:style属性にlink-overを指定することでも同じ効果が得られます。
keitai-link-format bookmark
リンク化する場合のリンクテキストを表示します。MTKeitaiLinkImagesのformat属性と同じ記号を使うことができます。
keitai:style属性にlink-formatを指定することでも同じ効果が得られます。
keitai-link-before bookmark
この機能は1.38から適用されます。
リンク化する場合のリンクテキストの配置を指定できます。省略した場合は、imgタグによる画像が配置されていた文脈に沿って、配置されます。
keitai:style属性にlink-alignを指定することでも同じ効果が得られます。
- left
- 左寄せにします。
- center
- 中央寄せにします。
- right
- 右寄せにします。
keitai-link-before bookmark
この機能は1.38から適用されます。
リンク化する場合のリンクテキストの前に配置する文字列を指定します。
keitai:style属性にlink-beforeを指定することでも同じ効果が得られます。
keitai-link-before bookmark
この機能は1.38から適用されます。
リンク化する場合のリンクテキストの後に配置する文字列を指定します。
keitai:style属性にlink-afterを指定することでも同じ効果が得られます。
keitai-link-thumbnail bookmark
keitia-link-formatでサムネイル(%t)を指定したときのサムネイルサイズをピクセル数またはブラウザ幅に対するパーセンテージで指定します。MTKeitaiLinkImagesのthumbnail属性を参照してください。
keitai:style属性にlink-thumbnailを指定することでも同じ効果が得られます。
keitai-link-page bookmark
keitai-link-pageはVer.1.47から利用できます
リンク先を画像そのものではなく、画像表示用のページに設定する場合にURLを指定します。MTKeitaiLinkImagesのpage属性に相当します。
keitai:style属性にlink-pageを指定することでも同じ効果が得られます。
keitai-link-caption bookmark
keitai-link-captionはVer.1.47から利用できます
リンク先を画像そのものではなく、画像表示用のページに設定する場合に、そのページに渡す画像のキャプションを指定します。keitai-link-formatと同じ書式記号を利用できます。MTKeitaiLinkImagesのcaption属性に相当します。
keitai:style属性にlink-captionを指定することでも同じ効果が得られます。
画像の最大化表示 bookmark
この内容はVer.1.40から適用されます
keitai-maximize bookmark
keitai-maximize拡張スタイルにonを指定すると、液晶画面に対し、画像を最大化して表示します。縦長の液晶画面に対し、横長の画像を表示する場合は自動的に90度回転されます。
使用例 bookmark
<!-- 強制的に画像をリンク化します --> <img src="image.jpg" style="keitai-link-over: 0" />
<!-- ブラウザ幅の25%のサムネイルを用い、画像をリンク化します --> <img src="image.jpg" keitai:style="link-over: 0; link-format: %t; link-thumbnail: 25%" />
画像キャッシュ期間の指定 bookmark
この内容はVer.1.43から適用されます
keitai-cache-expires拡張スタイルに秒数を指定すると、変換後の画像をキャッシュする有効期間を調整することができます。頻繁に変更される画像や、キャッシュを抑制したい画像に有効です。
この機能は、keitai:style属性にcache-expiresプロパティを指定することでも実現できます。
使用例 bookmark
<!-- 特定の画像のキャッシュ期間を5分にします --> <img src="image.jpg" style="keitai-cache-expires: 300" /> <!-- 特定の画像ではキャッシュ処理を無効にします --> <img src="image.jpg" style="keitai-cache-expires: 0" />
画像解像度の特別な指定方法 bookmark
img要素はケータイキットにより画像変換を行うPHPスクリプトに置換され、widthとheightの属性値も画像変換に反映されます。
その際、width、height属性に%による値を指定すると、携帯電話に表示されるimg要素にもその値が反映されます。これは、携帯電話上での画像のサイズを、より制作の意図に近づけるためですが、table要素内などで使用すると、意図しないサイズで画像が表示される可能性があります。
そこで、width、height属性の代わりに、keitai:width、keitai:height属性を用いると、それらの属性値は、HTML上のimg要素に反映されず、画像の変換のみを行います。
これにより、table内で画像を用いても、意図しないサイズで表示されることがなくなります。
<table>
<tr>
<td width="50%">
<!-- この画像は画面全体に対し、約25%の幅で表示されます -->
<!-- ※幅50%のtdに対し50%の幅となるため -->
<img src="画像A" width="50%" />
</td>
<td>
<!-- この画像は画面全体に対し、約50%の幅で表示されます -->
<!-- ※img要素にwidth属性が継承されないため -->
<img src="画像A" keitai:width="50%" />
</td>
</tr>
</table>
タグによる処理 bookmark
画像のリンク化タグ （MTKeitaiLinkImagesタグ） bookmark
画像が多用されるブログでは、MTKeitaiLinkImagesタグ[タグ/画像リンク]を利用して、文中に画像は表示せず、画像へのリンク文字に変換することが出来ます。
取得元のサーバに基本認証が必要な場合 bookmark
この機能はVer.1.20から適用されます
ブログ毎のプラグイン設定に、画像の取得に基本認証が必要な場合のユーザ名とパスワードを設定する項目があります。公開前のサーバなどで基本認証が設定されている場合にご利用ください。
複数のユーザ名とパスワードをアットマーク(@)区切りで指定します。改行してつなげることで、複数の組み合わせを登録できます。
まず最初は認証情報無しで取得を試み、正常に取得ができなかったら、最も上の組み合わせから試していきます。
画像のローカル参照 bookmark
ケータイキットでは通常、画像変換を行う際に、元の画像が同一のサーバにある場合でも、HTTP経由で取得します。
DocumentRootを指定することで、画像のURLがhttp://から始まらない場合(images/image.jpgや/images/image.jpgなど、サーバー内のファイルを直接参照させることができます。
詳しくはこちらを参照してください。
* 「iモード」「iアプリ/アイアプリ」「i絵文字」「mova」「FOMA」および「i-mode」「i-appli」ロゴはＮＴＴドコモの商標又は登録商標です。
* 「EZweb」「EZアプリ(Java[TM])」「au」はKDDI株式会社の登録商標です。
* ｢Yahoo!｣および｢Yahoo!｣｢Y!｣のロゴマークは、米国Yahoo!Inc.の登録商標または商標です。
* SOFTBANKおよびソフトバンクの名称、ロゴは日本国およびその他の国におけるソフトバンク株式会社の登録商標または商標です。
* その他、当ページに記載されている会社名、製品名などは該当する各社の商標または登録商標です。
