amecareに囲み枠を簡単に登録する方法(非公式の囲み枠)

前回記事で、amecareの公式サイトで公開している囲み枠を簡単に登録して利用する方法をご紹介しました。

これに加え、amecareは、amecareの公式サイト以外で公開されている「非公式の囲み枠」も簡単に登録して記事に貼り付けることができます。

現在、アメブロの記事エディタには気軽に使える囲み枠が用意されていますが、長らくこういったものがなかったこともあって、これまで多くのユーザーによってアメブロで使える様々な囲み枠が考案・公開されてきました。

当記事では、これらの、アメブロ標準でもなくamecareの公式でもない「非公式の囲み枠」を手軽に使えるようにするため、amecareに登録する手順をお伝えします。

あわせて読みたい
amecareに囲み枠を簡単に登録する方法(公式サイト提供の囲み枠) amecareの人気機能の一つにアメブロの記事に囲み枠を簡単に貼り付ける機能があります。 この機能を使うためには、事前にamecareに囲み枠を登録しておく必要がありますが...
あわせて読みたい
amecare – アメブロ記事の執筆を楽にするChrome拡張機能 amecareは、パソコンを使ったアメブロの記事の作成や更新を楽で便利にする、パソコン派アメブロユーザーのためのChrome拡張機能です。 機能概要 amecareは、アメブロの...
目次

アメブロで使える囲み枠

上でも書いた通り、アメブロで使える囲み枠はたくさん公開されていますが、今回は例として、櫻井のりえさんのアメブロの記事で紹介されている囲み枠を使わせてもらいます。

ameblo.jp
『【全600種類】アメブロ用枠線 ~HTMLタグのコピぺで簡単!』     枠線の記事への入れ方はコチラをご覧ください【アメブロ】枠線の入れ方   スマホでの枠線の入れ方アメブロの記事に枠線を入れよう!~枠線の入れ方と注意点、…

記事タイトルからも想像できる通り多くの囲み枠のタグが紹介されていますが、その中から、「30.タイトル付き・点線の枠(細いバージョン)」という囲み枠を選んでみました。

fieldsetタグとlegendタグを使った、シンプルなタイトル付きの囲み枠です。

囲み枠のタグをamecareに送る

このようにブログなどで紹介されている囲み枠をamecareに登録するには、下の画像のように、まず、囲み枠のタグ(HTMLタグ)全体を選択します。

そして、選択したタグの位置でマウスを右クリックし、右クリックメニューの中の「amecare」という項目までカーソルを移動、横に出た小さなメニューの「囲み枠に保存」を左クリックして下さい。

この操作によって、タグの内容を囲み枠のタグとしてamecareに送ることができます。

囲み枠のタグをamecareに保存する

前項の操作により、下の画像のように、囲み枠のタグがセットされた状態で、amecareの「囲み枠管理」画面が開きます。

このまま保存しても、タグをそのまま記事エディタに貼り付けることは可能ですが、囲み枠として便利に使うために、少し変更を加えます。

名前を変更する

まず、囲み枠の名前を、初期の「新しい囲み枠」から、わかりやすい名前に変更します。

今回は、「タイトル付き・点線の枠」にしてみました。

本文の位置をamecareに教える

単にタグを貼り付けるだけではなく、既に記事に書いてある文章を囲むなど、便利な囲み枠として動作させるためには、囲み枠の中の本文になる部分をamecareに教える必要があります。

手順は以下の通りです。

  • プレビューを参考にしながら、タグ中で本文になる部分全体を選択する
  • 選択範囲を本文に設定というボタンをクリックする

下の画像のように、プレビューの囲み枠の中身が囲み枠の名前と表示サンプルの文に変われば成功です。

保存する

名前の変更と本文になる部分の設定ができたら、画面の下の方にある「追加」ボタンをクリックして囲み枠を保存します。

「保存」ボタンは、既に登録済みの囲み枠の内容を変更して上書き保存する場合に使います。

「一覧の最後に追加で保存しました。」というメッセージが表示されれば保存は成功です。メッセージは「OK]ボタンを左クリックして閉じてください。

確認する

囲み枠の保存に成功すると、下の画像のように一覧の最後に囲み枠の名前が追加されます。

一覧の中の表示位置はドラッグ&ドロップなどで変更することが可能です。

名前だけではわかりにくい場合は「一覧をプレビューで表示」というチェックボックスにチェックマークを入れると、下の画像のように、囲み枠の名前がその囲み枠で囲まれて表示されますので、わかりやすいと思います。

プレビューで表示した場合、囲み枠のタグにエラーがあると一覧の表示が崩れてしまうことがありますので、その場合は「一覧をプレビューで表示」のチェックマークを外し、問題のあるタグを修正してください。

これで、囲み枠の登録ができましたので、この画面を閉じて登録作業は完了です。

ポップアップウィンドウでも確認

最後に、登録した囲み枠がちゃんと使える状態になっているかも確認しておきます。

amecareのポップアップウィンドウを開いて「囲み枠」のタブをクリックし、登録した囲み枠があるか確認してください。

名前だけは分かりにくい場合は、「プレビュー」というチェックボックスにチェックマークを入れると、ここでも囲み枠の名前がその囲み枠で囲まれて表示されますので分かりやすいと思います。

問題なく表示されれば、確認完了です。

なお、念のため記事に貼り付けできるかの確認もしておけば、なお良いと思います(このステップは、当記事では割愛させていただきます)。

まとめ

以上、アメブロ標準でもなくamecareの公式でもない「非公式の囲み枠」を、amecareに登録する方法を、手順を追ってご紹介しました。

名前を変更する以外は、マウス操作だけで完結する簡単にできる方法なので、よろしければお試し下さい。

あわせて読みたい
amecareに囲み枠を簡単に登録する方法(公式サイト提供の囲み枠) amecareの人気機能の一つにアメブロの記事に囲み枠を簡単に貼り付ける機能があります。 この機能を使うためには、事前にamecareに囲み枠を登録しておく必要がありますが...
あわせて読みたい
amecare – アメブロ記事の執筆を楽にするChrome拡張機能 amecareは、パソコンを使ったアメブロの記事の作成や更新を楽で便利にする、パソコン派アメブロユーザーのためのChrome拡張機能です。 機能概要 amecareは、アメブロの...
よかったらシェアして下さい
  • URLをコピーしました!
  • URLをコピーしました!
目次