今回はWordPressのプラグインで記事をカスタマイズするのに非常に優秀なAddQuicktagをご紹介していきます。しかも無料で使えるプラグインなのでオススメです!

 

ロボ太
控えめにいっても神プラグインで、これがあるかないかでは作業効率が倍以上違うといっても過言ではないでしょう!

マシーンくん
便利すぎてコレがないと記事を作成できないです!(笑)

 

AddQuicktagは自分好みにカスタマイズできるのが最大の武器!

 

ロボ太
AddQuicktagは登録しといたタグをビジュアルエディター上に呼び出して、簡単に使うことができる超便利なプラグインです。

 

 

 

ボックスやラインマーカー、吹き出しなど様々なコードを簡単に使えるので、記事の執筆・編集作業にとても役立ちます。操作も非常にシンプルで分かりやすく、一度使い始めると楽すぎて離れられません。

 

マシーンくん
AddQuicktagを知らない頃は毎回コードを入力したり、テーマにあったテンプレートのものしか使っていなかったので、かなり不便でした!

 

ロボ太
見た目・デザインにも影響するので、大変だったよね…

 

記事の投稿に時間がかかる人、作業時間を少しでも短縮したい方は是非AddQuicktagを触ってみることをオススメします!

 

AddQuicktagの使い方

[box class="green_box" title="で、すぐに覚えることができます"]
★AddQuicktagの使い方は非常に簡単
  1. 編集したい文字を選択する
  2. ビジュアルエディターで「Quicktag」をクリック
  3. 変更したいデザインのタグを選択する

 

①編集したい文字を選択する

 

②ビジュアルエディターで「Quicktag」をクリック

 

選択している状態で「Quicktag」をクリックします。

 

③変更したいデザインのタグを選択する

 

登録しているタグが表示されますので、変更したいデザインのタグを選びましょう。

 

ロボ太
今回はマーカーを選びましたので、しっかり反映されていれば完了です。

 

 

★注意!
ショートコードをAddQuicktagに登録している場合は、選択しておく必要はありません。また、<div>などのHTMLコードや[●●]といったショートコードはビジュアルエディターに反映しませんので、プレビューで直接確認してください。

 

AddQuicktagの初期設定

AddQuicktagの初期設定は簡単に終わる場合もあれば、CSSを触ってカスタマイズする必要がある場合もあります。

 

特に初心者の方で難しいと感じやすいのは「タグの追加」でしょう。

 

マシーンくん
★そもそもタグの箇所に何を追加したら良いか分からない…(笑)

 

今回は知識がなくてもAddQuicktagを簡単に設定できるように、代表的なタグを紹介していきたいと思います。

 

事前準備として…

まずタグの追加方法をご紹介する前にAddQuicktagをインストールして、下記まで進めておきましょう。

 

★事前準備はこれ!
  1. プラグインの「新規追加」で「AddQuicktag」を検索し、インストール
  2. インストール完了後、「有効化」をクリック
  3. 有効化が完了後、「設定」→「AddQuicktag」で設定画面に進む

 

 

③まで進んでいただくと現在の画面は下記のようになっているはずですので、「開始タグと終了タグ」という箇所にこれから紹介していくタグを追加していきます。

 

ラインマーカーの追加方法

まずはラインマーカーの追加方法です。ラインマーカーは非常に簡単で、このコードをコピペするだけで使うことが可能です。

 

★開始タグ
<span style="background-color:#FFFF66;">
★終了タグ
</span>

 

CSSを触ることもないので非常に簡単です。もしマーカーの色を変更したい場合は「#FFFF66」の箇所を、違う色のコードに変更してくださいね!

 

色の配色に関してはこちらのサイトが便利です!

参考URL:Web色見本  原色大辞典

 

ちなみにラインマーカーの見た目を少し変えることもできます。

 

ロボ太
こちらもCSSを触ることなくデザインを変更することができます。

 

【文字70%ほどのマーカーのコード】

 

★開始タグ
<span style="background: linear-gradient(transparent 30%,#FFFF66 0%);">
終了タグ
</span>

 

【文字30%ほどのマーカーのコード】

 

★開始タグ
<span style="background: linear-gradient(transparent 60%,#FFFF66 0%);">
★終了タグ
★</span>

ロボ太
これでサイトの雰囲気も大きく変わりますね!

 

ちなみに登録完了時点ではこんな感じになっていたら大丈夫です。

この3項目が入力されていれば問題ないです。

 

補足

■ボタン名=Quicktagの項目に表示される名前

■開始タグ・終了タグ=呼び出すコード

■適用範囲=とりあえず全てチェックでOKです

 

ボックスの追加方法

ボックスもラインマーカーと同じようにCSSを使わずに設定できる方法もありますが、上手くいかない事も多いのでCSSを触る方法をご紹介したいと思います。

 

