高度な機能 — インタラクティブAPIデバッガー

60種類以上の多言語フォント、5000以上のアイコン、9つの画像フォーマット、グラデーションテクスチャ、テキストハイライト — すべてのパラメータをリアルタイムでプレビューできます

MockImg プレースホルダーライブプレビュー
基本設定
×
比率
パディングなし—
極コンパクト1/20
コンパクト1/10
標準1/8
ゆったり1/6
デフォルト1/5
かなりゆったり1/4
最大1/3
上下 + 左右
短いテキスト1/10,1/20
バナー1/4,1/20
上 / 右 / 下 / 左
タイトルエリア40,10,5,10
左ナビ20,10,20,60
テキストスタイル
自動
背景 & ボーダー
100%
オフ
85
アイコン設定
自動
テキストハイライト [ガイドを見る]

アイコンシステム

5000以上のTabler IconsをOutlineとFilledスタイルでサポート。サイズもカスタマイズ可能

アイコンサイズ 48
Tabler Icons プレビュー

ドキュメントとリファレンス

完全なAPIパラメータリファレンス、テキストハイライトガイド、アイコンのみ表示モード

基本構文

hl_syntax_desc

# 構文フォーマット
?text=通常テキスト{{ハイライトテキスト}}通常テキスト続き
&hlcolor=FF5733

パラメータ詳細

hlcolor hl_param_hlcolor

hl_param_hlcolor_desc

hl_example_prefix： ?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2 hl_param_hlcolor2

hl_param_hlcolor2_desc

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient hl_param_hlgradient

hl_param_hlgradient_desc

horizontal 水平（左から右） vertical 垂直（上から下） diagonal 対角（左上から右下）
hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont hl_param_hlfont

hl_param_hlfont_desc

hl_example_prefix： ?text={{Brand}}&hlfont=Poppins-Bold
hlbold hl_param_hlbold

hl_param_hlbold_desc

hl_example_prefix： ?text={{Important}}&hlbold=true

具体例

hl_example_prefix 1：hl_ex1_title
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

hl_effect_prefix"MockImg.Dev" — Img が赤色で表示

hl_example_prefix 2：hl_ex2_title
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

効果："Gradient" がピンクから紫への水平グラデーションで表示

hl_example_prefix 3：hl_ex3_title
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

効果："MockImg" が Poppins-Bold フォントで青色表示

hl_example_prefix 4：hl_ex4_title
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

効果："Important" が赤色の太字で表示

hl_example_prefix 5：hl_ex5_title
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

効果："Premium" が対角グラデーション（金から赤）で Montserrat-Bold フォント表示

hl_example_prefix 6：hl_ex6_title
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

効果："MockImg" とプレースホルダーテキストが両方青色表示（共通ハイライトスタイル）

hl_example_prefix 7：hl_ex7_title
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

効果："MockImg" が緑色表示、残りはデフォルトカラー

hl_example_prefix 8：hl_ex8_title
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

効果：ダークテーマで "Mode" が金色のハイライトで表示

注意事項

  • hl_note_1
  • hl_note_2
  • hl_note_3
  • hl_note_4
  • hl_note_5

トリガー条件

  • icon パラメータを指定
  • text パラメータなし、または text が空

アイコンサイズルール

自動：アイコンサイズ = 画像の短い辺の 80%（最小24px、最大90%）

カスタム：iconsize パラメータで自動計算を上書き

例

単色アイコン
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

効果：赤いハートアイコンが自動拡大・中央配置

グラデーションアイコン
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

効果：星アイコンにゴールドからレッドの対角グラデーション

透過 + アイコン
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

効果：ユーザーアイコンが透過背景上 — アバターに最適

グラデーション背景 + 角丸
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

効果：白いハートアイコンがピンクのグラデーション背景上、角丸付き

ダークテーマ + アイコン
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

効果：ゴールドの星アイコンがダーク背景上

円形ボーダー（アバター）
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

効果：ユーザーアイコンがボーダー付き円形 — アバタープレースホルダーに最適

アイコン+テキスト vs アイコンのみ

モード URL 効果
アイコンのみ（テキストなし） ?icon=outline/heart アイコンが自動拡大・中央配置、テキストなし
アイコン + 空テキスト ?icon=outline/heart&text= アイコンのみと同じ
アイコン + テキスト ?icon=outline/heart&text=Love アイコンとテキストが並んで表示（従来の動作）
アイコンなし テキストなし 600x400.png サイズテキスト（デフォルトの動作）

注意事項

  • すべての出力フォーマットに対応（SVG、PNG、JPEG、WebP、AVIFなど）
  • すべてのアイコンパラメータ（iconcolor、iconcolor2、icongradient、iconsize）が通常通り動作
  • すべての背景エフェクト（透過、グラデーション、パターン、ノイズ、ボーダー、角丸）をアイコンのみモードと組み合わせ可能
  • 小さいサイズでも動作 — ファビコンに最適：32x32.ico?icon=filled/star&iconcolor=FFD700

概要

padding パラメータは、プレースホルダー画像内のテキストとアイコンの周りの余白を制御します。4つのフォーマットをサポート：統一ピクセル値、統一比率、2値（上下＋左右）、4値（CSS 時計回り）。

# サポートされるフォーマット
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

デフォルト動作

padding パラメータを省略した場合、組み込みのデフォルト値が使用されます（旧バージョンと同じ動作）：

左右：画像幅の 5% 上下：画像高さの 20%

フォーマット詳細

20 統一ピクセル値

4辺すべてに同じピクセル値を適用します。

padding=20
1/6 統一比率値

4辺すべてに比率を適用します。上下は画像の高さ、左右は画像の幅に基づきます。結果は自動的に四捨五入されます。

padding=1/6  →  600×400 → 上下 67px、左右 100px
10,20 2値（上下＋左右）

垂直と水平の余白を個別に制御します。ピクセルと比率を混用できます。

padding=10,20  →  上下各 10px、左右各 20px
padding=1/8,15  →  上下 = 高さ/8、左右各 15px
padding=30,1/10  →  上下各 30px、左右 = 幅/10
10,20,30,40 4値（CSS 時計回り）

CSS スタイルの4辺独立制御：上、右、下、左。上下は高さ、左右は幅に基づきます。ピクセルと比率を混用できます。

padding=10,20,30,40  →  上10 右20 下30 左40（すべてピクセル）
padding=1/8,1/6,15,1/10  →  上 h/8 右 w/6 下 15px 左 w/10（混用）

使用例

短いテキスト — 余白を減らす
https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

"IP" のような短いテキストに padding=1/10 を使用してコンパクトに。

余白なし
https://mockimg.dev/600x400.svg?text=Full&padding=0

padding=0 でコンテンツを画像全体に広げます。

アイコン＋テキスト — コンパクトレイアウト
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

アイコンとテキストを並べて表示、適度な余白。

タイトルエリア — 上部に大きな余白
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

上部の余白を大きくしてタイトル感を演出、下部はコンパクト。

左ナビ — 左側に大きな余白
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

左側の余白を大きくしてナビゲーションバーに対応。

注意事項

  • 比率値の分子と分母は正の数である必要があります
  • ピクセル値は負にできません。負の値は自動的に 0 に修正されます
  • 比率の計算結果は自動的に整数に丸められます
  • パディングが大きすぎる場合（画像サイズの半分を超える）、コンテンツ領域が非常に小さくなり、フォントサイズは自動的に最小 12px になります