プラグインAddQuicktagを使って簡単にブログに枠をつける方法

 
 
こんにちは、ゆいです。
 
 
今日は、プラグイン「AddQuicktag」を使って、簡単にブログに枠を入れる方法をお伝えしたいと思います。
 
 
コードも一緒に書いておきますので、そのままコピペして使って頂けます。
 
 
 

ステップ1.  AddQuicktagのインストール

 
「プラグイン」→「新規追加」をクリック。
 
 
 
検索窓に、「AddQuicktag」を入力して検索。「今すぐインストール」をクリックし、有効化。
 
 
 
 
 

ステップ2. AddQuicktagにコードを登録する

 
 
有効化が完了したら、サイドバーの「設定」→「AddQuicktag」を選択。
 
 
 
コードの入力画面の①〜④に入力。
 
 
① 枠の名前(自分が分かれば良いので、なんでもOK)
 
 
② 開始タグ(枠の下に記載されている「開始タグ」のコードをコピペ)
 
 
③ 終了タグ(枠の下に記載されている「終了タグ」のコードをコピペ)
 
 
④ 一番右側にチェック(忘れると使えないのでお忘れなく)
 
 
※「Access Key and 順番」の「順番」のところに数字を入れることで、エディターでの表示順序を決められます。
 
 
 
 
ちなみに下記の枠線は、こちらのサルワカさんのブログで紹介されていたものを、追加CSSからの読み込みなしで、AddQuicktagだけで使えるように、コードを書き換えたものです。
 
 

枠(1)

 

ここに文章

 

開始タグ

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

終了タグ

</div>

 

枠(2)

 
見出し文字

ここに文章

 
 
開始タグ

<div style=”background: #ff9900; padding: 5px 10px; color: #ffffff;”><strong>見出し文字</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff9900;”>ここに文章

終了タグ

</div>

 

枠(3)

 

ここに文章

 
 
開始タグ

<div style=”background: #eddbff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章

終了タグ

</div>

 

枠(5)

ここに文章

 
開始タグ

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

終了タグ

</div>

 

枠(6)

ここに文章

開始タグ

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

終了タグ

</div>

 

枠(7)

ここに文章

開始タグ

<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>

 

 

枠(8)

ここに文章

開始タグ

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

終了タグ

</div>

 

 

枠(9)

ここに文章

開始タグ

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

終了タグ

</div>

 

枠(10)

ここに文章

開始タグ

<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>

 

 

枠(11)

ここに文章

 

開始タグ

<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>

 

 

枠(12)

ここに文章

開始タグ

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

終了タグ

</div>

 

線の色や太さ、背景色などは、ご自身で好きなものに変更できます。

文字の色はcolor: の後の英数字、背景色はbackground:の後の英数字を変更すればOKです。

色のサンプルはこちらをご参照ください。

設定が完了したら、「変更を保存」ボタンをクリックすると、AddQuicktagにコードが登録されて、エディターで登録した枠を呼び出せるようになります。

 

 

※もし、AddQuicktagがインストールできない場合は、テキストエディタに直接「開始タグ」と「終了タグ」を貼り付ければ使えます。

ぜひ試してみてください。

 

—————

私は、大手商社を退職後、年収5億円の25歳起業家に弟子入りし、ウェブマーケティングを学びました。
 
現在は、フリーのマーケティング・コンサルタントとして活動中。
 
 
 
 
ブログに書けない話は無料メルマガで発信中。
 
年収5億円の起業家から学んだ、「個人がブログを収益化して資産を作る方法」や
 
企業が売上アップさせるためのヒントになる情報を発信しています。
 
 
 
無料メルマガにご登録いただいた方に、期間限定で「仕組み化」の全体像がわかる電子書籍(「マーケティング× 仕組み化」で人生を変える)をプレゼントしています
 
 
 
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です