マシーンくん
えっ…CSSとか全く分からないんやけど…

ロボ太
大丈夫!コピペするだけだよ!

 

ボックスデザインのサンプルを公開してくださっている優しい方が大勢いますので、迷わず有効活用してしまいましょう。サンプルといってもかなりオシャレなデザインですので、本気でオススメできるレベルです!

 

ロボ太
個人的なおすすめはサルワカさんの記事が抜群に見やすいし、オシャレ!

 

参考サイト:【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

ロボ太
この中から好きなデザインのボックスを選んで、AddQuicktagに追加してしまいましょう。

 

 

  1. まずは好きなデザインのボックスを見つけて、「コードを表示」します。
  2. コードを表示すると「HTML」と「CSS」のコードが表示されますので、まずは「HTML」に表示されているコードをコピーしてください。
  3. 「設定」→「AddQuicktag」と進み、コピーしたコードを貼り付けます。コードは下記のような形で貼り付けましょう。
★開始タグ
<div class="box1">
★終了タグ"
</div>

 

  1. ボタン名(表示名)を入力し、全てのチェックボックスにチェックを入れて「変更を保存」をクリックします。これでAddQuicktagの設定は完了です。
  2. 次はCSSの編集を行います。先程表示された「CSS」のコードを全てコピーします。
  3. WordPress内の「外観」→「テーマの編集」→「スタイルシート(style.css)」の最終行まで移動し、一番最後の箇所に貼り付けします。
  4. コード貼り付け後、CSSが上手く反映しないことがありますので【!important】を追加しておきましょう。【!important】の追加は上手く表示されなかった時だけ追加してもらっても大丈夫です!

「ファイルを更新」をクリックすれば設定完了です!これでボックスを追加してプレビューで確認すると、ボックスが表示されています。

 

吹き出しの追加方法

吹き出しも「HTML」と「CSS」で作ることが出来ます。AddQuicktagに追加していく方法はボックスの時と同じなので具体的な方法は割愛します。

 

ロボ太
ちなみに吹き出しのデザインもやっぱりサルワカさんが良いです!

 

参考サイト:CSSで作る!吹き出しデザインのサンプル19選

 

個人的な感想ですがCSSやHTMLを使った作業は上手くいかないことも少なくありません。何故ダメなのか分からず、時間だけが浪費されていくのは非常に勿体ないです。

 

そんな方は有料のテーマやプラグインを活用しましょう。特に有料のテーマではデフォルトでショートコードを作ってくれていることがあるので、使い勝手抜群です。

 

ボタンの追加方法

次は公式サイトや広告サイトへ誘導するのに有効なボタン機能です。これも「HTML」と「CSS」で対応が可能ですので、同じように追加していきましょう。

 

ロボ太
やっぱりボタンもサルワカさんです。大変お世話になっております

 

参考サイト:CSSで作る!押したくなるボタンデザイン100(Web用)

 

ボタンに関してはもっと簡単に作成する方法もありますので紹介しておきます。

プラグインの「Shortcode Ultimate」を使うとより簡単にボタンを追加できます。

 

 

★「Shortcode Ultimate」の使い方はこちらの記事をどうぞ

[kanren postid="305"]

 

「Shortcode Ultimate」で作成したボタンをコピーして、AddQuicktagに登録しておけば好きなボタンをすぐに呼びだすことが可能になるのでおすすめです!

 

アドセンス広告の追加方法

最後に広告の追加方法です。特にGoogleアドセンス広告は記事の間にも挿入することが多いので、その度にコピペして貼り付けするのは非常に手間ですよね。

 

そこでGoogleアドセンスのコードをAddQuicktagへ登録しておくだけで、1クリックで広告を挿入することも可能です!是非試したことがない方はやってみてくださいね!

 

まとめ

AddQuicktagはマーカー、ボタン、ボックス、広告まで幅広い記事編集で活躍するので、かなり重宝します。CSSやPHP、HTMLなどの知識がなくてもある程度カスタマイズができるのも魅力の1つですね!

 

ロボ太
最初は少し難しいと思われる方もいるかもしれませんが、慣れてくるとかなり作業効率が良くなりますよ!

 

無料のプラグインなので是非一度使ってみてくださいね!

Amazonでお得に買い物をする裏技!  


Amazonでお得に買い物をするのなら、Amazonギフト券購入する方法がオススメです。    


現金でAmazonにチャージするたびに「最大2.5%のAmazonポイント」が貯まります。Amazonプライム会員あれば絶対に使った方がお得なサービスです。  





ロボ太
チャージするだけで数%もポイント還元されるのは大きなメリットだね!
 

この記事のURLをコピーする
この記事も人気です
コメントを残す

Twitterでフォローしよう