Xeory のスタイルをちょこっと修正 – 子テーマでCSSを上書きしてフォントやサイズなどを変更

游ゴシックが嫌いです。

MacBook の游ゴシックはまだいいんですが、Windows 10 の游ゴシックは字が細くて小さい字だとかなり読みづらいです。

最近、年をとったせいで老眼が進んでいるんです。

• 小さい字がダメです。
• 細い線が滲んでしまいます。
• コントラストが低いと字が背景に沈んでしまってよく読めません。

Xeory のデザインは若者向けなんですよね。年寄りにはフォント周りのスタイルがかなり読みづらいなと思いまして、変更することにいたしました。

というわけで今回の修正は、以下の部分をいじることに致します。

• フォントファミリー
• フォントサイズ
• タイトルまわりの余白の調整
• サイドバーのリンクテキストに色付けする

例によって、子テーマを設定して行います。

子テーマを作成して、上書き用のスタイルシートを置く

子テーマの設定方法などは「WordPress で highlight.js を使用してシンタックスハイライトを導入 – 無料テーマ Xeory の改造」の記事で書きましたが、復習も兼ねてさらりと設定方法を整理しておきます。

子テーマの作成

「WordPress無料テーマ「Xeory」を改造してYoast SEOを使う」で書いた内容の要点です。

1. wp-content/themes/ 内に子テーマ用のディレクトリ xeory_base-childを作成
2. 作成したディレクトリに、空の functions.php と style.css と mystyle.css を作成

style.css は以下のとおりにして保存します。

@charset "UTF-8";
/*   
Theme Name: XeoryBase Child
Description: Xeory 子テーマ
Template: xeory_base
*/

前に書いた記事では、このスタイルシートに書き込みをしていけば反映されるようなことを書いていますが、実際のところ、!important 属性を付けなければ反映されません。詳しいことは、highlight.js を導入した前出の記事に書いてありますが、mystyle.css という新しいスタイルシートを作ってWPに登録することにします。

functions.phpは、以下のようにして保存します。

<?php //子テーマで利用する関数を書く

// 親テーマや自作スタイルシートの登録
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
function enqueue_my_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマのスタイル
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/mystyle.css', array('parent-style')); // 自作スタイル
}

こうしておくことで、デフォルトのスタイルへの上書きは、mystyle.css に書き込んで行うことができるようになります。

前の記事と重複しますが、簡単に説明しておきます。

parent-style というハンドル名で親テーマのスタイルを読み込みます。このparent-style に依存関係を持たせて、mystyle.css を読み込ませています。

すなわち、mystyle.css が親テーマの後に読み込まれるように設定をしています。これで、親テーマのスタイルを後から読まれる mystyle.css で上書きできるようになるわけです。

スタイルシート

ここまでの状態でWP管理画面の[外観] – [テーマの編集] の右カラムに、mystyle.css というスタイルシートが見えているはずです。

あまりオススメは致しませんが、このスタイルシートを選択するれば管理画面から直接デザインを上書きすることができます。管理画面のエディタにはシンタックスハイライトがないのでタイポしたり文法を間違っていても気づきにくいですから、できればHTMLエディタなどで書いてFTPでアップすることをお薦め致します。老婆心がすぎますね。（笑）

css は以下のようにしてみました。フォント周りのところだけ抜粋してあります。

/* CSS Document */

/* Font Style */
body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 18px;
    line-height: 1.8;
}

.post-title {
    font-size: 24px;
    margin: 0 0 15px;
}

.post-content {padding: 24px 64px;}

.post-content p, .post-content pre {
    line-height: 1.8;
    margin: 0 0 1.8em;
}
.post-content h2 {font-size: 22px;}

.post-content h3 {font-size: 20px;}

body.color01 .side-widget a,
body.color01 .widget_recent_entries a,
body.color01 .widget_archive a,
body.color01 .widget_categories a,
body.color01 .widget_meta a {color: #1abb9a;}

見ての通りですが、順に説明をしておきます。

1. ヒラギノ角ゴ もしくは メイリオ で表示されるように変更
2. フォントサイズを大きめに変更
3. 行間を変更
4. 記事タイトルのフォントを小さく変更
5. 記事タイトルと本文までの間の余白を狭く変更
6. h2 h3 タグのフォントサイズを変更
7. サイドバーウィジェットのリンク色をサイトのデフォルトリンク色に変更

以上でございます。

なお、このサイトのデフォルトカラーは緑にしてあるので、サイドバーウィジェットのセレクタが、color01 となっているのだと思います。

この部分は、実態に合わせて修正して頂く必要があるかと思います。

これで年寄りにも優しいスタイルに変更できました。

良かった！

余談

最近では紙に印刷して稟議書などを書くことも少なくなってきましたが、Word のデフォルトになっている 10.5 ポイントで作った書類は、偉いお爺ちゃん達にはかなり不評でしたね。

特に役員会向けの資料は12ポイント以上で作成するのが、当たり前の気遣いというものでした。

IT系の年若い社長から、とても小さい字で名前や部署が書かれた余白の多い小洒落た名刺をもらっても、老眼になっている人には読めないんですよね。

僕も若い頃はわからなかったんですけど、この歳になってようやく不便さがわかるようになりました。

正直、小さい字の資料とかを営業さんにもらっても、余程興味を惹くものでない限り眺めるだけで読まないです。パラパラと斜め読みした後、若い子に「良さそうだったら考えて」とだけ言ってぶん投げちゃいます。

最近はデバイスによってDPIも違うので、フォントを px指定するのは時代遅れなのかなと思い始めてはいるんですが、今回はベースのデザインに倣って px指定で修正してみました。

なお、Xeory のデフォルトのフォントサイズも 16px(=12pt) なので適正なサイズではあるはずなんですけど、デバイスによって、でかかったり小さかったり感じるので、やっぱり rem で指定したほうがよいかなと思ったりしております。。

---

おすすめの関連記事

WordPress で highlight.js を使用してシンタックスハイライトを導入 – 無料テーマ Xeory の改造
バズ部謹製の 「Xeory-無料WordPressテーマ」に、highlight.js を導入してシンタックスハイライトができるようにしてみました。また、子テー…

WordPress無料テーマ「Xeory」を改造してYoast SEOを使う
WordPressのバズ部謹製フリーテーマ「Xeory」を改造して、SEOプラグインでメタタグを管理する方法です。子テーマを作成して改造を行います。…

ブログ記事を短時間でガリガリ量産するなら WordPress も はてなブログ もマークダウン記法が最適 － チートシート作ってみました
Wordpress、はてなブログ、MovableType など、ブログに思いついたことを勢いのあるまま文章にして打ち込んでいくとなると、マークダウン記法に勝るも…

さくらのレンタルサーバーでSSL(SNI)を導入しwww有りに正規化したら BackWPup が動かなくなってしまった時の対処法
さくらのレンタルサーバーでSNIベースのSSLを利用しwww有りに正規化すると、BackUPwpがエラーで動かなくなる場合があり、htaccessへ wp-cr…