[WP] 子テーマ設定でWebフォントを使う

結構前に利用していたWordpressのプラグインの「wp-tegaki」。
長い間、更新されていないし、利用PHPのバージョンを7.1に上げた(*)際に、エラーで管理ページも開けなくなったので代替としてWebフォントを使うことに。
(* サーバーはさくらインターネットを利用しています。)

WordPressでは星の数ほどテーマはありますが、配信されているテーマをそのまま使うことはほとんど無く、カスタマイズした「子テーマ」として利用します。

子テーマ自体は他のサイトで沢山
[ 子テーマ – WordPress Codex 日本語版 ]


子テーマの設定

子テーマが実装された当初は style.css に親のstyle.cssを @import で読み込むことが定番だったけれど、昨今はfunction.phpで読み込み処理をするのが定番なのね。

style.css

/*
 Theme Name:   Twenty Fifteen Child
 Template:     twentyfifteen
*/

スタイルシートヘッダにはいろいろ記載項目はありますが、最低限子テーマの名前となる「Theme Name」と親テーマとなる「Template」を設定してれば子テーマとして認識されます。
ちなみにTemplateは親テーマの名前ではなく、フォルダ名なので注意です。

function.php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

function.php では親テーマのcssファイルを読み込むコードを書きます。


Webフォントの選択

Webフォントを公開しているサイトはいろいろありますが、Googleでも公開されています。
日本語フォントも試験的に提供されています。

[ Google Fonts ]

[ Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access ]


Webフォント用に funtion.php の編集

Webフォントを利用するのに読込が必要なCSSファイルがあります。

たとえば Google Fonts日本語のM+1pフォントを使う場合

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

href属性で指定してる部分が読み込むCSSファイルになります。

これを読み込み処理を function.php に追加します。

function WebFontCSS() {
    wp_enqueue_style('mpuls1','https://fonts.googleapis.com/earlyaccess/mplus1p.css', array(), null, 'all');
}
add_action('wp_enqueue_scripts', 'WebFontCSS');


CSSでWebフォントの適用

style.css

.wf-mplus1p { font-family: "Mplus 1p"; }

使いたい箇所のCSSクラスのfont-family に追加したWebFontを設定してあればOKです。

[WP] モリサワのWebフォント提供 (さくらインターネット)

uZYSV4nuQeyq64azfVIn_15130980706_64134efc6e_o

「さくらのレンタルサーバー」、「さくらのマネージドサーバー」でのWordpressの利用者を対象にモリサワのWEBフォントが使えるプラグインが提供されました。

「さくらのレンタルサーバ」のWordPressにてモリサワのWebフォントを無料でご利用いただけるようになりました | さくらインターネット

さくらインターネットとモリサワが協業、レンタルサーバー利用者にウェブフォント30種類を無料提供 -INTERNET Watch

当Blogもさくらサーバーを利用しているので、とりあえずデフォルトのテーマを適用させてみた。



ところどころ適用されてない箇所もあるが、確かに文字は見やすくなったなぁ。

[Font] オンラインでプレビューができる「FontSpace」

8900個以上のフォントが無料でダウンロードできる「FontSpace」
(GIGAZINE)

「FontSpace」はフォント・デザイナーおよびフォント常用者のコミュニティーで、8900個以上のフォントが無料でダウンロードでき、それぞれのフォントについて詳細なライセンスや書体見本、さらには実際に自分で入力した文字がそのフォントではどう見えるかがすぐにその場で確認できるようになっており、めちゃくちゃ便利です。

いちいちそのフォントをインストールすることなく入力した文字でプレビューできるのはいいね。

[Windows] Windows XP用に「メイリオ」フォントを提供開始

マイクロソフト、Windows XP用に「メイリオ」フォントを提供開始
(Engadget Japanese)

マイクロソフトのダウンロードセンターにて、Windows XP向けのフォントセット「Japanese ClearType fonts for Windows XP」の提供が開始されました。VistaFont_JPN.EXE (8.5MB)はいわゆるVistaフォント、「メイリオ」バージョン 5.0をインストールするもの。インストールファイルにはmeiryo.ttcおよびmeiryob.ttc (メイリオボールド&ボールドイタリック)が含まれます。

Vistaにする理由がまた一つなくなりましたw

[Font] あずまんが大王のキャラクターやロゴが簡単に描けるフォント

あずまんが大王のキャラクターやロゴが簡単に描けるフォント『Azudings 1』
(中小企業で働くWeb制作担当者のメモ帳) from [>>everything is gone]

Azudings 1』は、あずまんが大王のキャラクターやロゴを描くことが出来るイラストフォントです。

日本語には未対応で、A~Z、a~z、0~9、!マーク、@マークに対応しているようです。これ以外は入力しても空白になります。

080116_azu1.jpg 080116_azu2.jpg

Azuding 1 a~z
あずまんが大王のキャラクターやロゴが簡単に描けるフォント『Azudings 1』
(中小企業で働くWeb制作担当者のメモ帳)

Azuding 1 A~Z
あずまんが大王のキャラクターやロゴが簡単に描けるフォント『Azudings 1』
(中小企業で働くWeb制作担当者のメモ帳)

080116_azu3.jpg

Azuding 1 0~1,@
あずまんが大王のキャラクターやロゴが簡単に描けるフォント『Azudings 1』
(中小企業で働くWeb制作担当者のメモ帳)

デザインフォントはいろいろあるが、ここまで1作品のキャラクタがちゃんと作られているのはすごいな。

・・にしても、やっぱりあずまんがといえば大阪か。いいキャラだもんなw