画像加工と編集
GIFアニメ作成
GIF再編集(分解・再設定)
GIFアニメのサイズ縮小
QRコード作成
バナー作成
閉じる
かんたん!HTML装飾文字・ボタン風リンクテキストを簡単作成|
ブログやホームページにコピペOK!
見出しや強調テキスト、ボタン風リンクなど、装飾付きHTML文字列を簡単に作れる無料ツールです。
リンク付きテキストはもちろん、リンクなしの見出し風デザインにも対応。
色やサイズ、背景色、太字、下線、ボーダーなどを自由に設定し、リアルタイムでHTMLタグ付きプレビューを確認できます。
WordPressやアメブロ、HTML形式のメルマガ、ホームページ作成にもそのまま使えるコードをコピペ1つで利用可能です。
1. 表示したい文字を入力
→ 見出しやリンクなど、装飾したい文字列を入力します。
2. リンク先のURLを入力(省略可・任意)
→ 空欄のままでもOK。入力すればリンク付きになります(https:// は自動補完されます)。
3. デザイン・スタイルを選ぶ
→ 文字サイズ、色、背景、太字、下線、ボタン風など、自由にカスタマイズ可能。
4. HTMLコードをコピー
→ 下に表示されている自動生成されたコードを「コードを選択する」ボタンを押してコピーし、ブログやHTMLファイルに貼り付けてください。
①文字列・テキスト
②リンク先URL(未入力/空欄でもOK)
文字サイズ
選択なし
12px(小さめ)
13px
14px
15px
16px(標準)
17px
18px(やや大)
19px
20px(大きめ)
21px
22px
23px
24px(特大)
25px
26px
27px
28px
29px
30px(超特大)
文字色
背景色
太字
なし
太字にする
下線(アンダーライン)
なし
アンダーラインを付ける
取り消し線
なし
取り消し線を付ける
斜体
なし
斜体にする
文字間隔
選択なし
-10px
-9px
-8px
-7px
-6px
-5px
-4px
-3px
-2px
-1px
0px(標準)
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
19px
20px
影
なし
文字に影を付ける
枠の太さ
なし
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
11px
12px
13px
14px
15px
枠の色
※枠の色を指定しても、枠の太さが「なし」だと表示されません。枠の太さを
1px以上
に設定してください。
枠線の形式
通常
実線
破線
点線
二重線
彫り込み
盛り上げ
インセット
アウトセット
→枠の太さを
3px以上
に設定してください。
余白(padding)
選択なし
0px
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
19px
20px
21px
22px
23px
24px
25px
26px
27px
28px
29px
30px
31px
32px
33px
34px
35px
36px
37px
38px
39px
40px
41px
42px
43px
44px
45px
46px
47px
48px
49px
50px
55px
60px
65px
70px
75px
80px
85px
90px
95px
100px
105px
110px
115px
120px
125px
130px
135px
140px
145px
150px
155px
160px
165px
170px
175px
180px
185px
190px
195px
200px
外余白(margin)
選択なし
0px
5px
10px
15px
20px
25px
30px
35px
40px
45px
50px
60px
70px
80px
90px
100px
110px
120px
130px
140px
150px
160px
170px
180px
190px
200px
※外側の余白です。他の要素との間隔を調整できます。
位置
選択なし
左寄せ
中央
右寄せ
高さ
選択なし
1px
2px
3px
4px
5px
6px
7px
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
19px
20px
21px
22px
23px
24px
25px
26px
27px
28px
29px
30px
35px
40px
45px
50px
55px
60px
65px
70px
75px
80px
85px
90px
95px
100px
105px
110px
115px
120px
125px
130px
135px
140px
145px
150px
155px
160px
165px
170px
175px
180px
185px
190px
195px
200px
→「高さ」は装飾の上級設定です。初心者の方は無理に変更せず「選択なし」のままで大丈夫です。
ボタン風にする
ボタン風にしない
単色ボタン
影付きボタン
グラデーションボタン1
グラデーションボタン2
→ボタン風を選ぶと見た目がボタンになります。
背景色・文字色・余白
を必ず設定してください(例:文字色は白 #FFFFFF)
スクロール表示
しない
横にスクロール
縦にスクロール
→表示がおかしくなったと感じる場合は、スクロール「しない」を選択してください。
リンクの開き方(target)
同じタブで開く(デフォルト)
新しいタブで開く
生成されたHTMLタグ
リアルタイムプレビュー
コードを選択する
コピーするにはWindowsでは Ctrl+C(Macは⌘+C)を押してください