【WordPress】部分的にフォントや装飾を変える方法【CSS】

記事内のフォントについて

ワードプレスで作られたサイトはテンプレートを使うとすでにフォントは設定されているので、こだわったフォントを使わない限りサイト全体のフォントは変えないことも多いと思います。
しかし記事を作っていくなかで、見出しのフォントを変えたい、強調したい部分だけ装飾したい、ということも出てくると思います。今回はそういった部分的にフォントの装飾をしたい時の設定方法です。

ビジュアルエディタとテキストエディタ

ワードプレスで記事を作成すると2つのエディタが使えます。
ビジュアルエディタは完成後の記事に近いので初心者の方でも使いやすいものになっています。
しかし細かい設定をしたい時にはやはりテキストエディタでしか出来ないものも出てくるので、テキストエディタで書くことに慣れておく方がよいかもしれません。
テキストエディタはHTMLを使って装飾を付けていく方法です。特別な難しい知識もいりませんので、ぜひ使っていきましょう。

記事内のフォント変更文字色変更

<span style="font-family: 游ゴシック, メイリオ, ProN">
フォント変更</span>
「color:好きな色」を入れると色、「font size:好きな数字pt」を入れると大きさも変更できます。
他にはfont-weight: で太さの調節もでき、「background-color:好きな色」では文字色ではなくその文字の背景の色が変えられます。

文字色やサイズを全体的に変える場合はdivなどで囲みCSSで設定する方が便利ですが、大事なワードを今回だけこの形に変更したい!と言った場合は上記のコードが使えます。
ビジュアルモードで記事を書くとドラッグしてボタンを押すだけで変更できますが、より細かくカスタマイズしたいとき、どこで設定すると良いか覚えておくと便利なので、ぜひ覚えてみましょう。

また他に文字を囲んで装飾するときによく使うコードは以下のようなものです。
strong → 太く
u → 下線 
em → 斜め
del → 打消し線

blockquote → 
引用
ulとli →
  • リスト
  • リスト
  • リスト
このあたりがよく使う装飾かと思いますのでまずは覚えておきましょう。

まとめ

今回は記事内で部分的にフォントを変更したり文字の装飾をつけたりする方法をまとめてみました。
装飾が多すぎても見づらい記事になってしまうため注意が必要ですが、適度に装飾を入れることによってとても読みやすい記事にすることが出来ますので色々試してみてください!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です