wordpress記事投稿で便利すぎるAddQuicktagの使い方

addquicktag 使い方

ブログ記事を書くとき、
読みやすくするために
何が工夫していますか?

ブログのユーザーの感覚は

「読む」ではなく
「見る」なんです。

そのため、
読みやすいブログ記事って
わかりやすいように
工夫されています。

文字の色や、大きさ、太さなど
大事な部分を強調して
伝わりやすくなっていますよね。

逆にただ単に何の装飾もなく
文章が書いてあるブログは

何が書いてあるのか
「見づらい」ため
読みにくくなってしまいます。

wordpressでは文字装飾に
便利なブラグインAddQuicktagで
読みやすいブログに簡単に実装できます。

投稿画面に
よく使うボタンが表示されるので
作業効率も格段にアップしますよ。

設定方法と、使い方を紹介していきます。

目次

1.便利なプラグインAddQuicktagとは?
2.プラグインインストール方法
3.AddQuicktagの設定方法
4:まとめ

1.便利なプラグインAddQuicktagとは?

ブログの記事を書くときに
タグを使用すると
文字を装飾することができ
見やすい記事にできます。

例えば、強調したい場合は
文字を太くしますよね。

そんな時は、
「」のタグを入れます。

ここに太文字にする文を書く

ただ、毎回、このように書いていくと
とても時間がかかってしまいます。

プラグイン AddQuicktagなら
簡単に記事の中で
クリック一つで
使えるようになります。

作業効率が断然アップしていきますよ。

2.プラグインインストール方法

まず、AddQuicktagをインストールします。

ダッシュボードから、
プラグインをクリックし
新規追加をクリックします。

検索欄に
「AddQuicktag」を入力します。

AddQuicktag
のブラグインが出てくるので
「今すぐインストール」をクリック。

addquicktag 使い方

インストールできました。

3.AddQuicktagの設定方法

インストール後、
「有効化」ボタンをクリックします。

addquicktag 使い方

そうすると、プラグインの
設定画面になるので
設定をクリックします。

addquicktag 使い方 
画面が切り替わらない場合は、
ダッシュボードの
「設定」をクリックすると

AddQuicktagの項目が出てきます。

addquicktag 使い方

クリックすると設定画面が出てきます。

addquicktag 使い方

3-1.設定画面で必要な項目は全部で4箇所

この設定画面でやることは

「記事の投稿画面でよく利用するタグを
ボタンひとつで簡単に実行する」

設定を行います。

addquicktag 使い方

設定項目

●ボタンのラベル、ダッシュアイコン

ラベル名ボタン名:ボタンに表示される名前
ダッシュアイコン:マークをクリックしてアイコンを選ぶ。
選ばなくてもどちらでもOK
ラベル名:入力いなくてOK

●開始タグ* と終了タグ(s)

開始タグ:タグの始まり
終了タグ:タグの終わり

●アクセスキーと順番

アクセスキー:入力いなくてOK
順番:ボタンのプルダウンメニューで表示される順番。

よく使うタグを上の方に表示させると便利です。

それでは、一つのタグを
設定していきましょう。

ただの太文字だけでは
ちょっと物足りないので、

「赤色太文字にし、黄色マーカー」
にするボタンを作成していきます。

3-1-1.ボタンのラベル

まずは、ボタンのラベル部分のボタン名に
わかりやすい名前をつけています。

「赤太文字黄マーカー」

addquicktag 使い方

3-1-2.ダッシュアイコン

addquicktag 使い方

アイコンのマークをクリックして
好きなアイコンを選ぶことができます。

addquicktag 使い方

アイコンが入らない場合は、
何も記入しなくてもOKです。

今回はアイコンを選択しました。

3-1-3.開始タグ

《タグの意味》

strong:文字を太文字にして強調します。
font color=red:文字色を赤色にします。
style=”background-color:yellow:背景を黄色にします。

addquicktag 使い方

3-1-4.終了タグ

タグの終わりは必ず
「/」を入れてタグを閉じます。

addquicktag 使い方 
3-1-5.アクセスキーと順番

よく使うタグは
上の方に表示されるようにします。

addquicktag 使い方

特に順番を気にしない場合は
何も記入しなくてもOKです。

3-1-6.チェックを入れる

addquicktag 使い方

全て入力ができたら、
右側に並んでいる
チェックリストをクリックします。

