文字の色設定を保存しておける! AddQuickTag(アドクイックタグ)【プラグイン解説】

文字の色設定 中級編AddQuicktag 【プラグイン解説】

ブログ記事を書くときの

方法 

 

【応用編】をお話します^^

 

前回はブログ投稿時に
文字の色の変える方法についてお話しました。

【前回の記事】
ブログ記事の文字色を変えよう 1 【記事の書き方のコツ】
https://wp-firststep.com/fontcolor1/

 

今回は、色のボタンと、
便利なプラグインの使い方をご説明します。

 

文字の色は、テキスト色;背景色

文字の色を変更するには…

「テキスト色」
「背景色」の2種類があります。

テキスト色とは、文字そのものの色を変えます。
 ↓ ↓
テキスト色を変える

背景色を変える、というのは
蛍光ペンで文字をなぞったみたいに

 ↓ ↓
背景色を変える

このようにテキスト色と、背景色を使い分けることで
文章にメリハリをつけて
読みやすくすることができまよす^^

それぞれ、ボタンの追加設定が必要なので
続いてご案内いたします。

 

色変更ボタンの追加

 

テキスト色の変え方は

文字を選択して「テキスト色」
ボタンから色を選ぶのでしたが…

テキスト色変更ボタン

 

 


あび

そのボタン、ないんだけど

 

というお声が。

 

そうなんです。


初期設定のままでは
変更ボタンがついていない
のです。

 

プラグインを入れればすぐに使えますので
ボタンがない方は、お手数ですが
以下のブログ記事をご参考に、インストールしておいてくださいね。

TinyMCE Advanced
投稿画面を便利にカスタマイズ
 ↓ ↓
https://wp-firststep.com/tinymceadvanced/

 

つづいて、応用編として
「中間色」の使い方をご説明します。

 

中間色の使い方

色を変更する時に、カラーパレットが出てきますが、
これだけだと、ちょっと色が少ないですよね。

鮮やかな色ばかりですし。

 

カラーパレット

 

そんな時は「カスタム」という文字をクリックしてください。

 

カスタムを開くと
このようにグラデーション画面になります。

茶色に変更した様子

クリックした場所の色が使えるようになります。

その時は使った色が記憶されて
またすぐ同じ色を選べるのですが

カラーパレット履歴

 

残念なことに
1回画面を閉じると、
選んだ色が消えてしまうんです

カラーパレット

毎回入力するのはちょっと面倒ですし、

色の番号も

「あれ?…何番だったっけ?」

困った犬の顔

…ってなりますよね(笑)

 

そんなあなたのために(?)
便利なプラグインがあります。

 

でも

ちょっと設定が面倒です。

しかし、このひと手間を乗り越えると

この先の100手間が省けると言っても過言ではないので
お時間のあるときにぜひ挑戦してみてください!

 

「AddQuicktag」 アドクイックタグ

AddQuicktagプラグイン

「アドクイックタグ」というプラグインです。

本来、複雑な設定は「タグ」というコードを
書き込まないといけないのですが、
そのコードを事前に登録しておけば、
ワンタッチで入力することができます。

愛猫:しま
しま

????

と言ってもわかりにくいですよね。

実際に、登録してみたら
どんなに便利なのかをまずご説明しますね。

 

①色を変えたい文字を選択します。

テスト用の文字

 

②ボタンから「背景色【黄】」を選びます。

Addquicktagメニュー

 

すると、設定しておいた色に変更されます♪

タグ的用後

これだけです^^

 

番号も入れなくていいですし、毎回同じ色が使えます。

これを使って、
いつもブログで使う色を登録しておけば
イメージカラーとして固定できますね^^

 

ではちょっと面倒な
その設定の仕方をご説明しますね。

 

「AddQuicktag」の設定の仕方

まずは、これから
ボタンに色を登録するため、

何色にするかを決めます。

 

① 設定するテキスト色・背景色を決める

色を確認するため、

まずは手動で、文字をその色に変えましょう。

 

私は派手なピンクにしてみますね。

  ↓  ↓  ↓

色を決めるためのサンプル

