Template:CSS image crop

テンプレートの解説表示編集履歴キャッシュを破棄

{{CSS image crop}}は、画像をトリミングしてインラインで表示するテンプレートです。主に次のような目的で使います。

• ページでの見た目を確認するため。
• 記事中には少しトリミングして表示したほうが望ましいが、元のフル画像のほうが百科事典的な価値が高く、フル画像へリンクしたい場合。

トリミングして元の画像の一部だけを使う場合は、利用者に毎度余分な画像データを読み込ませる必要がないように、トリミングした画像を新しいファイルとしてアップロードするほうがよいとされています。

このテンプレートは画像のトリミング範囲をピクセル(px)単位で計算します。大抵は、パーセンテージでトリミング範囲を決められる{{Easy CSS image crop}}のほうが簡単に使えます。

使用法

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

※|Link=オプションを使う場合、著作権の帰属表示に注意してください。帰属表示義務のある画像の場合、画像からファイルページへリンクしていないと著作権侵害になります（Help:画像の表示#画像リンク参照）→その場合、|magnify-link=にファイル名を指定すると帰属表示のためのリンクを確保できます。

例

フル画像

加工前のフル画像（表示幅400px）

トリミング例1

上の画像から水滴1粒をトリミングする場合:

• ベース画像（加工前）の幅: オフセットとトリミング画像の領域は、加工前の画像の幅を bSize と仮定して算出します。例では、|bSise=400（幅400px）と入力すると、高さが287pxになります（高さは表示されないので、手計算する必要があります）。画像オリジナルサイズの幅（例では2,802px）を使う必要はなく、トリミング後のサイズから考えて適度に縮小したピクセル幅を指定します。
• oで始まるオフセット値: oTop および oLeft でトリミングした画像の上左角の位置を決めます。例では、幅400px×高さ287pxに対して、左から60px・上から180pxをトリミング画像の左上（開始点）に指定しています。
• cで始まるトリミングサイズ: cWidth および cHeight でトリミングした画像のサイズを決めます。例では、左から60px・上から180pxの開始点から、（右へ）幅100px・（下へ）高さ100pxをトリミング範囲に指定しています。よって、左から(60+100=)160px・上から(180+100=)280pxがトリミング画像の右下（終了点）になります。

{{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（中央寄せ、右寄せ、左寄せ、なし※左寄せですが、leftは文字が回り込むのに対し、noneは回り込みません。）の4つが指定できます。
• |Description= でキャプションの説明文を指定します。

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

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

スクリプト

mw.loader.load('https://ja.wikipedia.org/w/index.php?title=User:川谷大毅/easy crop.js&action=raw&ctype=text/javascript');

を自身のcommon.jsへ追加すればより簡単にトリミングが可能です。

カテゴリ

cWidth, cHeight, oTop, oLeftに数字以外などの無効な値が入力されている場合は、追跡カテゴリとしてCategory:CSS image crop using invalid parametersが付与されます。

関連項目

• {{Easy CSS image crop}} - 似た機能でより使いやすいテンプレート。パーセンテージで切り抜きます。
• {{Annotated image}} - 説明文テキストを画像に重ねるテンプレートです。このテンプレートと組み合わせて使うことができます。
• {{File clip}} - 似た機能でパーセンテージで切り抜きます。ただし、モバイルビューで表示の不具合が報告されています（2026年6月時点）。

この解説は、Template:CSS image crop/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。