文字の色設定 中級編 AddQuickTag(アドクイックタグ)【プラグイン解説】

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

ブログ記事を書くときの

方法 

 

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

 

前回は
色の変え方について
お話しました。

「色の番号って何だろう?」

よくわからない方は前回の記事も
合わせてご覧ください。
 ↓ ↓ ↓

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

 

第2回は、
文字色・背景色ボタンと
便利なプラグインについて
ご説明します。

 

テキスト色と背景色

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

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

 

 

テキスト色を変えると
 ↓ ↓
こうなります

背景色を変えると
 ↓ ↓
こうなります

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

ぜひご活用くださいね!

 

ボタンのカスタマイズ

 

テキスト色の変え方は

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

テキスト色変更ボタン

 

 

そのボタンがないんですが…

というお声が。

 

そうなんです。
すみません。


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

 

プラグインが必要なので
まだ入れていない方は

コチラの記事を参考に
設定してみて下さいね。

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

 

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

中間色の使い方

色を変更する時に出てくる
カラーパレット

この中からだけでは
色が少ないですよね。

中間色を使う方も多いと思います。

カラーパレット

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

グラデーションから
中間色を選択すると

茶色に変更した様子

 

その時は使った色が
記憶されて

またすぐ同じ色を選べるのですが

カラーパレット履歴

 

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

カラーパレット

ちょっと面倒ですよね。

色の番号を
覚えてしまえばよいのですが

しばらくたったら


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

困った犬の顔

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

 

そのたびに

前の記事を開いて
色が何番だったか調べるのは…

 

 

 

非常にめんどくさい!!!

驚く男性の顔

 

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

 

でも

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

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

この先の100手間が省けるので
一度読んで、お時間のあるときn
ぜひ挑戦してみてください!

 

プラグイン 「AddQuicktag」

AddQuicktagプラグイン

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

「手軽にタグを追加」
という名前の通り、

 

色を変える設定を
ワンタッチでつけてくれる、
便利なボタンが作れるプラグインです。

 

 

 

まずはどんなものか、
プラグインを設定したあとの、
使い方をご説明しますね。

 

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

テスト用の文字

 

②「背景色【黄】」を選びます。

Addquicktagメニュー

 

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

タグ的用後

これだけです^^

 

これだけで、毎回
手軽にお好みの色が使えるようになります。

毎回変えることを思うと
だいぶ便利だと思いませんか?

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

 

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

 

「AddQuicktag」の設定の仕方

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

何色にするかを決めてくださいね。

 

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

そして、

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

 

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

  ↓  ↓  ↓

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

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

にしてみました。

 

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

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

 

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

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

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

 ↓ ↓ ↓

テキストカラータグ

 

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

必要なタグ部分表示

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

このピンクの部分を登録します。

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

 

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

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

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

 

仮に 前の部分を①

後ろの部分を②とします。

色指定タグ前後

 

 

 

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

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

Addquicktagの設定画面

 

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

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

 

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

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

というところです。

 

③ ボタンに名前を付ける


AddQuicktag設定画面

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

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

今後ボタンを増やすとしたら
「ボタン」だけでは
何のボタンだかわからなくなるので

自分にわかるように書きましょう。

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

⑤ タグを登録する

続いて、

「開始タグ と 終了タグ」

をご覧ください。

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

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

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

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

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

 

色指定タグ前後

 

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

タグを入力した様子

 

⑥ チェックをつける

 

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

チェックボックス

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

チェックボックスon

 

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

設定完了表示

この表示が出ればokです♪

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

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

注意事項

 

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

万能ではありません。

 

ご説明した通り、

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

 

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

cat1

 

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

タグイメージの猫

 

すると、タグ的には
この状態 ↓ になります。

 

必要なタグ

 

これがOKの状態だとします。

 

 

もし、この文字…猫が

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

猫タグの例

 

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

タグを追加

 

 

CatFight

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

 

このように、

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

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

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

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

 

 

そんな時は、

1度、消しゴムボタン

消しゴムボタン

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

 

あと、コツとしては

文章を続けて書いていると
うまくいかないことが多いので

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

 

 

今日は中級編のプラグイン、

AddQuickTagについて、でした(*^_^*)

 

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

村重 敦子

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

Pocket