Template:CSS image crop

{{CSS image crop}}は画像の見た目とルック・アンド・フィールをインラインで確認するため画像をたち落としたり (トリミング)、あるいは記事中には少しトリミング処理して表示し、元の未処理の画像とリンクする場合に使う。通常は画像全体を表示するほうが百科事典にふさわしい。

画像をトリミングして元の画像の小さな部分だけを使用する場合は、使用する部分だけを新しい画像ファイルとしてアップロードする。利用者が受信する画像データを軽くするため、この処理が推奨される。

注記：以前の不具合として「left」と「right」が機能しなかったとき、回避策として「tleft」「tright」などを使用した。その不具合が解消された現在、かえって回避策の影響をページに残さないため、このテンプレートはtrightまたはrightの使用に関わらず、画像を正しく機能するように設計された。詳細はテンプレートの議論のページを参照。

こちらを直接呼ぶより、{{Easy CSS image crop}}を使ったほうが簡単かもしれません。

使用法

{{CSS image crop
|Image         = 画像ファイル名もしくは{{Annotated image}}。
|bSize         = ベース画像 (加工前) の幅、単位はピクセル (トリミング作業を行う画像の大きさ)
|cWidth        = クロップ画像 (加工後) の幅、単位はピクセル
|cHeight       = クロップ画像の高さ、単位はピクセル
|oTop          = 上辺のオフセット、単位はピクセル、オプション。既定では空欄で 0
|oLeft         = 左辺のオフセット、単位はピクセル、オプション。既定では空欄で 0
|Location      = 'right', 'left', 'center' or 'none' （左・右・中央・なし）. ページ上の画像の位置指定
                 既定では説明の文字列を入力すると右に配置 (サムネール画像の既定値と同一の 'right' )
                 説明の文字列が空欄の場合、左に配置 (サムネール以外の既定値と同一の 'left' )
|Description   = 説明の文字列 (サムネイルクラスを用いてレンダリング)
|Link          = 画像をクリックしたとき表示される記事のリンク (リンク先を画像にせず記事にする条件は、十分な理由がある場合に限定)。
|Alt           = 画像の代替文字列。
|Page          = 複数ページある (PDF ファイルなどの) 場合、ファイルが掲載されたページ番号。
|magnify-link  = 虫眼鏡アイコンをクリックしたときに開くファイル名 (もしも画像パラメータが {{Annotated image}} を指定、もしくは Link パラメータが画像以外を指す場合)。
}}

もし上記のパラメータを一つでも間違って使用した場合は、その記事はCategory:CSS image crop using invalid parametersというカテゴリに収載される。

例

元データ

加工前のファイルのサムネール

トリミング例1

水滴1粒をトリミングした画像を作る場合:

oで始まるオフセット値: oTop および oLeft でトリミングした画像の上左角の位置が決まる
cで始まるトリミングサイズ: cWidth および cHeight でトリミングした画像のサイズが決まる
Base Size: オフセットとトリミング画像の領域は加工前の画像の幅を bSize と仮定して算出

{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}

トリミング例2

上記に加え、トリミング済みの画像にキャプション文字列を添え、ページ上に配置できる

Location= により位置指定が中央・右・左・なしに決定 (center, right, left, none)
Description= によりキャプション欄に文字列を追加

草の葉に載った水滴 (水滴にピントが合っている)

{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = 草の葉に載った水滴 (水滴にピントが合っている)
}}

使用法

例

元データ

トリミング例1

トリミング例2

関連項目