右端にチェックを入れると
一括で全てにチェックを
入れることができます。

addquicktag 使い方

できたら「変更を保存」
クリックして設定を保存します。

addquicktag 使い方

3-2.投稿画面でAddQuicktagを使ってみよう

新規投稿画面を見てみましょう。

そうすると、
プルダウン形式のボタンが
表示されています。

addquicktag 使い方
※ここで、何も表示がない!
という場合は、「ツールバー切り替え」を
クリックしてみてください。

addquicktag 使い方
ツールバーが隠れている場合があるので
クリックして拡張させると
出てきますよ。

他にも表示されないときの対処法は
後述してあります。

記事の投稿画面は、
「ビジュアル」「テキスト」
二つの投稿方法がありますね。

ビジュアルは、実際に投稿される
ブログ画面に近い状態で
記事を書くことができます。

addquicktag 使い方
テキストは、タグやHTMLのコードを
書くことで記事を投稿します。

addquicktag 使い方 
タグやHTMLの知識がある人は
テキストで書くこともできますが、
あまり詳しくない人は、
ビジュアル画面にして書いてくださいね。

こちらが、一番簡単に投稿できます。

どちらでも
AddQuicktagは使うことができます。

3-2-1.ビジュアルでの投稿の方法

まず、ビジュアルでは
先ほどのようにボタンが表示されています。

やり方は

装飾したい文字
(今回の場合は、「赤色太文字にし、
黄色マーカー」にする)を選択する。

addquicktag 使い方 
※最初の文字にマウスを持ってきて
クリックしたまま
文字の最後まで移動させます。

そうすると、文字に色がかかります。
この状態で選択されています。

そのまま、
Quicktagsのボタンをクリックして
「赤太文黄マーカー」をクリックします。

addquicktag 使い方できました!

addquicktag 使い方 
3-2-2.テキストでの投稿の方法

やり方は、ビジュアルでの
投稿方法と同じです。

addquicktag 使い方マウスでクリックして選択し
「赤太文字黄マーカー」ボタンをクリックします。

addquicktag 使い方テキストの場合は、
そのままタグが表示されます。

addquicktag 使い方

3-3.Quicktagsのボタンが表示されないときの対処法

プラグインを
インストールして設定したのに、
Quicktagsのボタンが
どこにも見当たらない!?

という場合、
設定時のチェックマークを
忘れているかもしれません。

設定時に、すべてにチェックを入れるのですが
ここが抜けていると
表示されません。

addquicktag 使い方

チェックマークは、どこに

Quicktagsのボタン

を表示させるか、という
チェックなんです。

《チェックマーク項目の説明》

ビジュアルエディター:
投稿画面と固定ページのビジュアルモード
※ここにチェックマークを入れていない場合、
投稿画面のビジュアルでは表示がありません。

post:投稿画面のテキストモード
※投稿画面のテキストでの表示です。

page:固定ページのテキストモード

※以下の4点は、
ほぼ使用することがありませんが
特別に設定したい場合は
チェックマークを入れてください。

  1. attachment:メディア編集ページ
  2. comment:管理画面のコメント返信
  3. edit-comments:管理画面のコメント編集
  4. widgets:ウィジェット

3-4.使わないタグを非表示にする設定

注:テキストで投稿する人向け

タグがたくさん見えると
書きにくい…
という場合、
不必要なタグを非表示にできます。

ダッシュボードのメニューから
設定→AddQuicktagをクリックし、
設定画面にします。

下にスクロールしていくと、
「デフォルトのクイックタグを非表示にする」
項目があります。

addquicktag 使い方
この中で、使用しないタグの行の
チェックマークをクリックします。

一番右端のチェックマークをクリックすると
一括でその行のチェックマークを
クリックすることができます。

addquicktag 使い方

設定ができたら、
「変更を保存」をクリックして
設定完了です。

3-4-1.「続きを読む」タグを非表示にしてみる

例として、「続きを読む」タグを
非表示にする設定をしてみます。

「続きを読む」タグは
ビジュアルではこちらのアイコンで
表示されています。

addquicktag 使い方
テキストではこちらです。

addquicktag 使い方

設定画面のチェックマークを一括で
マークを入れます。

addquicktag 使い方

addquicktag 使い方

「変更を保存」ボタンを
クリックして保存します。

投稿画面を見てみます。

