WordPressの投稿でフォントサイズを変更する方法

WordPressのビジュアルエディタで文字サイズを変更するのは意外と困難です。

理由は、Bタブでは、<strong> になってしまい、段落タブの見出しでは<h1>などの<hx>タグになってしまうからです。

文字の大きさだけを変えるのに、strong や hx などのタグを使うのは避けたいと思う人も多いと思います。

そこで、文字の大きさの簡易な変更方法を解説します。

それは単純に現在使っているテーマのCSSを変更する方法です。

つまり、(デフォルトのテーマでは)style.css に文字の大きさを変更するためのCSSを書き加えるわけです。大はl(エル) 小はs(エス) としています。

.fontsize_ll {
font-size:180%;
}
.fontsize_l {
font-size:160%;
}
.fontsize_s {
font-size:80%;
}
.fontsize_ss {
font-size:60%;
}

上のようなCSSをstyle.css に書き加えて保存します。
そして、投稿の際、HTMLエディタにて、書き加えたCSSが有効になるように、大きさを変更したい文字をクラスで指定してspanタグで囲みます。

<span class="fontsize_ll">フォントサイズLL</span>

フォントサイズLL

<span class="fontsize_l">フォントサイズL</span>

フォントサイズL

<span class="fontsize_s">フォントサイズS</span>

フォントサイズS

<span class="fontsize_ss">フォントサイズSS</span>

フォントサイズSS

このような感じで大きさを使い分けられます。

同様に、太字にしたい場合には、CSSに次のように書き加えます。

.bold {
font-weight: bold;
}

そして、HTMLエディタにはCSSを有効にするようにスパンタグを利用します。

<span class="bold">太字</span>

太字

ノーマルに比べて太字になっています。

なお、この<span・・・ の部分は、一字ずつ入力すると面倒なので、辞書登録すると手間が省けます。

蛇足ですが、もちろんプラグインを利用して文字サイズを変更することも可能です。ここでは、プラグインを導入するのが面倒に感じCSSを弄ることで解決しています。

カテゴリー: CSS, WordPress パーマリンク

広告

コメントを残す

メールアドレスが公開されることはありません。