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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

游ゴシックが嫌いです。

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

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

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

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

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

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

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



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

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

子テーマの作成

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

  1. wp-content/themes/ 内に子テーマ用のディレクトリ xeory_base-childを作成
  2. 作成したディレクトリに、空の functions.phpstyle.cssmystyle.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 Pゴシック","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 で指定したほうがよいかなと思ったりしております。。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る


コメント

  1. スーパーコピー 腕時計 口コミ 6回 より:

    日本人が経営しているスーパーコピー最高品質(N 級品)ブランド コピー新作最新入荷,ブランド コピー,スーパーコピー,スーパーコピー財布, スーパーコピー 代引き,エルメス コピー,激安ブランドの財布等素晴らしいスーパーコピーブランド専門通販店、大人気ブランドコピー時計 ショルダーバッグトートバッグ財布を海外激安通販!ブランド コピー
    当店はスーパーコピー代引きを販売しているスーパーコピー時計ブランド専門店です。
    N 級のパネライ時計コピー、ロレックス時計コピー、オメガ時計コピー、ウブロ時計コピー、 IWC時計コピー等。
    世界一流 ブランドスーパーコピー時計を取り扱っています。
    スーパーコピー時計業界最も人気のブランド(N級品)販売通販専門店、精巧に作られた のスーパーコピー財布とバッグとジュエリー、ブランド コピー
    ロレックス、ヴィトン、パネライ、ウブロ、IWC 等ブランドコピー腕時計2018新作、品質保証、楽天ブランドコピーは業界最高品質に挑戦!
    全商品はプロの目にも分からないスーパー コピーN品です。

コメントを残す