先ほど、「利用しているエディタによって、やり方が少し違ってくるんです。」と書きましたが、「2」と「3」の部分がまさにエディタごとに違う部分です。「1」の部分は、どのエディタも同じです。それでは、まず、共通部分の手順1から見ていきます。【手順1】囲み枠のタグをコピーする囲み枠を利用するには、「タグ」というものを使う必要があります。0;”>内容</div>”というタグを書く必要があります。内容ただ、この「タグ」というものは、理解するまでに少し時間がかかります。理解できるようになるまでは、誰かが公開している「タグ」をコピーして利用するのが手っ取り早いです。僕自身、タグが分かるまではコピーして利用していました。囲み枠」と検索すると、囲み枠のタグを公開している記事が見つかるはずですので、気に入った「タグ」をコピーします。今回は、僕が用意したタグで使い方を説明しますが、他の記事でコピーした場合も手順は同じです。それでは、以下の記事から利用したい囲み枠を探します。角丸)利用したい囲み枠が見つかったら、枠の内容(タグ)をコピーします。これで、「手順1」のタグのコピーは完了です。手順2からは、エディタごとにやり方が異なるので、自身のエディタに合わせて確認してください。新エディタ(手順2~手順3)標準エディタ(手順2~手順3)それでは、アメブロの記事作成ページを表示している状態から説明していきます。囲み枠を利用する場合は、まず、囲み枠を埋め込む位置に目印を付けておくことをオススメします。下の画像では、「ここに囲み枠」という目印を付けています。目印をつけたら、続けて、[HTMLタグを表示]をクリックします。すると、今までは表示されていなかった「タグ」が表示されるようになります。タグに慣れないうちは、何がどうなっているのが分からないと思います。先ほど目印を付けた理由は、タグが表示されても囲み枠を埋め込む位置が分かるようにする為です。それでは、目印を選択して、上書きします。上書きできたら、[タグの非表示]をクリックして元の状態に戻します。これで、「手順2」のタグの貼り付けは完了です。それでは、最後の「手順3」です。囲み枠の内容を入力します。これは、そのままですね。枠の内側でクリックして内容を入力していきます。改行だけは注意が必要です。枠の中で[Enter]キーで改行すると表示が崩れることがあります。枠の中で改行したい場合は、[Shift]キーを押しながら、[Enter]キーで改行します。このようにすれば、枠の中で改行しても崩れることはありません。タグ編集エディタ(手順2~手順3)それでは、アメブロの記事作成ページを表示している状態から説明していきます。タグ編集エディタを利用されている方は、タグの事が分かる方だと思いますので、細かな説明は省きます。枠を埋め込みたい位置にカーソルを移動して、コピーしておいた内容を貼り付けます。これで、「手順2」のタグの貼り付けは完了です。それでは、最後の「手順3」です。枠(タグ)の中身を書き換えます。新エディタ(手順2~手順3)それでは、アメブロの記事作成ページを表示している状態から説明していきます。囲み枠を利用する場合は、まず、囲み枠を埋め込む位置に目印を付けておくことをオススメします。下の画像では、「ここに囲み枠」という目印を付けています。目印をつけたら、続けて、[HTML表示]をクリックします。すると、今までは表示されていなかった「タグ」が表示されるようになります。タグに慣れないうちは、何がどうなっているのが分からないと思います。先ほど目印を付けた理由は、タグが表示されても囲み枠を埋め込む位置が分かるようにする為です。それでは、目印を選択して、上書きします。上書きできたら、[通常表示]をクリックして元の状態に戻します。これで、「手順2」のタグの貼り付けは完了です。それでは、最後の「手順3」です。囲み枠の内容を入力します。これは、そのままですね。枠の内側でクリックして内容を入力していきます。改行だけは注意が必要です。枠の中で[Enter]キーで改行すると表示が崩れることがあります。枠の中で改行したい場合は、[Shift]キーを押しながら、[Enter]キーで改行します。このようにすれば、枠の中で改行しても崩れることはありません。