WordPressでは、文字の色を自由に変更できますが、様々な方法がありどの方法も一長一短です。
そこでこのページでは、WordPressでフォントの文字色を変更する方法のいくつかを紹介します。簡単なものから高度なものまで紹介しています。
WordPressでフォントの色を変えるには
WorPressでは簡単にフォントの色を変更出来ますが、やり方は1つだけではありません。
ブロックエディタのブロックツールバーを使う
フォントの色を変える最も簡単な方法は、WordPressのブロックエディタ(記事を書く画面のことです)の「ブロックツールバー」を使う方法です。
ブロックツールバーとは
本文を入力中、段落の上に↑このようなボタンの集合体が表示されているはずです。
「A」と表記されているボタンが、フォントを変更するボタンになります。クリックするとこのように「赤色」「青色」「緑色」そしておまけとして「キーボード」が用意されています。
このブロックツールバーを使ったフォントを変更するやり方は――
まずは色を変更したい文字をマウスカーソルで左ボタンをクリックしたままドラッグして選択します。
このように文字が反転しました。
「ブロックツールバー」にある①「A」のボタンをクリックすると、②サブメニューが表示されるので、その中から好きな色(と言っても3色しかありませんが・・・)をクリック。
文字色だけでなく太文字にするかも選ぶことが出来ます。
フォントが青色になりました。よく見ると細い枠も表示されています。これは先程の色の選択時の一番下に表示されていた「キーボードキー」。
この「キーボードキー」は、文字色と組み合わせることも出来ます。使い方としては──
コピーをする場合、キーボードのCとCtrlを同時に押します。
のようにキーボードの操作方法を本文に使いたいときに使えそうです。
「HTMLとして編集」を使う
上の「ブロックツールバー」を使った方法だと、3種類の色からしか選択できませんでした。もっと別の色も使いたい！なんて場合は、この「HTMLとして編集」を使います。ちょっとむずかしそうですが、なれてしまえばとても簡単！
色を変更したい文字が含まれているブロックをどこでもいいのでクリックし、アクティブにしたら──
①「ブロックツールバー」の一番右端にある︙をクリックします。
②サブメニューから「HTMLとして編集」をクリックします。
このように<p></p>本文がPタグで囲まれました。ブロックエディタでタグを記述するにはいくつか方法があるのですが、用意されていないタグなどを挿入したい場合は、このやり方が簡単です。
文字色を変更したい部分の前後に
<span style="color:pink">
</span>
で囲みます。
<p>ここが<span style=”color:pink;”>記事の本文</span>になるよ！</p>
こんな感じ。
「ブロックツールバー」が「ビジュアル編集」になっているのでここをクリックします。
文字の色が変更できました。
クラスを使う
同じ色を頻繁に使う場合は、「CSS」であらかじめクラスとして作成しておくと便利です。と、書くと難しそうに思えますが、とても簡単。
WordPressを使いこなすにはいつかは「CSS」を理解しないといけないでしょう。ここで軽く予習をしておくのもいいかと思います。
クラスとは
ページのデザインを指定するには、CSS(Casading Style Sheets)と呼ばれる言語を使います。むかしはHTMLと呼ばれるテキスト言語で文字の大きさや色などを指定していたのですが、昨今の複雑なデザインを実現させるために、デザインはCSSでまとめて(場合によっては別ファイルにして)管理しやすくなりました。また、HTMLだけでは実現しにくいデザインなども可能になりました。
で、デザインを指定する場合に要素をグループ化するための属性が「class」になります。
さっそくやってみる
文字で説明してもわかりにくいのでさっそくやってみます。
外観のカスタム
記事を書いている場合は一度「下書き保存」をクリックして保存しておきます。
左側のメニューの中から①「外観」をクリックし、サブメニューの中にある②「カスタマイズ」をクリックします。
画面が切り替わります。
「追加CSS」をクリック。
.pinkと入力すると、自動的に
.pink{}{}が入力されます。そのまま
color:pink;と続けて入力します。
.pink{color:pink;}となっているはずです。
改行して見やすくしても構いません。
右上にある「公開」をクリックして反映させます。
SPANタグで囲って
まだこれだけだとなにも変わっていません。次は、色を変えたい(pink色にしたい部分に細工をします。
先程の「HTMLとして編集」と似ているのですが、まず「ブロックツールバー」の一番右側をクリックし、表示されたメニューから「HTMLとして編集」をクリックします。
<p>ここが<span class="pink">記事の本文</span>になる赤い文字になっている部分を追加します。
文字の色が変わりました。CSSで指定しておけばあとは
<span class="pink"></span>で囲ってやれば同じ色にすることが出来ます。
「span」タグは、「P」や「DIV」などのブロックの一部だけに反映させたい場合に使うタグです。
<p>あいうえお<br>
<span>かきくけこ</span><br>
さしすせそ</p>応用編
これを応用してこんな事も出来ます。
.rainbow {
background: linear-gradient(to right, #ff0 0%, #f85 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
background: -webkit-linear-gradient(left, #f06 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
background: -o-linear-gradient(right, #f06 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
background: -moz-linear-gradient(right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}<span class="rainbow">あいうえおかきくけこさしすせそ</span>まとめ
今回はWordPressで文字の色を変える方法をいくつか紹介してみました。
WordPressを使い始めの頃はこのようなかんたんなテクニックを色々と試してみてください。そのうち、どこをどういじればどのように変わるのか、がわかってきて余計ハマるでしょう。
コメント