AddQuicktagの設定と使い方!記事作成ってこんなに早くなるの?

WordPressの記事作成で、もっと効率的に記事を書きたいとか、1記事書きあげるころにはクタクタになっているという人もいるのではないかと思います。
そんなあなたに、記事作成の負担を軽減して、書くスピードがアップするWordPressのプラグインを紹介します。
その名も『AddQuicktag』
今日から使って効率的に記事を作成しましょう!
Contents
AddQuicktagとはHTMLタグを瞬時に呼び出すプラグイン
AddQuicktagを使うことによって、毎回毎回HTMLタグを入力する手間が省けて、記事作成のスピードがグッと速くなります。
具体的な設定方法と使い方を見ていく前に、HTMLタグって何?いったい何をどうするプラグインなの?というあなたのために、まずはHTMLタグの説明から。
HTMLタグとは?
WordPressを使って記事作成するうえで、つまづきやすいポイントがHTMLタグではないでしょうか。
HTMLタグとは、簡単にいうと文字の装飾や囲い枠などを表示できる仕組みのことです。
なぜ、文字の装飾や囲い枠などを使う必要があるかというと、読者さんにわかりやすく記事の内容を伝えるためです。
文字ばかりの記事って、味気ないし、読んでてあきてしまいますよね。
ちなみにこの吹き出しもHTMLタグによって表示されています!
天村聡生
HTMLタグとは、具体的にはこんなふうに記述されるんです。
<span class=”zebline-maker zebline-color-b”>文字の装飾や囲い枠などを表示できる仕組み</span>
これは、上で黄色いマーカーが引かれている箇所のHTMLタグの記述です。
<span ~></span>というHTMLタグを文章にあてることによって、あらかじめ設定した装飾などの特殊効果を文字に適用します。
適用される文字は、<span ~>この部分に書かれた文字</span>になります。
<span>以外にも、<div>や<a>など、様々な種類があります。
HTMLタグ瞬時呼び出しで作業時間削減
AddQuicktagのプラグインを使うことによるいちばんのメリットは時短です!
本当に早くなりますので、ぜひ記事作成の作業で取り入れてください。
それでは、具体的な設定方法と使い方を説明します。
AddQuicktagのインストールと設定方法
まずはインストール方法と設定について説明していきます。
インストール方法
設定方法
(ここではサンプルとして文字を太字にするタグ<b>を入力)
(サンプルの場合は</b>というタグになります)
これで設定は終了です。
次に記事作成画面で表示されているか確認しましょう。
新エディター(Gutenberg)の場合
ダッシュボードから『投稿』→『投稿一覧』をクリックして記事作成画面を出してください。
左上の「+」マークをクリックし、ブロック選択画面を出します。
下の方にスクロールすると
「フォーマット」というのがあるので、クリック
そこにある「クラシック」をクリックします。
すると文章ブロックのモードがクラシックモードに切り替わります。
「Quicktags」というボタンが表示されていれば成功です!
試しにAddQuicktagが正常に作動するか確認してみましょう。
太字にしたい文章をドラッグして上記画像のようにハイライトさせてください。
ハイライトさせた状態で「Quicktags」をクリックして、設定で作成したタグをクリック
例だと「これはサンプルです」という名前のタグ
天村聡生
このように無事に太字になりましたか?
これはビジュアルモードという編集画面になるのですが、HTMLタグがしっかりと入っているか、確認の意味をこめてHTMLモードに切り替えてみましょう。
編集ブロックの右にある立3つの黒ゴマボタンを押します。
つぎに「HTMLとして編集」をクリックします。
ご覧のように、しっかりとHTML<b></b>が、太字にしたい文章に適用されていますね。
旧エディター(Classic Editer)の場合
クラシックエディターを使っているかたの説明をします。
ちなみにボクもまだクラシックエディターから抜け出せない・・・
天村聡生
クラシックエディターは、投稿画面を開くだけで、すでに項目が出ているので、新エディターのような面倒な作業は不要です。
このように、「Quicktags」が表示されていれば設定は成功です!
AddQuicktagの使い方
使い方は複雑ではありません。
よく使うHTMLタグを片っ端から登録すればいいです。
参考に、ボクの使用例を見ていただければと思います。
コツとしては、アイコンを自分ルールで明確にすることです。
ボクの場合は、動くマーカーをペンキアイコンにしてラインの色を記載して混同しないようにしてます。
あとは、自分で設定したはずなのにほぼ使っていないタグもあるというね(笑)
今回のこの記事を作るにあたって、改めてタグをじっくり見て気がついたのですが、「ボタン」と「フロー」は普段まったく使っていません。
で、この記事では、これみよがしにフローを使ってみました
天村聡生
設定のところで使った三角形と黄色の文字枠のところです。
では、最後にタグの名称のキャプチャ画面を見て、参考にしてもらえればと思います。
ちなみに、このタグをあなたのWordPressで入力しても、何も起きませんので、ご注意ください。
HTMLタグを文字などに適用させるには、CSSというものを設定しないといけません。
そのCSSの設定がボクのWordPressとあなたので違うために、このHTMLタグを設定しても何も起きないのです。
つまり、<span class=”zebline-maker zebline-color-b”></span>という文字が表示されるだけで、このようなマーカーは表示されません。
CSSについて説明すれば、三蔵法師たちが天竺についちゃうぐらい長くなるので割愛します!
天村聡生
以上が、AddQuicktagの設定と使い方の説明になります。
効率的にAddQuicktagを使って、記事作成の時間を短縮して、副業ライフをエンジョイしてくださいね!
その他にも便利なプラグインがたくさん!
アフィリエイターのためのWordPressプラグインを紹介しています。
収益が伸び悩んでいる、もしくは作業効率を改善したいと考えているあなたは必見です!