かずぽんノート

管理人のかずぽんがお役立ち情報を発信するブログです。

*

ワードプレス初心者が教える特定の文字のフォントサイズ変更方法

      2015/10/30

ワードプレス超初心者のかずぽんですが、無料テーマとして非常に人気のある「STINGER5」を使用しています。

そこで、記事を書いていて最初に悩んだのが「特定の文字のフォントサイズが変更できない」ということでした。

色々なブログを見ていると、フォントサイズを大きくしたり、太字にしたりして文章を強調しているのをよく見かけるのですが、ワードプレスを始めたばかりの私には、その方法がさっぱり分からず、大変苦労しましたので忘備録として書き綴っておきます。

特定の文字のフォントサイズを変更したい!

と、同じように悩んでいる方はぜひ参考にして下さいね(^^)

特定の文字のフォントサイズを変更するにはどうやったらいいの?

フォントサイズを変えるには、「style.css」を編集する必要があります。

また、編集をする方法は2つの方法があり、1点目は今使っているテーマ(テンプレート)のstyle.cssに直接追加をする方法と、子テーマを作ってやり、子テーマのstyle.cssに追加をする方法があります。

子テーマを作成して追加をすると、テーマのアップロードの時にも、追加した内容がそのまま残るという大きなメリットはありますが、若干難易度が上がりますので今回は、今使っているテーマに直接追加をする方法を説明します。

私もそうだったのですが、ワードプレスを始めたばかりの方には「それ何?」という感じだと思いますが、難しいことは考えずに、ここでは「style.css」を編集する必要があるということを覚えておいてください。

style.cssを編集するにはダッシュボードの外観を選択し、一番下にある「テーマの編集」から入ることができます。

外観からテーマの編集をクリック

すると、下の画面のようにstyle.cssを編集する画面がでてきますので、この画面の一番下までスクロールさせます。

style.cssの編集画面

下までスクロールさせたら、以下のソースコードをコピーして一番最後に貼り付けます。

これだけで、「style.css」の編集は終わりです。

それでは次に、実際にフォントサイズを変更する手順に入りましょう。

HTMLタグを使ってフォントサイズを指定しよう

先ほど編集した「style.css」はざっくり簡単に説明すると、見た目を制御する役目を持っています。
それに対してHTMLタグは、目印(マークアップ)をつけることで「ここからここまでを、この見た目にしてね」と指令をだす役割になります。

つまり、今回のフォントサイズ変更の場合、HTMLを書くことによりstyle.cssに記述した内容を呼び出し、見た目を変更するということになるんですね。

HTMLタグの記述方法

では、具体的にどのようにしてstyle.cssの内容を呼び出すかというと。

特定のフォントサイズを変えたい場所を「spanタグ」で囲みます。
そして、HTMLのclass属性を使ってclassセレクタを指定してあげます。

具体的なHTMLタグの記述で文字を太くしたい場合

フォントサイズを太くしたい場合のHTMLタグの記述は下記のようになります。

となり、呼び出されるcssは先にstyle.cssに追加した下記の部分になります。

この場合のclassセレクタ名は「boldtxt」で、spanタグのclass属性で「boldtxt」を呼び出しstyle.cssに追加した見た目を表示させるというイメージです。

HTMLタグについては、下記の記事で説明しているプラグインの機能を使うと便利です。
AddQuicktag-編集画面にタグを追加できる便利なプラグイン!

具体的なHTMLタグの記述で文字を大きくしたい場合

特定の文字を大きくしたい場合も、基本的には同じような考えでHTMLタグは以下のようになります。

そして、呼び出されるcssは下記の部分です。

ちなみに、classセレクタ名(上記のbigtxt部分)は好きなように変えられますので、お好みの分かりやすい名前にしても結構です。

いかかでしょうか?最初のうちは分からない単語も多く「何、ソレ」という感じかもしれませんが、少なくともフォントサイズを変えることや太くすることはできたと思います。

仕組みについて理解をするということはすごく大事なことですが、あまり考えすぎるとブログの記事がまったく手につかないという状態に陥りますので、仕組みについては「ゆっくりマイペースで勉強をする」くらいのスタンスが良いかと思います。

私は手につかない状態になりましたので・・・。

ちょっと応用編

今回のfont-sizeプロバティの設定は、相対値の単位である「em」をつかっていますが絶対値の「px」をつかっても指定できます。

ちなみに「em」は基本となるフォントサイズの何倍するかという意味があり、「1.2em」であれば基本のフォントサイズの1.2倍となり基本フォントが15pxの場合、18pxで表示されることになります。

ここの数値は自由に変えられますので、ご自身のブログに合わせて柔軟に変更してみてください♪

また、font-sizeプロバティとfont-weightプロバティを組み合わせて、下記のようにHTMLを記述することにより「大きな太字」も可能となりますので、応用編として参考にしてくださいね。

本日のまとめ

簡単にできそうで、意外と悩まされたフォントサイズの変更について忘備録も兼ねて記事にしてみました。実際に私がやってみて間違いがないことは確認していますが、cssを変更していて画面が真っ白になったという話しも聞きますので、変更前のバックアップをおすすめします。いや~それにしてもワードプレスって奥が深いですね・・・。

 - WordPressカスタマイズ