スタイルシートをカスタマイズしてサイトのフォントを変更する

前回までで、WordPress(および Twenty Fifteen)のカスタマイズ機能を使ってサイトの外観を変更してみました。

今回は、カスタマイズ機能では行うことのできない「サイト全体に適用されているフォントの変更」をしてみたいと思います。

 

Custom CSS/JS プラグインをインストール

サイトのフォントを変更するにはCSSファイル(Cascading Style Sheets、カスケーディング・スタイル・シート)というものをいじる必要があります。

現在サイトに適用しているテーマ(Twenty Fifteen)のCSSファイルの所在は以下。

(WordPressがインストールされているディレクトリ)/wp-content/themes/twentyfifteen/style.css

これをいじるとなると、

  • WordPressがインストールされているサーバー上の Twenty Fifteen テーマフォルダ内にある style.css を直接編集
  • ダッシュボードの左メニューからテーマの編集画面を開き、 style.css を編集&保存

のどちらかの方法を行う必要があります。

ただ今回はできるだけ簡単にカスタマイズしたいので、上記の方法ではなく「Custom CSS/JS」というプラグインを使ってサイトの管理画面からスタイルシートの記述を変更してみようと思います。

プラグインのインストールと有効化の方法については、以前の記事を参照のこと。

 

プラグインを使ってスタイルシートの記述を追加する

プラグインのインストールができたら早速、サイトのスタイルシートをいじってみたいと思います。

WordPressのダッシュボードにアクセスし、左サイドバーの「外観」→「Custom CSS/JS」メニューをクリックします。

menu of Custom CSS/JS

 

以下のような画面が表示されますので、スタイルシートの記述を追記してみます。

※ ちなみに赤枠の下のJavaScriptには、Google Analyticsのトレッキングコードを追加しています。

Custom CSS/JS update view

 

今回の場合の記述内容は以下。

Custom CSS

 

HTMLのbodyタグ以下の要素に、

【文字の高さ】
1.7em

【フォント】
「ヒラギノ角ゴシック」「メイリオ」「Osaka」「MS Pゴシック」「sans-sefif」(優先度の高い順)

を適用する記述となっています。

※ なお「.border-image」の記述では、画像に適用する枠線のスタイルを定義しています。

 

上記のように入力したら、画面の一番下の「Save All Changes」ボタンをクリックします。

以下のようなメッセージが表示されたら、スタイルの適用は完了です。

custom css updated

 

 

サイトを確認してみると以下のようになります。

ofter custom css

 

ちなみに適用前のサイトのは以下。

before custom css

 

サイトのフォントが明朝体からゴシック体に変更されているのがわかります。

その気になればもっと大幅にサイトのスタイルを変更することも可能なのですが、今回はこのくらいにとどめておき、次回からはいよいよ自作のWordPressテーマの作成に入りたいと思います。