ブログ記事の一部の文字色を変更する
WordPressで文章を書いているとデフォルトの色は黒一色が一般的ですね。
太文字で強調したり、アンダーラインを引くことがあります。
でもたまに強調したい部分は色を変えたい思うことがあります。
今回の記事は、上記のような悩みを解決する手順で書き進めていきます。
こんにちは、chasmblogの管理人モトです。
ブロガーとして本格的に活動を始め、5ヶ月目になりました。
4月29日からは毎日更新中です。
ブログで広告収入を得るために疑問に思ったことや問題点を記事にしています。
先日下記のツイートをしました。
WordPress初心者ですが、一部の文字の色を変更するにはどうしたらいいんだろう？全体の色をテキストエディターの子テーマから変更するやり方は分かったけど、一部の文字の場合はわざわざ子テーマを変更しなくてもできないのかな？基本は黒で良いんだけど、たまに色変えしたいんだよね！#ブログ初心者
— moto_takigawa (@moto_takigawa) August 15, 2020
エディターを極めるならプラグインを入れろ！
・Classic Editorをインストール
・TinyMCE Advancedをインストール
・TinyMCE Advanced設定
今回はこのような流れで考えていきます。
追加プラグインは2つ
繰り返しですが、下記のとおりです。
その②：TinyMCE Advancedをインストール
その③：TinyMCE Advanced設定
その①：Classic Editorをインストール
デフォルトのエディターは簡素化されているため使いづらいので、Classic Editorというプラグインをインストールします。
ダッシュボードのプラグインから新規追加を選び、検索欄にClassic Editorと入力してください。
無事表示されインストールしたのち、有効化すればClassic Editorは完了です。
その②：TinyMCE Advancedをインストール
次にダッシュボードのプラグインから新規追加を選び、検索欄にTinyMCE Advancedと入力してください。
無事表示されインストールしたのち、TinyMCE Advancedを有効化してください。
その③で設定について書いていきます。
その③：TinyMCE Advanced設定
ダッシュボードから設定の中にあるTinyMCE Advancedを選択します。
エディター設定画面になるので、旧エディターをクリックします。
使用しないボタンの欄に『A Mark』『A 背景色』『顔文字』などのボタンがあるのが確認できます。（すでにクラシックエディター用ツールバーに入っている場合もあります。）
ボタンをクリックして、上部のクラシックエディター用ツールバー空欄にドロップしましょう。
僕の場合は背景色や顔文字も一緒に追加しました。
追加できると上の写真のようになります。
これで下部にスクロールして保存ボタンを押せば、設定完了です。
文中の一部の文字色が変更するには？
先ほど入れたプラグインがきちんと有効化されていれば下記のようなエディターに変更されているはずです。
文中の一部の文字色が変更するには、まず例として本文のチェックマークの色を変えたいとします。
普通は緑のチェックマークが一般的ですね。
チェックマークを選択し、クラシックエディター用ツールバーの『A Mark』の横の下三角をクリックします。
そこから好きな色を選択し確定します。
今回は緑色を選択しました。
囲み枠のせいで緑が見えにくいかもしれませんがちゃんと色が変更できています。
これで次回からはボタン一つで色替えができるようになります。
まとめ
TinyMCE Advancedをインストールすることで、文字色やスタイル、枠組までできるようになりますが、結構エディター設定で追加してないため使っていない人が多いため、今回記事にしました。
ソースから自分で打ち込める人には必要ないですが、まだ初心者でプログラミングを勉強したことがない人は是非試してみてください。
僕が参考にした書籍をご紹介します。
おすすめの書籍
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル Kindle版
コメント