あめつくのブログ

アメブロの記事内で囲み枠を使う方法(パソコン編)

広告

ここでは、アメブロの記事内で囲み枠を使う方法をご紹介します。

【枠で囲む前】

【枠で囲んだ後】

なお、今回は、パソコンでのやり方を説明します。

広告

囲み枠を使う前に確認すること

パソコンで囲み枠を使うと言っても、誰もが同じ手順でできるわけではありません。実は、利用しているエディタによって、やり方が少し違ってくるんです。

なので、まずは、自分がどのエディタを使っているかを知る必要があります。

ちなみに、現在アメブロでは以下の3つのエディタが利用できます。

  • 標準エディタ
  • タグ編集エディタ
  • 新エディタ

自分がどのエディタを利用しているかを確認する方法は、以下の記事を参考にしてください。
アメブロで自分がどのエディタを利用しているかを確認する方法

手順

囲み枠を使う手順は、大きく分けると3ステップ。

  1. 囲み枠のタグをコピーする
  2. コピーしたタグを貼り付ける
  3. 貼り付けたタグの内容を入力する

[コピー] → [貼り付け] → [内容入力]。の3ステップです。

先ほど、「利用しているエディタによって、やり方が少し違ってくるんです。」と書きましたが、「2」と「3」の部分がまさにエディタごとに違う部分です。「1」の部分は、どのエディタも同じです。

それでは、まず、共通部分の手順1から見ていきます。

【手順1】囲み枠のタグをコピーする

囲み枠を利用するには、「タグ」というものを使う必要があります。

例えば、下の囲み枠を表示するには、”<div style=”border: #aaa 1px solid; background: #f9f9f9; padding: 10px; margin: 2em 0;”>内容</div>”というタグを書く必要があります。

内容

ただ、この「タグ」というものは、理解するまでに少し時間がかかります。なので、理解できるようになるまでは、誰かが公開している「タグ」をコピーして利用するのが手っ取り早いです。僕自身、タグが分かるまではコピーして利用していました。

「アメブロ 囲み枠」と検索すると、囲み枠のタグを公開している記事が見つかるはずですので、気に入った「タグ」をコピーします。

今回は、僕が用意したタグで使い方を説明しますが、他の記事でコピーした場合も手順は同じです。

それでは、以下の記事から利用したい囲み枠を探します。
囲み枠(シンプル – 四角)
囲み枠(シンプル – 角丸)

利用したい囲み枠が見つかったら、枠の内容(タグ)をコピーします。

これで、「手順1」のタグのコピーは完了です。

手順2からは、エディタごとにやり方が異なるので、自身のエディタに合わせて確認してください。

標準エディタ(手順2~手順3)
タグ編集エディタ(手順2~手順3)
新エディタ(手順2~手順3)

標準エディタ(手順2~手順3)

それでは、アメブロの記事作成ページを表示している状態から説明していきます。

囲み枠を利用する場合は、まず、囲み枠を埋め込む位置に目印を付けておくことをオススメします。下の画像では、「ここに囲み枠」という目印を付けています。

目印をつけたら、続けて、[HTMLタグを表示]をクリックします。

すると、今までは表示されていなかった「タグ」が表示されるようになります。タグに慣れないうちは、何がどうなっているのが分からないと思います。先ほど目印を付けた理由は、タグが表示されても囲み枠を埋め込む位置が分かるようにする為です。

それでは、目印を選択して、上書きします。

上書きできたら、[タグの非表示]をクリックして元の状態に戻します。

これで、「手順2」のタグの貼り付けは完了です。

それでは、最後の「手順3」です。囲み枠の内容を入力します。これは、そのままですね。枠の内側でクリックして内容を入力していきます。

ただ、改行だけは注意が必要です。枠の中で[Enter]キーで改行すると表示が崩れることがあります。枠の中で改行したい場合は、[Shift]キーを押しながら、[Enter]キーで改行します。このようにすれば、枠の中で改行しても崩れることはありません。

タグ編集エディタ(手順2~手順3)

それでは、アメブロの記事作成ページを表示している状態から説明していきます。

タグ編集エディタを利用されている方は、タグの事が分かる方だと思いますので、細かな説明は省きます。

枠を埋め込みたい位置にカーソルを移動して、コピーしておいた内容を貼り付けます。これで、「手順2」のタグの貼り付けは完了です。

それでは、最後の「手順3」です。

枠(タグ)の中身を書き換えます。これで完了です。

新エディタ(手順2~手順3)

それでは、アメブロの記事作成ページを表示している状態から説明していきます。

囲み枠を利用する場合は、まず、囲み枠を埋め込む位置に目印を付けておくことをオススメします。下の画像では、「ここに囲み枠」という目印を付けています。

目印をつけたら、続けて、[HTML表示]をクリックします。

すると、今までは表示されていなかった「タグ」が表示されるようになります。タグに慣れないうちは、何がどうなっているのが分からないと思います。先ほど目印を付けた理由は、タグが表示されても囲み枠を埋め込む位置が分かるようにする為です。

それでは、目印を選択して、上書きします。

上書きできたら、[通常表示]をクリックして元の状態に戻します。

これで、「手順2」のタグの貼り付けは完了です。

それでは、最後の「手順3」です。囲み枠の内容を入力します。これは、そのままですね。枠の内側でクリックして内容を入力していきます。

ただ、改行だけは注意が必要です。枠の中で[Enter]キーで改行すると表示が崩れることがあります。枠の中で改行したい場合は、[Shift]キーを押しながら、[Enter]キーで改行します。このようにすれば、枠の中で改行しても崩れることはありません。

はい。ということで、アメブロの記事内で囲み枠を使う方法(パソコン編)のご紹介でした!

広告

カテゴリー