気を付けること、推奨するCSS設定、などを解説
カスタマイズ
WordPress 海外テーマ 日本語
目次
海外のWordPressテーマの初期設定は日本語フォントと相性が悪い
海外WordPressのテーマが日本語サイトと相性が悪い3つポイント
英語を前提にCSSが設定されているため
1.フォントの種類が英語向け
当たり前ですが英語向けのフォントが選択されています。
英語向けフォントは日本語で使用すると、日本語には適応されずにアルファベットや数字だけが目立ってしまうことがあります。
2.文字のサイズが大きすぎる
英語は同じ文字サイズでも日本語よりも画面上だと小さく見えます。そのため、海外テーマのデフォルト文字サイズは日本語よりも2〜3pxほど大きく設定されています。
そのため、日本語で使用すると見出しからメインコンテンツの文字サイズまでやたらと大きく感じることでしょう。
2.行間（line-height）の設定が狭い
日本語でのサイトはスマホに合わせて細かく改行しましょうと言われています。しかし、英語の場合は文章ごとの改行は行わず、段落ごとに改行を行います。
英語のページを見ていただくと分かると思うのですが、全体的に文字が詰まっている印象を受けます。そのため、海外テーマでは行間も国産テーマよりも詰め込んだ設定になっています。
日本語では行間を詰めると文字が詰まりすぎて読みづらいです。
海外WordPressテーマを日本語で使用する時におすすめのカスタマイズ
1.フォントの種類を日本語に最適化
日本語フォントも種類はたくさんありますが、こだわりがなれば、カスタマイズ画面の追加CSSに以下のように記載しておけばOKです。
body{
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
word-break: break-all;
-webkit-font-smoothing: antialiased;
}2.文字サイズの調整
文字サイズは16pxで間違いなかと思います。サイトの雰囲気によってフォーマルなサイトは15px、カジュアルなサイトは17〜18pxに設定しても良いです。
body{
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
font-size:16px;
}加えて、見出しやサイドバーも文字が大きい場合は2〜3px、もしくはrem設定の場合は0.1〜0.2rem小さく修正します。（海外テーマの見出しの文字サイズはpxではなく、rem、emで設定されていることが多いです。）
3.行間の設定
海外テーマの行間はline-heghtが1.2から1.4に設定されている場合が多いです。これは日本語では少し詰まっているように見えるので、1.8くらいに修正します。
body{
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
font-size:16px;
line-height:1.8;
}さらに、word-break（英単語の分割）とfont-smoothing（フォントの滑らかさ）も設定しておきます。
海外テーマには以下の追加CSSをコピペしておけば日本語でも使いやすいデザインに変更できます。
テーマによってはクラスに個別で設定がされている場合があるので、デザインが適応されない場合は全ての語尾に!important設定を追加してみてください。大体は解決します。
body{
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important;
font-size:16px;
line-height:1.8;
word-break: break-all;
-webkit-font-smoothing: antialiased;
}
