ワードプレスの文字(テキスト)色を変更するやり方。文字(テキスト)色を変更するやり方は、誰でも簡単にできるので心配はいりません。今回は、ワードプレスの文字(テキスト)色を変更するやり方について書いていきます。
文字色を変更する為のエディターには「ブロックエディター」と呼ばれるものと「クラシックエディター」と呼ばれる2種類があります。非常に使いやすく人気が高かった「クラシックエディター」は、旧エディターになります。
| 結論を先に話ししておきます |
| ワードプレスを日常から使っている方であれば、文字色の変更をするやり方を知っていると思いますが、ワードプレスを触ったばかりの初心者の中には、知らない方もいるのではないでしょうか。ではどうすれば。
まずは「ユーザーが見やすいWebサイト」や「個性的なブログページ」を作る為には一体どうすれば良いのでしょうか。一番は、文字色を変更するです。つまり文字色をカスタマイズする方法が効果的と言うことです。
そこで当記事では、ワードプレスに於いて「デフォルトの文字色を変更するやり方」「一部の文字色を変更するやり方」「文字色を変更できない時に役立つプラグイン」などについて解説していきたいと思います。
以前投稿した下記の記事にも目を通して貰えると幸いです。
|
目次はコチラ
【デフォルトの文字色を変更するやり方】
この章では、デフォルトの文字色(黒)を変更するやり方と、変更する際に気を付けて貰いたい注意点について解説していきます。とは言え、難しいことは何一つもないので心配ないかと思います。では見ていきましょう。
エディターのCSSを使って文字色を変更する
ワードプレスに於いて、デフォルト(黒)である文字色を変更するには「外観」→「テーマファイルエディター」→「スタイルシート(style.css)」の中、もしくは「外観」→「カスタマイズ」→「追加CSS」の中を編集します。
まずは「スタイルシート(style.css)」もしくは「追加CSS」のどちらかを選択してみて下さい。どちらかを選択したのなら、下記の「スタイルシート」を参考に、文字色を変更したいCSSを書いてみましょう。
「スタイルシート」で文字色を変更する際、忘れていけないことは、必ず「body」の中にコードを書くと言うことです。念の為、文字色を変更するだけではなく、大きさやフォント、背景カラーの変更も可能となります。
| 「#00000」となっている箇所に「Webデザイン カラーピッカー[Color Picker]/セーフカラー」の中から色を選んで「#00000」の箇所に張り付けてみて下さい。その際、必ず「#」から選択してコピーするようにして下さい。 |
エディターを編集する際の注意点
「エディター」を編集する際、注意して欲しい点が2つあります。それは「編集する前後に於いて、必ずバックアップを取る」「テーマに於いて❝親テーマ❞と❝子テーマ❞がある場合、子テーマ側を編集する」です。
コードを編集する場合でも、バックアップを取ってから作業するようにしましょう。誤って重要なコードを消してしまったり、テーマを触る際、必ず子テーマ側を選択するようにして下さい。その理由は下記を参考に。
| 誤って親テーマ側のコードを編集してしまうと、ワードプレス全体のバランスが崩れてしまう為です。気を付けましょう。 |
【一部の文字色を変更するやり方】
ワードプレスでは、ページ内における一部の文字色を変更することが可能です。例えばですが、強調したいキーワードの文字色を変更したり、新規で作成した表の一部分で文字色を変更するといったような場合です。
エディターのボタンで文字色を変更する
エディターのボタンとは、何を意味しているのか。それは「投稿」もしくは「固定ページ」に於いて、編集する画面上部にある簡易編集ボタンのことを言います。下記の図を参考にしてみて下さい。はい、それがそうです。
下記の図解で示している中には、数多くのボタンが存在しています。まずはあなたの方で「投稿」もしくは「固定ページ」どちらかを開いてみて下さい。すると確認する意味で、同じようなボタンが表示されているかと思います。
それは、文字を太字にしたり、斜体にしたり、引用したり、リンクを挿入したりするボタンのことです。その中にある
ボタンもしくは
ボタンの右隣りにある「▼」を押すことで、文字色の変更が可能となります。
| 上記2つのボタンを押して文字色を変更する手順は下記の通りです |
|
コードエディターで文字色を変更する
コードエディターとは、テキストエディターのことを指し、HTMLコードを使い、記事を作成するエディターのことです。コードエディターを使って文字色を変更する場合、文字を装飾するコードを手打ちで記述する必要があります。
またコードエディターの場合、手間が掛かる一方で、先程紹介した2つのボタンを使うことにより、細かい文字色の変更が可能となります。具体的には、下記のコードを使って、文字色を変更します。一度やってみて下さい。
冒頭で紹介した「Webデザイン カラーピッカー[Color Picker]/セーフカラー」を使って、表示したい文字色を選択して「色を変える」「文字色を変える」の覧に張り付けて確認してみて下さい。以外と楽しいものです。
| 「Webデザイン カラーピッカー[Color Picker]/セーフカラー」から、色を選択する場合、必ず「#」を含み、選択するようにして下さい。 |
【文字色を変更できない時に役立つプラグイン】
ワードプレスのテーマやバージョンによっては、一部に限り、文字色の変更ができない可能性が出てきます。コードエディターで手打ちすることもできますが、一つ一つ記述していくのはかなりの手間と言えます。
Classic Editor(動画付き)
「Classic Editor/クラシックエディター」とは、ワードプレスに於いて、旧バージョンのエディターであり、記事の作成が容易にできるプラグインです。新バージョンのワードプレスで使用されるエディターの中にはですが。
文字色の変更ボタンで実際に使えないものもいくつか存在しています。万が一、使っているエディターに対し、文字色の変更ボタンがない時は「Classic Editor/クラシックエディター」を導入してみることをおススメします。
また「Classic Editor/クラシックエディター」を導入し、有効化が完了したら、記事の編集画面に於いて、エディターの設定をして下さい。ワードプレスのテーマによっては、エディターの設定画面があったり、なかったりしますから。
ではここで動画を視聴してみて下さい。題して「WordPressのクラシックエディター(旧エディター)の使い方」です。
Advanced Editor Tools(旧名 TinyMCE Advanced)(動画付き)
「Advanced Editor Tools」とは、ブロックエディターとクラシックエディターに高機能なエディターメニュー・ツールバー機能を拡張できるワードプレスのプラグインです。ブロックエディターを利用する場合ですが。
ブロックエディター上に於いて、拡張したクラシックエディターの機能を利用することが可能となり、クラシックエディターを拡張する様々な機能が用意されています。また、クラシックエディターを自分好みにカスタマイズできます。
プラグインとしての管理画面は日本語化されており、初心者でも問題なく利用できます。クラシックエディターを自分好みにカスタマイズすることもできます。是非「Advanced Editor Tools」を導入してみて下さい。
ではここで動画を視聴してみて下さい。題して「Advanced Editor Toolsの設定方法を解説！」です。
今回は以上となります。ワードプレスの文字(テキスト)色を変更するやり方については理解できましたか？ある程度ワードプレスを触っている方であればそれほど難しいことはなかったかと思います。少しずつ覚えていきましょう。
以前投稿した下記の記事にも目を通して貰えると幸いです。
- 「アフィリエイトにおける注意点」。
- 「ワードプレスブログのデザイン」。
