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をいじっています。以下のようにコメント化してフォントサイズの動的制御が行われないようにします。
function shrinkTitle() {
if ( ! $titleText.length ) {
return;
}
// $titleText.css({ fontSize: fontSize * .8 });
}
function unshrinkTitle() {
if ( ! $titleText.length ) {
return;
}
// $titleText.css({ fontSize: fontSize });
}
mai-theme.cssでデフォルトのフォントサイズが定義されているため、これを修正します。一行に収まって欲しいので、pxでは無くてvwで指定してタイトルが二行に別れないようにしておきます
.site-title a {
display: inline-block;
font-size: 4.3vw;
font-weight: bold;
line-height: 1.2;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 16px;
margin-right: 16px;
}
vwを指定すると、大画面のモニターなどでフォントサイズが大きくなりすぎてしまうため、PCでは一定のフォントサイズとなるようにします。とりあえず32pxに設定しています。
@media only screen and (min-width: 769px) { .site-header.has-header-left.has-header-right .site-title {
text-align: center;
}
.site-title a {
margin-top: 24px; margin-bottom: 24px; font-size: 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」でもタイトルのフォントサイズ変更はできませんでした。
何か他の方法をご存知の方がいれば、教えてください。
ではでは(^^)/
