こんにちは。Wordpress歴9年目っぽいLeoです！
ボクはゼロからコーディングするほどの知識はありませんが、既存のテーマをいじり倒して自分の好きな感じに近づけていくことが大好きです。
車で言えば、作るのは車屋さんだけど、車体本体価格よりも投資してカスタマイズして楽しんでいる方に近いのかな？とか思っています。
今回のゴール
今回のカスタマイズで目指すゴールは、Wordpressで文章を書いていく際の文字色指定に関わるものです。
従来のエディター（上記はクラシックエディター）では、このような色がデフォルトで決まっていると思います。8×5で40マス分が表示されていて、最後の40個目は色指定を消すためのマスです。
そしてその下に「カスタム…」という欄があり、そこをクリックすると詳細な色指定が可能です。
こんな感じの画面が出て、コードを入れたり、ピンポイントで色を指定したりして#00000から#ffffffまでの中から好きな色を選択できます。
が、
自分が好きな色を全部コードを覚えることも、毎回コードを入れて色を指定することも、面倒臭くね？
って話で、
だったらデフォルトのパネルを、自分が好きな、そしてよく使う色に変えちゃおうぜ？
ってことです。
つまりこういう感じにしたいわけです。
よくわからんのやけど、文字色ってそんな大事なん？
うーーーん、これはマジ、好みの問題かな？
なんかそれこそ面倒なイメージなんだが。。。？
じゃあ例を見せながら解説するよーん
文字色の重要性について
ライオンがわからない通り、
文字色は人によってはそんなに重要じゃないかも知れません。
なので、例を見せながら解説したいと思います。
例えば。。。
このブログは今、割とあわーーい色で構成したデザイン作りをしているわけですが、デザインの調和を考えて、例えばボックス類も色味を合わせています。
このボックス、「#99ccff」って色を使っています。
誰かにこのボックスの色を「何色と思う？」って聞いたら大体の人は「水色」っていうと思うのですが、一般的な水色は、「#87ceeb」とか、「#87cefa」あたりかなと思います。
これは、「原色大辞典」というサイトを参照にしていますが、上の87から始まる色はそれぞれ、「skyblue」、「lightskyblue」という色名が正式に与えられていて、空っぽい青と薄いバージョンという感じの認識です。
では、ちょっと比べてみましょう。
わかりやすさのため、背景を黒にしていますが、違いってわかります？ボクはわからない（笑）。
こんな感じで、無限に近く存在する色の中でわずかな違いになってくる色ももちろんありますので、その意味で、「この色がいい！」ってピンポイントで思うということは、”自己満足的”かなと思うわけです。
一方、ですが、しかし！
さっきのボックスに使った色はフラットカラーと呼ばれるトレンドの色で、サイト全体のバランスにとって割と重要だと思っています。
#87ceeb
#99ccff
どうでしょう？地味かも知れませんが、ちょっと色が違いますよね？
この違いの積み重ねが、サイト全体のバランスに影響を与えるかも知れない！そんなイメージです。
例えば。。。
今度は赤ならどうでしょう？
↑これは、いわゆる「基本の赤」です。コードでいうと、「#ff0000」。コードにつけられた名前は、「red」。
もちろん、赤文字の印象から、「重要性」は伝わるかな？とは思いますが、このボックスに付与された赤色があわ〜いやつだから、文字がちょっと浮いていませんか？
さて、こちら↑だとどう感じますか？
この赤は、「#e74c3c」というコードになっていて、#ff0000より赤要素が低く、青＆緑が少し入ることで淡い背景にマッチする赤具合になっていると思いませんか？
もし仮に、「うーーん、違いがわからない」ということだったら今回のカスタマイズはスルーしておkだと思います。
が、
なんとなくわかったかも
的なレベル以上なら、続きのカスタマイズは今後のブログ執筆においてアリかも知れません。
文字色パネルカスタマイズ法
では、サクッと文字色パネルを好きな色に変える方法を紹介しますね！
- テーマファイルの中の、「function.php」を開く
- 後に紹介するコードを打ち込む
- 自分の好きな色に変更する
以上！
え、それだけ？？？
そう、これだけ（笑）
全然面倒臭くなかった汗
まあ、ボクの採用している色で幸せになれる人なら一瞬ですね。
ちょっと面倒な部分があるとすれば、自分な好きな色に入れ替えるにあたり、カラーコードを参照していくことや、並び順にこだわるなら記述の順番を入れ替えていかなければならないのでそこだけかな？
ぶち込むコード
//文字色パネル変更コード
function my_mce4_options( $init ) {
$default_colors = '
"eb4d4b", "Carmine Pink",
"e17055", "Orangeville",
"192a56", "Pico Void",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"000000", "Black",
"d63031", "Chi-gong",
"FF6600", "Orange",
"273c75", "Mazarine Blue",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"333333", "Very dark gray",
"FF0000", "Red",
"fdcb6e", "Bright Yellow",
"1e3799", "YUE GUANG LAN BLUE",
"00b894", "MINT LEAF",
"33CCCC", "Turquoise",
"0984e3", "Electron Blue",
"6c5ce7", "Purple",
"808080", "Gray",
"e74c3c", "Alizarin",
"FFCC00", "Gold",
"0984e3", "Electron Blue",
"55efc4", "Light Greenish Blue",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Brown",
"999999", "Light Gray",
"ff7675", "Pink Glamour",
"f9ca24", "Turbo",
"74b9ff", "Green Darner Tail",
"00cec9", "Robins Egg Blue",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum",
"C0C0C0", "Silver"
';
$custom_colors = '
"fab1a0", "Firstdate",
"ffff00", "Yellow",
"48dbfb", "Megaman",
"81ecec", "Faded Poster",
"55efc4", "Color 5",
"00b894", "Color 6",
"ffffff", "White",
';
$init['textcolor_map'] = '['.$default_colors.','.$custom_colors.']';
$init['textcolor_rows'] = 6;
return $init;
}
add_filter( 'tiny_mce_before_init', 'my_mce4_options' );ちょっとだけ長い…
まあでもコピペできるからね？
ってことで、こいつをfunction.phpに入れちゃえばできるはずです。
- Cocoon
- Lightning
- Xeory Base
一応この3つの無料テーマでは試したことがあるのでよっぽどのことがなければできるのかなーって思っていますが、有料テーマとかだと作り込まれている都合からカスタマイズできない項目も結構あるのでわかりません。（持っている有料テーマではテーマ破壊がこわくてやってません）
色の参考にするべきサイト2選
上記コードは、ボクの好みによる色選択になるので、ご自身の好みに合わせていただくには、コード部分を変えてもらう必要アリです。
で、その時に役に立つサイトを2つ紹介しておきます。
前者は先ほども紹介していますが、色の名前付きでたくさんの「原色」が紹介されています。また、同じサイトには、「和色」や、「パステル」などテーマの違ったカラーリストもあるため自分のサイトのテイストに合わせた色が必ず見つかると思われます。
後者は、今のCocoonカスタマイズ上欠かせないサイトで、フラットデザインなカラーを見つけられる最強の場所。いずれフラットデザインやマテリアルデザインの時代も終わると思いますが、とりあえずそれまでは絶対欠かせない色見本サイトです。
まとめ
ってことで、
ブログを書く上でボクは大事と思っている文字色パレットをカスタマイズする方法を紹介しました！
基本的には黒い文字で、しかし要所要所で強調したいことを色分けで書くことはボクも常日頃からやっていますが、その中でさらに色具合にまで注意して、より強調意図が伝わるように、そしてサイト全体のデザイン性が保たれるようにできたらいいなと思って、そういう思いを持った方がいたら役に立つかなと思って紹介記事にまとめてみました。
以上！
