Skip to content

README_jp.md

Latest commit

 

History

History
465 lines (311 loc) · 16.7 KB

README_jp.md

File metadata and controls

465 lines (311 loc) · 16.7 KB


GH Contributors Codecov Issues GH pull requests

English · 한국어 · Español · Français · Deutsch
简体中文 · 繁體中文 · 繁體粤语 · Português (Brasileiro) · 日本語 · മലയാളം


Tip

簡易的な Generatorもご利用いただけますが、より細かなカスタマイズをご希望の場合は、ぜひREADMEをご一読いただくことをおすすめいたします。

Important

This service is provided on a best-effort basis and may be unstable due to usage limits or traffic spikes.

For reliable use, please fork the repository and deploy it to your own Vercel instance (or another hosting platform).

Navigation

  1. How to Use
  2. Types
  3. Color
  4. Custom Color List
  5. Section
  6. Reversal
  7. Height
  8. Text
  9. Desc
  10. Text Background
  11. Text Animation
  12. Font Color
  13. Font Size
  14. Font Align - X
  15. Font Align - Y
  16. Desc Size
  17. Desc Align - X
  18. Desc Align - Y
  19. Rotate
  20. Demo

機能やアイデアのご提案 -> Idea-Issue or PR

使用方法

以下のURLに、query parameterを入力してご利用ください。

https://capsule-render.vercel.app/api?

Markdown:

![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90)

HTML:

<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300&section=header&text=capsule%20render&fontSize=90" />

Types

Typeデータによって背景画像が変更されます。

&type= にデータを入力して使用します。

