ホームページ制作

Genesis子テーマ Mai Theme Engineのタイトルサイズを変更する方法

10年間エンジニアとして働いており、副業でホームページ制作を行なっています。

「Genesis Frameworkの子テーマであるMai Themeを使っているけど、タイトルのサイズが思ったように変えられなくて困った。」

こんな経験ないですか?

無いですよね。笑
これは、ほぼ備忘録として書いています。プラグインのコードを修正するため、中級者向けです。

Mai Theme Engineとは

G-DESIGNでは、ホームページ制作はSEOに強いGenesis Frameworkを利用しています。Genesis Frameworkの子テーマをカスタマイズしてクライアント様に納入する時に、カスタマイズしやすいBizbudding社のMai Themeはよく使っています。

カスタマイズしやすいMai Themeですが、タイトルのサイズが変更しにくいという欠点があります。

Bizbudding社のMai Law ThemeやMai Lifestyle Themeは、Mai Theme Engineという共通のプラグインが動作します。この中にあるJavascriptでタイトルのサイズを動的に調整しているため、WordPressのカスタマイザー画面からCSSを調整しても、適用されません。

修正方法

まずは、Mai Theme Engineのソースを取得します。Bizbudding社のMai Low Themeなどのテーマをインストールすると、Mai Theme Engineプラグインは自動的にインストールされます。

本番サーバー上のファイルを直接修正してもいいのですが、VCCWなどのローカル開発環境を構築して確認していきます。

下記サイトからダウンロードできます。

https://github.com/maithemewp/mai-theme-engine

VCCWのローカル環境構築方法は、ここでは割愛させていただきます。

mai-theme.jsの中で、shrinkTitleとunshrinkTitleの中でcssをいじっています。以下のようにコメント化してフォントサイズの動的制御が行われないようにします。

mai-theme.cssでデフォルトのフォントサイズが定義されているため、これを修正します。一行に収まって欲しいので、pxでは無くてvwで指定してタイトルが二行に別れないようにしておきます

vwを指定すると、大画面のモニターなどでフォントサイズが大きくなりすぎてしまうため、PCでは一定のフォントサイズとなるようにします。とりあえず32pxに設定しています。

最後に、Mai Theme Engineはminifyされたcss、jsを読み込んでいるため、mai-theme.min.cssとmai-theme.min.jsを作成します。わたしはVisual Studio CodeのJS & CSS Minifierプラグインで作成しています。

問題なければ、サーバーにファイルを転送して完了です。

おわりに

フォントやプラグインを直接修正しているため、プラグインのバージョンアップ時に修正したコードが消えてしまいます。このため、この方法ではバージョンアップの度に修正が必要となります。Mai Themeのフォント変更ができる公式プラグイン「Mai Style」でもタイトルのフォントサイズ変更はできませんでした。

何か他の方法をご存知の方がいれば、教えてください。

ではでは(^^)/

ABOUT ME
律野桜哉
RPAコンサルタントのプロコアラです。長年のエンジニア経験を活かしてして外資系コンサルファームでRPAコンサルしてます。 転職ノウハウ、プログラミング、英語の勉強方法など分かりやすいように解説していきます。