あめつくのブログ

【Amebaアプリ】アメブロの記事内で囲み枠を使う方法(iPhone編)

広告

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

なお、今回は、iPhone(Amebaアプリ)でのやり方を説明します。

広告

手順

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

  1. 囲み枠のタグをコピーする
  2. コピーしたタグを記事に貼り付ける
  3. 貼り付けたタグの中身を書き換える

[コピー] → [貼り付け] → [書き換え]。の3つの手順です。

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

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

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

内容

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

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

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

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

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

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

【手順2】コピーしたタグを記事に貼り付ける

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

記事作成画面を表示して記事本文を入力します。そして、囲み枠を埋め込みたい位置に目印を付けます。下の画像では、「ここに囲み枠」という目印を付けています。

目印をつけたら、[入力完了]→[タグ編集]の順にタップします。

すると、タグ編集モードに切り替わり、先ほどまで表示されていなかった「タグ」というものが表示されます。慣れないうちは、何がどうなっているのが分からないと思います。先ほど目印を付けた理由は、タグが表示されても囲み枠を埋め込む位置が分かるようにする為です。それでは、目印の「ここに囲み枠」を選択して、上書きします。

すると、コピーしておいたタグが貼り付けられます。赤のマーカー部分。

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

【手順3】貼り付けたタグの中身を書き換える

上書きできたら、カーソルの手前の「内容」という目印を探し、この部分に囲み枠の内容を入力します。「内容」とかいてある部分が囲み枠の中身(内容)になります。目印が二つあるので分かりづらいですが、先ほど利用した一つ目の目印は「囲み枠を埋め込む位置」。そして、ここで利用する二つ目の目印は「埋め込んだ囲み枠の内容を書き込む位置」になります。

囲み枠の内容を入力するときは、タグ編集モードのまま行います。もし、通常モードに切り替えて内容を入力すると、改行したときに枠の表示が崩れてしまいます。枠の内容をすべて入力したら、[完了]をタップします。

すると、下の画像のように、囲み枠が表示されます。

これで、囲み枠の作成は完了です。

文字装飾をするときは(おまけ)

ちなみに、囲み枠の中で文字装飾(太字・文字サイズ)をしたい場合は、本文の部分をタップして通常モードで文字装飾を行います。

以上、「アメブロの記事内で囲み枠を使う方法(iPhone編)」でした!

広告

カテゴリー