![header](https://capsule-render.vercel.app/api?type=slice)

Color

背景画像の色を変更してください！

  • &color=auto : 検証済みのランダムなカラーを提供します。 検証済みリスト
  • &color=timeAuto : 検証済みのランダムなカラーを提供しますが、時間（分）によって決まります。
  • &color=random : 完全にランダムな色が生成されるため、表示される色は予測できません。
  • &color=gradient : 検証済みのランダムなグラデーションを提供します。 検証済みリスト
  • &color=timeGradient : 検証済みのランダムなグラデーションを提供しますが、時間（分）によって決まります。
  • &color=_hexcode : カスタムの16進数カラーコード（hexcode）を入力して使用します。（初期設定値：B897FF）
  • &color=_custom_gradient : カスタムのグラデーションを入力して使用します。たとえば &color=0:EEFF00,100:a82da8 と入力すると、{ 0%: 'EEFF00', 100%: 'a82da8' } のように適用されます。 (例: DEMO)

auto モードを使用する場合は fontColor を指定する必要はありません。 autoモードでは、フォントカラーも自動的に設定されます。

![header](https://capsule-render.vercel.app/api?color=auto)

固定のカラー（hexcode）を使用する場合は、『#』を付けないでください。

timeAuto および timeGradient 、どのような場面での使用が想定されますか？

複数の画像やセクション（例：header や footer）などで、同一の色を同時に使用したい場合に利用します。

Custom Color List

&color=auto および &color=gradient はランダムに色を表示しますが、表示される色の一覧をユーザー自身でカスタマイズして指定することができます。

まず &customColorList= を記述します。

  • &color=auto を使用する際は pallete list をご参照ください。
  • &color=gradient を使用する際は gradient list をご参照ください。

希望するパターンを選択し、その idx の値を控えておいてください。

例えば、idx が 0、2、3 のパターンを使用したい場合は、&customColorList=0,2,3 のように指定します。

また、idx=2 の値をより頻繁に表示させたい場合は、その値を繰り返し記述する方法もあります。（例：&customColorList=0,2,2,2,2,3）

![header](https://capsule-render.vercel.app/api?color=gradient&customColorList=0,2,2,5,30)

Theme

theme= を使用して、あらかじめ定められた組み合わせを指定することができます。

color や fontColor を指定した場合でも、themeの優先順位が最も高くなります。

利用可能なテーマの一覧は、こちらのpallete_theme.jsonをご確認ください。

![reversal](https://capsule-render.vercel.app/api?type=rect&text=RECT&fontAlign=30&fontSize=30&desc=Use%20theme&descAlign=60&descAlignY=50&theme=radical)

現在、 Link:themeにて、テーマの組み合わせを少しずつ追加しています。ご協力いただけますと幸いです。

Section

section データは背景画像を反転させます。

  • &section=header : (default)
  • &section=footer
![footer](https://capsule-render.vercel.app/api?section=footer)

Reversal

左右を反転させます。（グラデーションも同時に反転します）

  • &reversal=false : (default)
  • &reversal=true
![reversal](https://capsule-render.vercel.app/api?type=slice&reversal=true&color=gradient)

Height

高さを変更します。初期値は120です。

![header](https://capsule-render.vercel.app/api?height=400)

px 単位ですが、単位の記述は不要です。

Text

画像に文字を記入します。

![header](https://capsule-render.vercel.app/api?text=Hello%World!)

特殊文字（'#', '&', '/' など）は直接使用できません。

これはAPIの動作を混乱させる原因となります。

空白を入力する場合は %20、改行を入力する場合は -nl- をご利用ください。

Desc

画像に補足説明を記入できます。

![header](https://capsule-render.vercel.app/api?height=400&text=Hello%20World!&desc=Hello%20capsule%20render)

特殊文字（'#', '&', '/' など）は直接使用できません。

これはAPIの動作を混乱させる原因となります。

空白を入力する場合は %20、改行を入力する場合は -nl- をご利用ください。

Text Background

テキストに背景を付けます。

&textBg=true を指定すると有効化できます。

背景の大きさを大きくしたい場合は、text の値に %20（スペース）を追加してください。 背景の大きさはテキストの長さに応じて変わります。

![header](https://capsule-render.vercel.app/api?type=rounded&color=gradient&text=%20asdf%20&height=300&fontSize=100&textBg=true)

Text Animation

テキストにアニメーションを追加します。

  • fadeIn : fadeIn 1.2s
  • scaleIn : scaleIn .8s
  • blink : blink .6s
  • blinking : blinking 1.6s
  • twinkling : twinkling 4s
![header](https://capsule-render.vercel.app/api?text=capsule_render&animation=fadeIn)

FontColor

テキストの色を変更します。初期値は000000です。

値は「#」を除いた16進数のカラーコード(Hxcodee)で指定してください。

Text クエリを使用した後に、&fontColor= を指定してください。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontColor=d6ace6)

FontFamily

Change text font family.

Write &fontFamily= behind Text query.

Use %20 for spaces in font names.

fontFamily is applied as CSS font-family, but actual rendering depends on fonts available in the rendering environment. If a font is unavailable, fallback fonts are used.

![header](https://capsule-render.vercel.app/api?text=Hello%20World!&fontFamily=Segoe%20UI)

FontSize

テキストのサイズを変更します。初期値は70です。

Text クエリを使用した後に、 &fontSize= を指定してください。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40)

px 単位ですが、単位の記述は不要です。

FontAlign

テキストの横方向の配置（x座標）を変更します。 0~100の範囲で指定可能です。

&fontAlign= : 初期値は50で、画像の中央を意味します。

&text= に複数行（例：-nl-）がある場合、複数の &fontAlign= を指定すると、各行に個別の横位置が適用されます。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70)

FontAlignY

テキストの縦方向の配置（y座標）を変更します。0〜100の範囲で指定可能です。

&fontAlignY= : 初期値は50で、画像の中央を意味します。複数行を-nl-で指定した場合、初期設定では行が重なるように積み重ねられ、中央に配置されるよう計算されます。

&text= に複数行（例：-nl-）がある場合、複数の &fontAlignY= を指定すると、各行に個別の縦位置が適用されます。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20)

DescSize

descのフォントサイズを変更します。初期値は20です。

desc クエリを使用した後に、 &descSize= を指定してください。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=40&desc=Desc&descSize=30)

px 単位ですが、単位の記述は不要です。

DescAlign

descの横方向の配置（x座標）を変更します。0〜100の範囲で指定可能です。 ** &descAlign= : 初期値は50で、画像の中央を意味します。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlign=70&desc=Desc&descAlign=20)

DescAlignY

descの縦方向の配置（y座標）を変更します。0〜100の範囲で指定可能です。

&descAlignY= : 初期値は50で、画像の中央を意味します。

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontAlignY=20&desc=Desc&descAlignY=40)

Rotate

&rotate= はテキストを回転させます。

負の値も指定可能です。

☞ 0 ~ 360, 0 ~ -360.

![header](https://capsule-render.vercel.app/api?text=Hello%World!&fontSize=20&rotate=-30)

Stroke

テキストのストローク（輪郭線）の色も変更できます。

Hexコードは「#」を除いて指定してください。

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00)

strokeWidth（ストロークの太さ）も併せて指定することをおすすめします。

もし stroke のみを指定した場合、strokeWidth の初期値は 1 になります。

Stroke-width

テキストのストローク（輪郭線）の太さを変更できます。

stroke を設定した後、&strokeWidth= を使用してください。

指定する値は 0以上 にしてください。

![header](https://capsule-render.vercel.app/api?type=rect&height=200&text=Stroke%20Test&fontAlign=70&stroke=00FF00&strokeWidth=3)

stroke と一緒に使用することをおすすめします。

strokeWidth のみを指定した場合、stroke の色はデフォルトで 'B897FF' が使用されます。

Demo

Wave

wave

Egg

egg

Shark

shark

Slice

slice

Rect

rect

Soft

soft

Rounded

rounded

Cylinder

cylinder

Waving

waving

Transparent

transparent

Venom

venom

Speech

speech

Blur

blur