WordPressのテーマ「stinger5」のカスタマイズその1(webフォント)

ブログを無料サーバに引っ越しました。

オリジナルテーマを作成するのが目標のひとつですが、とりあえず、新しいテーマをインストールして、カスマイズに挑戦してみました。

テーマは、評判の良さとカスタマイズ事例が多いSTINGER5にしました。

STINGER5 – WordPressのはじめ方や使い方

 

 

 

さて、このテーマをカスタマイズするのですが、「子テーマ」を作成してカスタマイズしていきます。

 

小テーマの作り方

小テーマとは、既存の親テーマのいいところを使いながら、カスタマイズしたいところだけをCSSで記述して行く方法。

小テーマといっても親テーマとは別個のテーマとして扱われるので、親テーマがアップデートで上書きされても小テーマは残るという訳です。

まずは、親テーマが入っているディレクトリと同じところに小テーマ用のフォルダを作成。STINGER5の小テーマなので”stinger5child”という名前をつけました。

image

注:当初、親テーマの入っているフォルダ名の中に作成してしまいテーマとして認識されませんでした。からなず親テーマと同じディレクトリに作成してください。

小テーマのフォルダ内にテーマのスクリーンショットなどを入れるための”images”フォルダと”style.css”を作成。

image

”style.css”の先頭には、テーマ名(stinger5child)と親テーマが入っているフォルダ名(stinger5ver20140902)を以下のように記載します。

Theme Name: stinger5child
Template: stinger5ver20140902

ここで一旦、wordpressの管理画面でテーマを見てみると、ちゃんとテーマとして認識されています。

image

この状態で小テーマに切り替えてもちゃんと表示されます。何もカスタマイズされていないので、親テーマをそのまま使っているのと同じなんですね。

カスタマイズしてみる…webフォントでフォントを変更

カスタマイズ第一弾はフォントの変更。webフォントを使ってフォントを変更してみることにしました。

webフォントとは…

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

http://ja.m.wikipedia.org/wiki/Webフォント
ウィキペディア (Wikipedia): フリー百科事典

まずは、使用するフォントを決めます。webフォントは欧文フォントは豊富にあるのですが、和文フォントはあまり種類がないようです。

フリーで使えて、ゴシックで優しい雰囲気のフォントが良かったので、こちらのフロップデザインさんのフォントにしました。

フォントと素材集のフリーダウンロードのフロップデザイン

 

 

フォントファイル(FLOPDesignFont.ttf)をダウンロードしたら、小テーマのフォルダ内にアップロードします。

image

そして”style.css”に以下のように記述します。

@font-face {
font-family: flop;
src: url('FLOPDesignFont.ttf') format('truetype');
}

フォントファイル”FLOPDesignFont.ttf”を指定して、”flop”(任意の名前)として登録しました。

これで、見出しや本文など変更したい要素に”flop”を指定するとフォントが変更されます。

いちいち要素指定するのはめんどうなので、親テーマの”style.css”からフォントを指定しているコードをコピーして、小テーマの”style.css”に貼り付けたら、フォント指定の先頭に”flop”を追加。

* {
font-family: flop, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "MS Pゴシック", sans-serif;
margin: 0px;
padding: 0px;
}

これでwebフォントが優先的に適用されます。

テーマを切り替えてみると…

image

image

 

ちゃんとフォントが変更されていました。

ただし、今回変更したフォントはttf形式しかなかったので、IEには対応していません。IEでブログを表示させると2番目に指定されている”メイリオ”で表示されているはずです。

IEでwebフォントを表示させるには、eot形式のフォントファイルが必要です。

こちらのサイトで変換できるようですが、今回使用させていただいたフォントはライセンス上、変換できないようなので、諦めました。

Create Your Own @font-face Kits | Font Squirrel

 

 

これからいろいろと自分好みにカスタマイズしていこうと思っています。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です