PCインストラクターの川上です。
またまた無茶振りが淡路島から飛んでまいりました～^^↓↓↓
記事内の目立たせたい部分に利用できる囲み枠を作成する方法
いつも大変お世話になっていますアメブロカスタマイズの松本さん（昔のお名前は「わざめーばさん」）が、
記事内の目立たせたい部分に利用できる囲み枠を作成するのに、随分と便利なツールを作っていただきました！
アメブロカスタマイズの松本さんからの直のリクエストですので、使い方を書きますね（笑）
ただ、詳しい使い方、ではなく･･･、基本的な使い方･･･、ですので^^;
それではレッスン、レッスン、レッスン♪
まず、このような↓↓↓基本パターンの見出し付きの囲み枠を作りますね。
まず、こちらをクリックします↓↓↓
ブログ記事内囲み枠簡単作成ツール
すると、このようなサイトが表示されます。
（お気に入りやブックマーク等に保存しておくとよいですね。）
そして、「表示内容」欄内の
「タイトルを表示」欄下のテキストボックスにタイトルを入力します。
ここでは『ここにタイトル入れます！』としました。
そして、さらに、「囲み枠内に表示する内容（HTMLタグOK）」欄下のテキストボックスに内容を入力します。
ここでは『１．内容 ２．内容 ３．内容』としました。
そして、「入力した通り改行を表示反映」は「する」のままにします。
とりあえず、これだけですね^^
そして、「現在の設定で表示」ボタンを押します。
すると、その下に見出し付きの囲み枠がもうできています！（はやっ！）
今回は、これでヨシとしますので、「タグを表示」ボタンを押します。
すると、下欄にHTMLタグが表示されます。
<div style="position:relative;word-break:break-all;color:#333333;font-size:14px;font-weight:normal;text-decoration:none;background:#FFFFFF;margin:5px 5px;padding:10px 10px;border-width:1px;border-style:solid;border-color:#999999;border-radius:5px;box-shadow:3px 3px 4px #999999;"><div style="position:absolute;line-height:1.0;color:#333333;font-size:14px;font-weight:bold;text-decoration:none;background:#FFFFFF;padding:2px 5px;left:5px;top:-10px;">ここにタイトル入れます！</div><div>１．内容<br />２．内容<br />３．内容</div></div>そして、
HTMLタグ内をクリックして、青く範囲指定します。
範囲指定内で、右クリックして、「コピー」を選択します。
（もちろん、キーボードのショートカットキーでCtrl＋Cを押してもOKです。ここの説明、意味不明の方は、こちらの記事『コピペは素早いですか･･･』をご覧くださいませ。）
あとは、「ブログを書く」で、貼り付け（ペースト）してあげます。
ただし、「HTML表示」or「HTMLタグを表示」に貼り付け（ペースト）します。（「タグ編集エディタ」の場合はそのまま貼り付けします。）
＜→貼り付け方はこちらの記事『アメブロ 記事内に枠で囲む方法（囲い枠・囲み枠・枠囲い・枠囲み）』にも書いています。＞
すると、このように↓↓↓、あっという間に、見出し付きの囲み枠ができてしまいます@@！
ここにタイトル入れます！
１．内容
２．内容
３．内容
２．内容
３．内容
また、背景の色や線の色なども自由に設定することができるんです^^
例えば、「囲み枠表示設定」欄内で、「背景の色」のボックスをクリックすると、
カラーを選択する画面が表示され、色をクリックして、OKを押すと色コードが設定されます。
（もちろん、直接色コードを入力してもOKですね。）
また、「タイトル表示設定」欄内でも色々と設定することができます。
ここでは、文字の色と背景の色を変更し、「タイトルに枠線を付ける」「タイトル領域の角をを丸くする」「タイトル領域に影を付ける」にチェックを入れてみました。
そして、「現在の設定で表示」をクリックすると、下欄に色付きの見出し付き囲み枠ができあがります。
気に入るまで、操作を繰り返すとよいですね。
あとは、先ほどの方法でコピペしてあげます。
すると、こんな感じで↓↓↓、あっという間にできあがってしまいます^^!
（↓画像で表示）
（このブラウザ上での表示）
ここにタイトル入れます！
１．内容
２．内容
３．内容
２．内容
３．内容
･･･で、またこの囲み枠使いたいな、という場合は、「My囲み枠(1)に保存する」を押して、保存しておくことができます。（今のところ3つまで保存できるようになっています。）
そして、次回この保存した枠を使いたい場合は、「My囲み枠（1)で表示」ボタンを押してから作っていくことができます。
まずは、このような感じで、ご自分の好みの見出し付き囲み枠を作ってみてはいかがでしょうか！
もちろん、記事本文だけでなく、メッセージボードやフリースペース、フリープラグインにもコピペできますので^^!
＜追記＞2014-04-18 22:26:16
開発者からマイナーバージョンアップのアナウンスがありました↓↓↓
囲み枠簡単作成ツールページを地味に機能改善しました
＜追記＞2014-04-21 12:14:14
囲み枠簡単作成ツールページに、囲み枠設定のインポート・エクスポートができる機能を追加しました↓↓↓
お気に入りの囲み枠をもらったり、作った囲み枠をあげたりできます
以上、ブログ記事内囲み枠簡単作成ツールの基本的な使い方でした。
LIDS澄川・ライフデザインスクール
川上 雄大