すると…

addquicktag 使い方
まだ表示がありますね。

実はこれ、
ビジュアルでは、
非表示になりません。

チェックマークを入れる項目には、
ビジュアルエディターの
チェックマークを入れる欄が
ありません。

テキストで投稿する人向けです。

いろいろなタグがあると
見た目がごちゃごちゃしてしまうので
非表示にした方がスッキリします。

addquicktag 使い方

3-5.設定したAddQuicktagを他のwordpressでも同じ設定にする方法

管理しているwordpressを
一つではなく
複数持っている場合

この設定したAddQuicktagの
プラグインをそのまま
エクスポートし

他のwordpressに
インポートすることができます。

AddQuicktagは便利なプラグインですが、
設定するという
手間がかかります。

複数のwordpressがある場合、
エクスポート・インポート機能を使えば
一つ一つ設定する手間が省けます。

やり方は、先ほどの設定画面から。

設定画面を下にスクロールすると、
エクスポート・インポートの項目が
出てきます。

addquicktag 使い方
全部設定をし終えたら
「エクスポートファイルのダウンロード」
をクリックしてダウンロードします。

また、他の管理しているwordpressに
インポートする場合は
「ファイルの選択」をクリックして
先ほどダウンロードしたファイルを選択します。

「ファイルのアップロード・インポート」
をクリックしてインポート完了です。

また、設定をバックアップするためにも
エクスポートでダウンロードしておくのも
便利です。

3-6.HTMLタグ変換ボタン

投稿の記事の中に
HTMLのタグをそのまま表示させたい場合
この設定をします。

半角カッコ 「>」や「<」

<

などの文字です。

例えば、
赤色の文字にする方法として
HTMLの書き方を紹介したい。

「赤色の文字になる」

という文章を表示させたい。

投稿画面にそのまま入力すると

「赤色の文字になる」

とHTMLの部分が表示されません。

こうならないようにするのが
HTMLタグ変換ボタンです。

addquicktag 使い方
設定画面で、チェックマークをクリックして
「設定を保存」ボタンをクリック。

addquicktag 使い方
投稿画面のテキストに
ボタンが出てきます。

addquicktag 使い方ビジュアルでは出てきません。

3-6-1.HTMLタグ変換ボタンの使い方

使い方は同じです。

表示したいタグを選択します。

addquicktag 使い方

「HTML Entitie」をクリックします。

タグが変換されます。

addquicktag 使い方ビジュアルで見た時に
文字部分の装飾がなくなりました。

addquicktag 使い方

タグで表示されていますね。

3-7.タグではなく定型文を設定

よく使う定型文を登録することもできます。

例えば、
Twitterリンク入りの文。

リンク挿入時に、
リンク先をわざわざコピペして
リンクのタグを入れて…
という作業が省けます。

開始タグの部分に
定型文を入力します。

twitter(<a href=”https://twitter.com/” target=”_blank”>@twittername</a>)

addquicktag 使い方

終了タグの部分は
空白でOKです。

「設定を保存」ボタンを押して、
投稿画面を見てみます。

Quicktagsのボタンの
プルダウンメニューの中に
「twitter」が出てきました。

addquicktag 使い方
これをクリックすると
記事に挿入してくれます。

addquicktag 使い方

3-8.よく使うタグの例

登録していると便利で
よく使うタグの一例を紹介します。

  • H3タグ・・<h3> </h3>
  • H4タグ・・<h4> </h4>
  • 太文字・・<span class=”b”> </span>
  • レスポンシブ動画対応・・<div class=”v-wrap al-c m30-b”> </div>
  • 黄色蛍光マーカー・・ <span class=”box-yellow”> </span>
  • 大文字・・<span class=”big”> </span>
  • 特大文字・・<span class=”big2″> </span>
  • 赤文字・・<span class=”red”> </span>

引用元:AddQuickTagで繰り返し使うタグを設定しておくと効率が良く便利

4:まとめ

タグを簡単に設定出来るプラグイン
「AddQuicktag」

文字の装飾をして
より見やすく読みやすい
記事にできるタグを設定できます。

先に設定しておくことで
効率よく作業ができます。

読み手が見やすいブログ作りの
一つとして、

工夫した文字装飾を
使ってみてくださいね。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でzero_bizをフォローしよう!

コメントを書いてお友達と情報を共有しましょう!