16 5月 2015

ワードプレス Virtue Theme の 日本語フォント追加

by | posted in: サイト運営 | 0

Virtue Themeのフォント日本語化とサイドバーwidth変更

本サイトはワードプレス ( wordpress ) で構成されております。Themeは色々と試した結果、virtue 2.4.7 を選択しました。やはり海外のワードプレスのテーマだけあって、日本語フォント周りがあまり充実していなかったため、色々と素人なりにいじくってみました。

変更したポイントは以下です。

 wordpress virtue 2.4.7 / Virtue Theme – Kadence Themes

変更を加えたポイント

  • Body, H1からH5のフォントをMeiryo、ヒラギノに変更
  • サイドバーのwidthを32％に変更。（おそらくデフォルトでは30％位であり、300pt の画像がはみ出てしまったため）

変更方法

  1. WordPressの管理画面の左ペインの外観をクリックして展開
  2. Theme Optionをクリック
  3. Advanced Settingsをクリックし、右側のCSS追加カラムに以下のコードを追加（↑の画像です）
  4. 最後にページ下部の「変更を保存する」をクリック

 

 CSS追加カラム記載したコード

（素人なので、誤り等あったらスミマセン。とりあえずこれで当サイトは動いてます。）

Helveticaを追加したのは、スマホのChrome ブラウザで閲覧した際にスペースが「・」として表示されることを回避するためです。「!important」を追加することで、こちらのCSSの記述を優先させる意味があります。

body {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
h1 {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
h2 {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
h3 {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
h4 {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}
h5 {
font-family:Helvetica,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important;
}

 

メインページとサイドバーの幅のバランスを設定しています。virtueのサポートフォーラムに記載がありました。mainとasideのwidthの値を好きな値に変更します。

@media (min-width: 1200px) {
.main {width: 68%;}
aside.col-lg-3 {width: 32%;}
}

 

お役に立てば幸いです。くれぐれも自己責任でお願いしますね。