アメブロなどでよく使われている、記事のまとめやお知らせなど記事内の目立たせたい部分に使える見出し付き囲み枠。自分で一からタグを作るとなると結構大変ですよね。
今回紹介する作成ツール（ジェネレーター）を使用すれば、コピペのみで利用できる見出し付き囲み枠のタグを簡単に作ることができます。
関連記事：アメブロやはてなブログなどで使える見出し付き囲み枠！CSS不要でコピペだけのシンプルデザイン
ブログ記事内囲み枠簡単作成ツールとは
ブログ記事内囲み枠簡単作成ツールとは、見出しタイトルと表示したい文章を入力して、色や枠線の種類などを選択するだけで下記のような見出し付き囲み枠を簡単に作成できる便利なサイトです。
また、見出しのない囲み枠も作成可能です。
ブログ記事内囲み枠簡単作成ツールの使い方
まずは「表示内容」に見出しタイトルと囲み枠内に表示する内容を記入してください。
（見出しタイトルを表示せずに囲み枠だけにする場合は、「タイトルを表示」のチェックを外してください。）
入力後、「囲み枠の表示確認とタグの取得」にある「現在の設定で表示」をクリックすると、デフォルトのデザインの見出し付き囲み枠が表示されます。
次にデザインを変更していきます。
「囲み枠表示設定」と「タイトル表示設定」内の文字の大きさや枠線の太さの数字を変えるだけで簡単にデザインを変更できます。
文字や枠線の色を変更したい場合は、カラーコードを直接入力するか、カラーコードをクリックして表示されるカラーピッカーから好きな色を選んで変更してください。
入力後、「囲み枠の表示確認とタグの取得」にある「現在の設定で表示」をクリックすると、変更した見出し付き囲み枠のデザインが表示されます。
「タグを表示」をクリックすると、囲み枠のタグが表示されます。
その下にある「囲み枠の設定保存」で、作ったデザインを保存することができます。
好みの設定は3つまで保存することができ、次回以降の囲み枠作成時に利用することができます。
おわりに
今回は、アメブロなどでよく見る囲み枠のタグを簡単に作成できるツールをご紹介しました。
「アメブロやはてなブログなどで使える見出し付き囲み枠！CSS不要でコピペだけのシンプルデザイン」でも、見出し付き囲み枠のデザインをいくつか紹介しているので、よろしければ参考にしてください。
コメント