amecareの人気機能の一つに、アメブロの記事に囲み枠を簡単に貼り付ける機能があります。
この機能を使うためには、amecareに囲み枠を登録する必要がありますが、amecareの公式サイト(つまり、当サイト)でも様々な囲み枠を提供しています。
これらの囲み枠は、ある程度カスタマイズをすることも簡単にできますので、ご自分の好みの囲み枠を作ってアメブロで使うことが可能です。
当記事では、amecareの公式サイト(つまり、当サイト)で提供中の囲み枠をカスタマイズして、amecareに登録する手順をご紹介します。
欲しい囲み枠を探す
まず、囲み枠のサンプルを一覧で公開しているページを開いてください。
ページ内には、以下のように、様々な囲み枠のサンプルが一覧表示されていますので、サンプルを見ながら欲しい囲み枠に近いものを探してみてください。
囲み枠の種類にもよりますが、色や枠線の太さなどをカスタマイズできるものがほとんどですので、その前提で欲しい囲み枠に近いものを探していただければと思います。
今回は、例として、以下のような「斜めストライプ模様の囲み枠」を選んでみます。
囲み枠が決まったら、その囲み枠の内側に表示されている「この囲み枠のタグを取得・編集」と書かれた青い背景のリンクをクリックしてください。
選んだ囲み枠をカスタマイズする
囲み枠を選ぶ（「この囲み枠のタグを取得・編集」と書かれた青い背景のリンクをクリックする）と、下の画像のような「囲み枠ジェネレーター」の画面が開きます。
表示された時点で、サンプルのページで選択した囲み枠が設定されていると思いますので、ここからお好みに合わせてカスタマイズします。
今回は、下の画像のような「ピンクで影付きの斜めストライプ模様の囲み枠」にしてみました。
変更した内容は次のとおりです。
- 背景色を薄いピンクに
- 枠線の色を濃いピンクに
- 枠線の太さを少し細く（15px→10px）
- 影の濃さを少し濃く（0％→33％）
これで、上の画像のような囲み枠ができ上がりました。
全てマウス操作だけで変更できるので簡単です。
URLというボタンをクリックして下さい。クリックすると、カスタマイズした設定の囲み枠を直接開けるページに移動します。移動後のアドレスバーの内容をコピーして保存すれば、あとから同じ囲み枠の画面を一発で開くことが可能です。作った囲み枠をamecareに送る
カスタマイズで自分好みの囲み枠ができたら、記事に貼り付けて使えるように、amecareに登録します。
以降も、概ねマウス操作だけで簡単にできます。
手順は次のとおりです。
- 「この囲み枠のHTMLタグは↓こちらです」の下のタグが書かれたテキスト領域を左クリック
- タグ全体が選択されたら、その場で右クリック
- 右クリックメニューが表示されたらマウスカーソルを「amecare」という項目まで移動
- 横に出た小さなメニューの「囲み枠に登録」を左クリック
これで、この囲み枠のタグをamecareに送ることができます。
囲み枠のタグをamecareに保存する
囲み枠のタグをamecareに送ると、下の画像のように、作った囲み枠の情報がセットされた状態で、amecareの「囲み枠管理」画面が開きます。
あとは、「タイトル」欄に、わかりやすい名前を入力して「変更を保存」ボタンをクリックすると、一覧に、この囲み枠が追加されます。
確認する
最後に、登録した囲み枠がちゃんと使えるか状態になっているか確認してみます。
amecareのメインパネルを開いて「囲み枠」のタブをクリックし、登録した囲み枠があるか確認してください。
登録した囲み枠が問題なく表示されれば、確認完了です。
あとは、記事に貼り付けできるかも確認しておいて下さい（このステップは、当記事では割愛させていただきます）。
まとめ
以上、amecareの公式サイト(当サイト)で提供中の囲み枠を、好みに応じてカスタマイズし、amecareに登録する方法を、手順を追ってご紹介しました。
名前の入力以外は、マウスでポチポチするだけの簡単操作でできますので、よろしければ、ぜひ一度お試し下さい。
