[WordPress]文字のフォントサイズを変更する方法

色鉛筆
Pocket

私はブログというものを運営したことがなければ、HTML、CSSといった専門的な知識もありません。
ブログの下地を作るにあたって、色々なサイトから情報を得て、実践しています。

ですが私は物覚えがあまり良くないので、一度やった作業でもすぐに忘れてしまいますw
そこでやったことは可能な限り、メモ代わりに記事にしていこうと思います(`・ω・´)

今回は文字のフォントサイズを変更する方法ですね。
初期状態のWordPressは文字のサイズが少し小さく、ちょっと読みづらい印象があったので記事を書いていく上でブログの基本となるフォントサイズを変更したいと思いました。
毎回サイズを変更するのも面倒ですし、そういう方法がないかなーと探してみました。
色々な方法があると思いますが、今回はCSS(スタイルシート)を用いてブログ全体の、基本となるフォントサイズを変更する方法と、記事中の一部分のフォントサイズを変更する方法の2つを書き留めていこうと思います。

ちなみに私が使用しているテーマは「Twenty Twelve」を使用しています。もしかしたら違うテーマでは通じない方法かもしれませんが、今回はTwenty Twelve使用状況でのフォントサイズを変更するという前提でいきます。

CSSを用いてブログの基本となるフォントサイズを変更する方法

まずはスタイルシートを少しいじって、ブログの基本となるフォントサイズを変更する方法ですね。

まずはダッシュボードの「外観」から「テーマ編集」へ移動します。

スタイルシート(style.css)であることを確認し、画像の枠線内を変更します。
Basic structureのところのフォントサイズの2つですね。この両方を変えます。どうやら片方だけ変更しても効果はないようですね。

で、px単位はなんとなく文字の大きさとして変更すればいいのが分かりますが、
remという単位が最初何を意味するのか分かりませんでした。
調べてみたらTwenty Twelveでは「14px=1rem」という設定で成り立っているようです。

詳しくは分からないのですが、どうやら通常では”16px=1rem=100%”らしく、この”14px=1rem”というのはTwenty Twelve独自の設定らしいですね。

このrem単位の変更ですが、16pxに変更したい場合、”16px/14px=1.142857142rem”となり、
font-size: 16px;
font-size: 1.142857142rem;
と設定を変更します。

もしもデフォルトの倍の大きさにしたい場合…
font-size: 28px;
font-size: 2rem;
と変更すればいいわけですね。

スタイルシートの記述が終わったら、「ファイルの更新」ボタンを押します。

さて、ここまで終わって、これでブログを書いていけば記述したフォントサイズになってる…
とはいかなかったんですよね。

今度は先程の変更点をCSSに追加する作業が必要です。
あらかじめ先程変更したテキストをコピーしておいてくださいね。


今度は「外観」→「カスタマイズ」へ移動します。


「追加CSS」をクリックします。

スタイルシートで変更した部分を張りつけします。そして上部にある「保存して公開」のボタンを押せば完了です。
私はこの方法でフォントサイズの変更に成功できました。

記事の一部のフォントサイズを変更する方法


WordPressを使い始めだとこんな感じのビジュアルエディタになっていませんか?
画像の場合、ちょっと「Quicktags」というプライグインを入れているので多少初期状態と違いますが、私は初めて記事を書いたときに「あれ?記事の一部分のフォントを変更するのってどうやるんだろう?」っと疑問に思いました。
一応テキストエディタで変更することもできますが、毎回毎回テキストをいじって変更するのも面倒ですよね?
そこで「Ultimate TinyMCE」というプラグインを使って編集しやすくしてみましょう。
まずはUltimate TinyMCEをインストールしにいきましょう。


「プラグイン」→「新規追加」→「Ultimate TinyMCE」を検索→Ultimate TinyMCEをインストール。

Ultimate TinyMCEをインストールしたら、設定に移りましょう。

左のサイドバーにUltimate TinyMCEが表示されると思いますので、クリックして設定画面へ。
設定画面で「文字サイズボタン」という項目がありますので、チェックボックスにチェックをいれ、一番下の「Update Buttun Option」を押して完了です。

これで記事作成時にフォントサイズを変更するボタンが表示されました。あとは変更したい文章を選択し、
任意の文字サイズに変更するだけです。
Ultimate TinyMCEは他にも様々なボタンを表示してくれるので、自分がよく使う、または用途にあったボタンを表示すれば今後の編集作業を便利にしてくれるかもしれませんね。
ただ、このプラグインを使用することで非表示になるボタンもあるので、私は必要ない時はこのプラグインは停止させてますね。

さて、ここまでが私が使用したフォントサイズの変更方法になります。他にもいっぱい変更する方法があると思いますが、ブログ初心者である私はこの方法でなければ変更できませんでしたw

フォントサイズの変更に悩んでいる、同じようなブログ初心者の方に読んで頂き、少しでも参考になれば幸いです。

それではまたノシ

スポンサーリンク

コメントを残す

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