テキスト色…白
背景色…濃いピンク

にしてみました。

 

文字ができたら、そのまま右上にある
「テキスト」タブを開いてみてください。

WordPressビジュアルエディタ・テキストエディタタブ画像

 

長~いプログラムが出てくるので
書いた文字を探してください。

私の場合「色を決めるためのサンプル」と書いた文字が、

なにやらよくわからない文章に囲まれています。

 ↓ ↓ ↓

テキストカラータグ

 

これが、タグという
文字のデザインを指示するプログラムです。
(※ピンク色の部分)

必要なタグ部分表示

<>で囲われている部分です。
  ↓             ↓
 <>色を決めるためのサンプル<>

このピンクの部分を、ボタンぶ登録します。

メモ帳などにコピーしておいてくださいね^^

 

② タグをメモなどにコピーしておく

このように、タグというのは

色を付けたい文字の前後に挟み込んでつけるようになっています。

 

便宜上、前の部分を後ろの部分をします。

色指定タグ前後

 

③ プラグインにタグを登録する

 

では、プラグインの設定を見ていきましょう。

メニューの「設定」の
「AddQuicktag」というところを開いてください。

Addquicktagの設定画面

 

すると、こんな画面が出てきます。

アドクイックタグ設定画面

 

それでは設定していきましょう。
左端をご覧ください。

「ボタンのラベル、ダッシュアイコンラベル名」

というところです。

 

③ ボタンに名前を付ける


AddQuicktag設定画面

これは「ボタン名」だけでよいです。

名前はなんでもいいんですが

今後ボタンが増えても
何のボタン高わかりやすいようにしてくださいね、

私は「ピンク背景・白文字」にしておきます。

 

⑤ タグを登録する

続いて、

「開始タグ と 終了タグ」

をご覧ください。

開始タグと終了タグの設定

2段に分かれているので、

上の段に、先ほどコピーしたタグの① 左側

右の段に、先ほどコピーしたタグの② 右側 を

それぞれ貼り付けてください。

 

 

色指定タグ前後

 

すると、こんな感じになると思います。

タグを入力した様子

 

⑥ チェックをつける

 

最後に、右側に
チェック項目が並んでいます。

チェックボックス

右端のレ点にチェックをつけてください。
すると全部にチェックが入ります。

チェックボックスon

 

これで、最後に設定を保存、を押して

設定完了表示

「設定を保存しました」と
この表示が出ればokです♪

投稿画面に、ボタンが増えているか確認してみてください。

登録したボタン名が出ているはずです
登録したボタン

注意事項

 

このようにとても、便利な
ボタンなのですが…

万能ではありません。

 

ご説明した通り、

文字の前後に「タグ」という
指示を自動的につけてくれるものです。

 

文字をこの猫だとしましょう。

cat1

 

この猫…「文字」の前後に
自動的に「タグ」をつけます。

タグイメージの猫

 

すると、この状態 ↓ になります。

 

必要なタグ

 

 

 

もし、この文字…猫が

この状態
(すでに他のタグがついている状態)
だったらどうでしょうか?

猫タグの例

 

ここに、
知らずに自動的にタグをつけようとすると…

タグを追加

 

 

CatFight

(猫が変わっているのはご愛敬でお願いします)

 

このように、

タグは喧嘩こそしませんが
二重にタグをつけることになるので

ちゃんと反映されなかったり

なぜか、文字が消えてしまったり

うまく動かないことがあります。

(最近、改善されたのかうまく動かないことは
あまり怒らなくなりました)

 

そんな時は、

1度、消しゴムボタン

消しゴムボタン

今の設定をクリアしてから
もう1度やり直すとうまく行きますよ♪

 

あと、コツとしては

文章を続けて書いていると
どこまでが対象なのかわからなくて、
うまくいかないことが多いので

このボタンを使うときは前後の文章
Enterキーでしっかり分けておくとうまくいきやすいですよ。

 

今日は人気プラグイン、

AddQuickTagについて、でした、

 

これでみなさんの
記事更新がはかどるとうれしいです✨

Follow me!

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。