WordPressで見出し文字のサイズや色を自在に変える。「追加CSS」を操ろう

見出し文字がちょっとデカいなー

WordPressでblog書いててサイトのデザインは気になるもの。サイトの見映えは読んでもらうためには重要です。

私もあれこれテーマをダウンロードしてようやくこれにしようと決めました。でも、全体感は満足しいるものの、少しいじりたいって事があります。

例えば、多くのWordPressの無料のデザインテーマは英語のフォントに合わせて作られています。ですので日本のフォントだとちょっと見出し文字が大きくて不恰好だな、という事があります。

または、「なんでこのテーマ、ここの文字の色やサイズが変えられないの??」って事もあります。でも、だからと言ってテーマ自体を変える程でもない。

 

本日は、そんな場合に簡単にテキストの大きさや色だけ変える方法を説明します。

 

WordPressのデザインのキモはCSS

ブログシステムを使っているとCSSという言葉を聞いたことがあるかも知れません。CSSは一言で言うとサイトの見栄えを変える仕組みです。

普通は、デザインテーマの中で使われています。つまり、Wordpressのサイトのプログラムの一部にファイルとして含まれます。デザインテーマをダウンロードしてインストールすると、その一部としてCSSファイルも含まれている訳です。

そのファイルを編集すると、デザインも少しいじれるのですが、サーバーにたくさんあるプログラムの中の一部のファイルを書き変えるのは面倒です。

テーマの中のファイルを探して、FTPでダウンロードして編集してまたアップロード。間違ったら一瞬デザインがおかしくなって、やり直し。。。

そんな面倒な事はしたくないですね。

「追加CSS」機能を使ってCSSをカスタマイズ

そんなときに便利なのが、「外観」→「カスタマイズ」メニューの中に出てくる「追加CSS」という設定項目です。

Wordpress 追加CSS:カスタマイズメニュー

ここに、CSSのコードを記載します。

コードを書くと言われて引いたかは心配ご無用。基本的なところを覚えれば意外と簡単。難しい事をしようと思えばいくらでも難しくなります。

今日は簡単なところだけやります。

見出しの文字が大きかったのが気に入らなかったので、小さくしたいと思います。

CSSの指定は、

  • どの種類の要素(テキスト)を変えるか

と、

  • 選んだ要素(テキスト)をどう変えるか

を書くのがルールです。

どの種類の要素を変えるか、は「セレクタ」と呼ばれます。HTMLのタグを指定して、これ、というか、class=で書かれた文字を指定して、これ、というか、ID=で書かれた文字を指定して、これ、というか。それによって書き方が少し違います。

選んだ要素をどう変えるか、は、上記で「これ」って指定した種類の要素(テキスト)を、どう装飾するかを指定しします。大きさを変えるのか、テキストの色を変えるのか、枠の線を描くのか、背景に色を指定するのか、等々。やりたいことを決めます。

見出しのテキストはどうやって指定するのか

皆さんは、「見出し」は使ってますか?

 

見出しは、Wordpressの編集画面で、見出しにしたいタイトル文字を「段落」、「見出し1」、「見出し2」、等のように選択して文字の大きさを変える機能です。

 

単純にフォントサイズを変えるのではなく、これを指定する事で、検索エンジンに記事の論理構造を理解させるのに役立つ、というのがSEOとしてはポイントなのです。

 

さて、WordPressで「見出し1」を選ぶと、HTMLとしては、h1というタグが生成されます。「見出し2」は、h2。以下同様です。

見出しのフォントサイズを変える場合を例として考えます。「見出し1」のh1で囲まれた文字を変える場合は、CSSを以下のように記述します。

1.0remは文字のサイズの指定の仕方です。

上記の例だと、

  • どの種類の要素を変えるか」は、h1{}で指定した部分

そして、

  • 選んだ要素をどう変えるか」はfont-size: XX;で指定した部分

ということになります。

HTMLのタグ指定

以下の図を見てください。左が元々のもの、つまりデフォルト。右が「追加CSS」画面でCSSのコードを追加したものです。

1.0の数字をCSSで指定したことにより、「レバーの下ごしらえ」の文字のサイズがとても小さく表示されている事がわかります。1.0remはちょっと小さすぎたようですが、実際にやってみてください。色々変えてみるとその場で表示が変化しますので、ちょうどいいところ見ながら探します。

「レバーの下ごしらえ」の部分は、WordPressはHTMLで以下のようにタグを生成します。

 

ちなみに、下の図の「血をよく洗う」は「見出し2」を指定した文字です。なので、h1 {}のCSSを追加しても小さくならないのです。

class指定

上記の例では、「どの種類の要素を変えるか」を指定するのはh1というHTMLのタグでした。一方、特定の要素を指定する別の方法があります。それは、class=を指定する方法です。

例えば、WordPressのアバターの自己紹介部分は、以下のようにHTMLで書かれています。

 

このような場合、CSSの「どの種類の要素を変えるか」は、class=で指定した文字列にドット「.」を付けて以下のように記述するルールになっています。

上の例だと”.tg-auhor-box”を指定して「選んだ要素をどう変えるか」に関しては背景をオレンジ色にしています。

実際の表示は以下の図のように背景がオレンジ色になります。

 

セレクタはどうやって見つけるのか

上記の例では、class=を選んでCSSを記載しました。class=は、WordPressがHTMLを表示する時に勝手に挿入しているものです。

 

通常WordPressが生成したHTMLを見るには、ブラウザで、「ページのソースの表示」というのを選んで別画面で表示させる必要があります。

 

Chromeブラウザをお使いの場合は、ページ上で右クリックを押して表示されるメニューに「ページのソースの表示」という項目が出てきます。

 

その項目を選択すると下のような呪文が並んだ画面が突如として現れます。

以下がその一部です。呪文の中にも読める字がありますね。

「投稿を作成しました」という日本語は読めます。その日本語が表示されている周りに、class=という記述があるので、それを使ってCSSを記述するわけです。先程のオレンジ色のケースでは、tg-author-boxの色を背景を変えたいと思ったので、上記のようにCSSを追加したのでした。

tg-author-boxというclassを探す

 

色も変えられ、線も引ける

レバーの下ごしらえ」に話を戻します。先程は、テキストのサイズを変えただけです。しかし、「選んだ要素をどう変えるか」に関してはもっと他のこともできます。文字の色を変えたり(color)、文字の下に線を引いたり(border-bottom-styleとborder-bottom-width)、文字の上下左右の領域を少し広げたり(padding)なども可能なのです。

ちょっと例を書いてみます。

上記で、h1タグで囲われた「レバーの下ごしらえ」はこのようになりました。

 

上記の図では、色の指定colorは、”blue”と英語テキストで書いていますが、以下のようなサイトの色見本を見ながら、より細かな選択をしていくことで、あなた好みのデザインに自在に変更できる、という訳です。

 

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

まとめ

  • WordPressのデザインテーマのCSSのファイルをいじること無く、CSSでデザインをちょっとだけ変える方法をご紹介(「追加CSS」画面)
  • CSSは、「どの種類の要素を変えるか」と「選んだ要素をどう変えるか」を記述するルール
  • どの種類の要素を変えるか」は、HTMLのtagかclass=記載の文字列で指定する(説明省きましたが、ID=なども可能)
  • 選んだ要素をどう変えるか」に関しては、文字サイズ、背景色、文字の色、枠の線などなどが選べる
  • 色は、色見本を見よう

あなたへのおすすめ


コメントを残す

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る
%d人のブロガーが「いいね」をつけました。