[初心者におすすめ] Word Press での文字装飾 | 投稿文字の一部分の大きさやカラー、アンダーライン、マーカーを指定して文字装飾する簡単な方法!!
word pressで記事を書いていて、文字を際立たせるために装飾を施したい時がありますよね。
使用しているテーマによって違いがあるかもしれませんが、私が使用している「Lightning」ですと通常のブロックの場合は、背景色と文字色をつけることが可能ですがブロック全体に適用されてしまいます。
クラシックに切り替えると文章の一部分に文字色をつけることが可能ですが、文字を大きくしたり背景色をつけることができません。
なにぶん超の付く初心者ですので、やり方を分かっていないだけかもしれませんが…
クラシックも最初は分からずに、検索した画面でみんなどうやってるんだろう？と首をかしげていました。
ちょうど私が始めた時期が、クラシックからブロックに切り替わった時期だったみたいで当初は本当に苦労しました。
少し使えるようになりましたが、それでもまだまだ分からないことだらけです。
それでも投稿記事の文字に装飾をすると読みやすくなりますし、伝えたいことも少しは伝わるかと思い個々に指定してコードで装飾をしています。
検索しているとプラグインもあるみたいですが、コード自体の構造はとても簡単ですので、私と同じく超初心者の方はプラグイン無しでやってみてください。
1.文字の大きさを指定する
文章で一部分を強調するなどで文字を大きくしたい時や、補足の文で小さくしたい時に文字のサイズを指定することができます。
例:文字の一部分を大きくする。
例として「一部分」を大きくしました。
「コードエディター」に切り替えて入力します。
サイズを変更したい場所を次のコードで囲みます。
20pxが文字の大きさ指定ですので、数値を希望の大きさで入力すれば小さくしたり大きくしたり自在に変更できます。
慣れると大体このくらいの数値かなぁと分かるようになりますので、最初は色々数値を当てはめてみてください。
2.文字のカラーを指定する
次に文字色を指定してみます。
例:文字色を紫色にしてみました。
色の指定も「コードエディター」に切り替え次のように囲みます。
#の後の「8a017c」が色の指定で今回は紫色にしています。
色は6桁の英数字で指定するのですが、自分好みのカラーが決まるまでどのように指定すればいいのか分からないと思います。
カラー配色の数値を紹介しているサイトがありますので、カラーの指定はこちらのサイトを参考に決めるといいです。
私はいつもこのサイトで色彩を確認しています。
便利なサイトですので、ブックマークに登録しておくといいですよ。
3.文字とカラーを同時に指定する
文字のサイズとカラーの両方を変更したい場合もあると思います。
例:サイズとカラーの両方を変えてみました。
今更ながら紫色は分かりにくかったかと少し後悔してます。
こちらも「コードエディター」に切り替えて次のコードで囲みます。
コードを見ると分かるように、上のサイズ変更とカラー変更を合わせた感じです。
文字サイズのpxとカラーの6桁を好きに変更して使用してください。
4.文字にマーカーをつける
さらに重要な部分や強調したい部分の文字にマーカーをつけます。
例:マーカーでさらに強調してみました。
「コードエディター」に切り替えて次のコードで囲みます。
マーカーは黄色で指定しています。
こちらもカラーの6桁を変更すれば、好きな色に指定することが可能です。
5.文字の下にアンダーラインをつける
最後は文字の下にアンダーラインです。
個人的にはマーカーが気に入っていて、最初アンダーラインだった部分もマーカーに変えてしまいました。
好みの問題なのでよろしければ使ってみてください。
例:文字下にアンダーラインを引いてみました。
同じように「コードエディター」に切り替え次のコードで囲みます。
solidがアンダーラインの1本線を指定しているので、その部分を変更して破線などを引くことも可能です。
点線・・・dotted
破線・・・dashed
二重線・・・double
pxで線の太さの指定、6桁の英数字でカラーの指定になります。
色々選択肢があるので表現の種類は多いですが、個人的のはマーカーを使ってしまいます。
色々試してみるといいと思います。
まとめ
個人的にはやはりマーカーが好きで好んで使用しています。
文字の装飾は様々な場面で活用できますし、コードもそれほど難しくありません。
なにより投稿のコードエディターに直接書けば反映されますので、超初心者の方でも簡単にできます。
最初の頃はpxやカラーの6桁指定など、難しく感じて戸惑いもありましたが慣れてしまうと感覚で分かります。
やっぱりそれぞれの好みに偏ると思いますが、自分なりのパターンができるものです。
pxは本当に感覚なので少しずつ数値を変えて慣れてください。
カラーについては「配色の見本帳」で、サンプル色とコードが出ていますので問題なく書けると思います。
なにより少しずつ装飾ができて見栄えが良くなってくるとうれしいものです。
今回ご紹介したコードをメモ帳などに保存しておけば簡単に装飾ができます。
コードの勉強にもなりますし、自分でできるようになると楽しくなると思いますので超初心者の方は是非色々試してみてください。
初心者にも簡単にできるコード紹介記事
