AddQuicktagの使い方!コード知らなくても簡単に使えます!文字装飾やアドセンスを簡単に貼り付けよう!

40歳からの初めてのブログ開設・手解き

AddQuicktag(アドクイックタグ)というプラグインをご存知でしょうか?

まあ知らないか、知ってても使った事ないから検索されたのでしょうが!!

文字の装飾や、アドセンス広告を貼るのに物凄く役立つ
プラグインなので是非使い方をマスターして下さい。

コードを知らなくてもばっちり使えます!!

 

まずは「AddQuicktag(アドクイックタグ)」プラグインをダウンロードしよう!!

ワードプレスの管理画面で「プラグイン・新規追加」をクリックすると
上の様な画面になるので
「プラグインの検索(赤い囲み」に
「AddQuicktag」と入力しましょう!!

そうするとプラグインが表示されるのでダウンロードして下さい。

 

「AddQuicktag」の使い方(コード知らなくても出来ます)

アドセンスコードを「AddQuicktag」で簡単に貼り付ける

まずは「AddQuicktag」の使い方入門です!!
単純なコードを貼り付けれる様にしましょう!!

コードとは?

<script async src="https://"></script>
<!– 40歳からの手始めブログ –>
<ins class=""
style=""
data-ad-client=""
data-ad-slot=""
data-ad-format=""
data-full-width-responsive=""></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

この良く分からない英語の羅列の事です!!
(アドセンスの内容部分は消してあります)

通常アドセンスを記事内に入れるには
この「コード」をコピーしては
「テキストモード」で毎回貼り付けてると思いますが
「AddQuicktag」で簡単に貼り付ける事が出来ます。

「AddQuicktag」にコードを登録する

ワードプレスの設定から「AddQuicktag」を選択すると

こういう画面になります。

①にボタン名を登録する

①はボタンの名前なので好きに設定しましょう。
今回はアドセンスのコードなので「アドセンス」とします。

②の「開始タグ」「終了タグ」にアドセンスコードを貼り付ける

今回は「開始タグ」の所にアドセンスのコードを貼り付けるだけでいいです。
理由は後で述べます。

③のチェックボックスを全てチェックする

このチェックボックスは「AddQuicktag」をどのモードで
使うかのチェックなので無条件で全部チェックして下さい。

こんな感じになれば準備OKです!!
最後に「変更を保存」をクリックするのを忘れずに!!

ちなみに右の赤い囲みをチェックすると
全てにチェックが入ります。

「AddQuicktag」を使ってみよう!!

先程までの入力を済ますと
編集画面の右上に「Quicktag」のプルダウンメニューが出ます。
それを選択すると先程作った「アドセンス」が表示されています。

クリックすると

無事アドセンス広告が貼り付けられました!!
これで基本的な「AddQuicktag」の使い方は終わりになります!!

次は文字装飾を作ってみよう!!

・囲み枠を簡単に作りたい!!

という事で上の
「・囲み枠を簡単に作りたい!!」
を作りながら説明したいと思います!!

「囲み」のコードは?

先程までの流れでコードは理解出来たと思いますが
今回の「囲み」のコードは

<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">・囲み枠を簡単に作りたい!!</div>

になります!!

これを先程の手順でコードを「Quicktag」に貼り付けると

「囲み」の「Quicktag」が出来ました!!
これをクリックすると!!

・囲み枠を簡単に作りたい!!

無事に作る事が出来ました!!

1つ問題があるのが分かりますか?

それは文章が常に「・囲み枠を簡単に作りたい!!」
になってしまうんです・・・
原因はコード内の
<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">・囲み枠を簡単に作りたい!!</div>

これ!!
こいつが文章として入っているので毎回出てきてしまいます!!

もちろん「Quicktag」で挿入後に文字を消して
新たに文字を入力できますが

めんどい・・・

という事で改善方法を見てみましょう!!

 

「囲み」の文字を無くす改善方法①:文字部分を空白にする(推奨)

簡単に文字を無くすのは先程のコードの文字部分を
無くすことです。

<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">・囲み枠を簡単に作りたい!!</div>

<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;"></div>

にしちゃいます!!(黄色部分を無くす)
すると

こんな感じになるので好きに文章を打てます!!
ちなみに2行、3行と文字を入力したいなら「shift+enter」で行が増えます。

shift+enter」
shift+enter」
shift+enter」

「囲み」の文字を無くす改善方法②:「AddQuicktag」の設定で「開始タグ」「終了タグ」を使う!!

アドセンスのコード貼り付けの時に、「開始タグ」に
貼ればいいですよ~って言ったの覚えてますか?

後で「開始・終了」の使い方話すって言いましたよね?

ここで出て来るんです!!
「囲み」コード
<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">・囲み枠を簡単に作りたい!!</div>

<div style="background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;">
部分を開始タグ

</div>
部分を終了タグに入力してみて下さい。

こんな感じ!!

そして

文章<「AddQuicktag」の設定で「開始タグ」「終了タグ」を使う!!
をマウスで選択しながら
「囲み枠(開始・終了分離)」をクリックします!!

すると

「AddQuicktag」の設定で「開始タグ」「終了タグ」を使う!!

となります!!

簡単に説明すると
「開始タグ」「終了タグ」で文章を挟んでコードの命令をしますよ
って事になります(語彙がない・・・)

多分ヘビーユーザーは「開始タグ」「終了タグ」でなんか凄い事を
やるんでしょうが、個人的に面倒なのが

いちいち文章をマウスで選択する!!

のが嫌!!なんです!!

 

文章1

文章2

文章3

 

これやる場合全部選択しないといけないって結構手間じゃないですか?
だったら「改善方法①」の「shift+enter」の改行の方が
万倍楽!!だと思います!!
(いい方法あったら誰か教えて!!)

 

まとめ

今回「AddQuicktag」の使い方を簡単にまとめてみました!!
色んな部分に応用が効く機能だと思うので
思考錯誤しながら使ってみて下さい!!

「AddQuicktag」を使ってワードプレスに不具合が起きる事は
無いのでバンバン試しましょう!!

もっと深堀すると枠の色とか背景色とかも
いじれるのですが
それはまたの機会に!!

 

関連記事
(ブログを書く速度の上げ方!!ショートカットやAddQuicktag(アドクイックタグ)をフル活用しよう!!~40歳からのブログの始め方~)

(簡単な時間の作り方!無駄な時間を把握して時間を有効に使おう!~40歳からのブログの始め方~)

(通勤・移動時間の活用術~どうしても消せない無駄な時間の活用法・40歳からのブログの始め方~)