こんにちは、ゆいです。

 

 

今日は、プラグイン「AddQuicktag」を使って、簡単にブログに枠を入れる方法をお伝えしたいと思います。

 

 

コードも一緒に書いておきますので、そのままコピペして使って頂けます。

 

 

 

 

「プラグイン」→「新規追加」をクリック。

 

 

 

検索窓に、「AddQuicktag」を入力して検索。「今すぐインストール」をクリックし、有効化。

 

 

 

 

 

 

 

有効化が完了したら、サイドバーの「設定」→「AddQuicktag」を選択。

 

 

 

コードの入力画面の①〜④に入力。

 

 

① 枠の名前（自分が分かれば良いので、なんでもOK）

 

 

② 開始タグ（枠の下に記載されている「開始タグ」のコードをコピペ）

 

 

③ 終了タグ（枠の下に記載されている「終了タグ」のコードをコピペ）

 

 

④ 一番右側にチェック（忘れると使えないのでお忘れなく）

 

 

※「Access Key and 順番」の「順番」のところに数字を入れることで、エディターでの表示順序を決められます。

 

 

 

 

ちなみに下記の枠線は、こちらのサルワカさんのブログで紹介されていたものを、追加CSSからの読み込みなしで、AddQuicktagだけで使えるように、コードを書き換えたものです。

 

 

 

ここに文章

<div style=”display:inline-block;background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章

終了タグ

 

 

ここに文章

 

 

開始タグ

終了タグ

 

ここに文章

 

 

開始タグ

終了タグ

 

ここに文章

 

開始タグ

終了タグ

ここに文章

<div style=”padding: 0.5em 1em; margin: 2em 0; color: #2c2c2f; background: ##fff0f5;”><p>ここに文章</p>

</div>

ここに文章

<div style=”padding: 8px 19px; margin: 2em 0; color: #2c2c2f; background: #cde4ff; border-top: solid 5px #5989cf; border-bottom: solid 5px #5989cf;”><p>ここに文章</p>

</div>

ここに文章

<div style=”padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;”><p>ここに文章</p>

</div>

ここに文章

<div style=”padding: 0.5em 1em; margin: 2em 0; color: #ff7d6e; background: #ffebe9; border-top: solid 10px #ff7d6e;”><p>ここに文章</p>

</div>

ここに文章

<div style=”padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);”><p>ここに文章</p>

</div>

ここに文章

<div style=”padding: 0.5em 1em; margin: 1em 0; background: #f4f4f4; border-left: solid 6px #5bb7ae; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);”><p>ここに文章</P>

</div>

ここに文章

<div style=”border: 2px solid #808080; padding: 0.5em 1em; margin: 2em 0;”><p>ここに文章</p>

</div>