amecareに囲み枠を簡単に登録する方法(公式サイト提供の囲み枠)

amecareの人気機能の一つにアメブロの記事に囲み枠を簡単に貼り付ける機能があります。

この機能を使うためには、事前にamecareに囲み枠を登録しておく必要がありますが、amecareの公式サイトでも、amecareに登録して使える様々な囲み枠を提供しています。

これらの囲み枠は、簡単にある程度カスタマイズすることができますので、自分好みの囲み枠を作ってアメブロで使うことが可能です。

当記事では、このamecareの公式サイトで提供中の囲み枠を、自分好みにカスタマイズしてamecareに登録する手順をお伝えします。

あわせて読みたい
amecare – アメブロ記事の執筆を楽にするChrome拡張機能 amecareは、パソコンを使ったアメブロの記事の作成や更新を楽で便利にする、パソコン派アメブロユーザーのためのChrome拡張機能です。 機能概要 amecareは、アメブロの...
あわせて読みたい
amecareに囲み枠を簡単に登録する方法(非公式の囲み枠) 前回記事で、amecareの公式サイトで公開している囲み枠を簡単に登録して利用する方法をご紹介しました。 これに加え、amecareは、amecareの公式サイト以外で公開されて...
目次

欲しい囲み枠を探す

まず、囲み枠のサンプルを公開しているページを開いてください。

囲み枠・ボックスデザイン各種
amecare向け 囲み枠・ボックスデザイン各種 amecareに簡単に登録して使える囲み枠(ボックスデザイン)をたくさん作ってみました。 読者に読んでほしい重要な情報や、注意を促したいポイントなどを囲むことで、視...

該当のページは、amecareのポップアプウィンドウの「囲み枠」ページの下の方にある「公開中の囲み枠」というリンクをクリックして開くこともできます。

ページ内には、以下のように色んな囲み枠のサンプルが表示されますので、サンプルを見ながら欲しい囲み枠に近いものを探してみてください。

囲み枠の種類にもよりますが、たいていは、色や枠線の太さなどをカスタマイズできますので、その前提で欲しい囲み枠に近いものを探していただければと思います。

今回は、以下のような「斜めストライプ模様の囲み枠」を選んでみます。

囲み枠が決まったら、その囲み枠の内側に表示されている「この囲み枠のタグを取得・編集」と書かれた青い背景のリンクをクリックしてください。

選んだ囲み枠をカスタマイズする

囲み枠を選ぶ(「この囲み枠のタグを取得・編集」と書かれた青い背景のリンクをクリックする)と、下の画像のような「囲み枠ジェネレーター」の画面が開きます。

表示された時点で、サンプルのページで選択した囲み枠が設定されていると思いますので、ここからお好みに合わせてカスタマイズします。

今回は、下の画像のような「ピンクで影付きの斜めストライプ模様の囲み枠」にしてみました。

変更内容は次のとおりです。

  • 背景色を薄いピンクに
  • 枠線の色を濃いピンクに
  • 枠線の太さを少し細く(15px→10px)
  • 影の濃さを少し濃く(0%→33%)

これで、上の画像のような囲み枠ができ上がります。

全てマウス操作だけで変更できますので簡単です。

でき上がった囲み枠の画面をあとからもう一度開く可能性がある場合は(例:友達に作った囲み枠を紹介する場合など)、画面の上の方にあるURLというボタンをクリックして下さい。クリックすると、カスタマイズした囲み枠を直接開けるURLに移動します。移動後のアドレスバーの内容を保存しておけば、あとから同じ囲み枠の画面を開くことが可能です。

作った囲み枠をamecareに送る

カスタマイズで自分好みの囲み枠ができたら、記事に貼り付けて使えるように、amecareに登録します。

以降も、概ねマウス操作だけで簡単にできます。

手順は次のとおりです。

  • 「この囲み枠のHTMLタグは↓こちらです」の下のタグが書かれたテキスト領域を左クリック
  • タグ全体が選択されたら、その場で右クリック
  • 右クリックメニューが表示されたらマウスカーソルを「amecare」という項目まで移動
  • 横に出た小さなメニューの「囲み枠に保存」を左クリック

これで、作った囲み枠のタグをamecareに送ることができます。

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

囲み枠のタグをamecareに送ると、下の画像のように、作った囲み枠の情報がセットされた状態で、amecareの「囲み枠管理」画面が開きます。

あとは保存するだけですが、囲み枠の名前が「新しい囲み枠」となっていますので、ここだけは、わかりやすい名前に変更することをお勧めします(必須ではありません)。

保存するには(名前を変更した場合でも、しなかった場合でも)画面の下の方にある「追加」ボタンをクリックします。

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

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

確認する

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

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

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

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

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

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

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

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

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

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

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

まとめ

以上、amecareの公式サイトで提供中の囲み枠を、自分好みにカスタマイズしてamecareに登録する方法を、手順を追ってご紹介しました。

名前を変更する以外は、マウスでポチポチするだけの簡単操作でできますので、よろしければ一度お試しいただければと思います。

囲み枠・ボックスデザイン各種
amecare向け 囲み枠・ボックスデザイン各種 amecareに簡単に登録して使える囲み枠(ボックスデザイン)をたくさん作ってみました。 読者に読んでほしい重要な情報や、注意を促したいポイントなどを囲むことで、視...
あわせて読みたい
amecare – アメブロ記事の執筆を楽にするChrome拡張機能 amecareは、パソコンを使ったアメブロの記事の作成や更新を楽で便利にする、パソコン派アメブロユーザーのためのChrome拡張機能です。 機能概要 amecareは、アメブロの...
あわせて読みたい
amecareに囲み枠を簡単に登録する方法(非公式の囲み枠) 前回記事で、amecareの公式サイトで公開している囲み枠を簡単に登録して利用する方法をご紹介しました。 これに加え、amecareは、amecareの公式サイト以外で公開されて...
囲み枠ジェネレーター
囲み枠HTMLタグを自分で作れる「囲み枠ジェネレーター」 様々な囲み枠の、コピペで使えるHTMLタグをマウス操作だけで簡単に作れるジェネレーターです。スタイルもHTMLタグ内に記述していますのでCSSの変更をしなくても貼り付ける...
よかったらシェアして下さい
  • URLをコピーしました!
  • URLをコピーしました!
目次