【コピペで使える】WPテーマ「Twenty Seventeen」のCSSおすすめカスタマイズ
tasan今回はWordPress（ワードプレス）の公式テーマである「Twenty Seventeen」でおすすめのCSSカスタマイズをご紹介します。
「Twenty Seventeen」の問題点
「Twenty Seventeen」はシンプルで非常に使いやすいテーマですが、以下のような不満を持たれる方も多いのではないでしょうか？
- ● ヘッダー画像が高すぎる
- ● なんかフォントがダサい
ここさえクリアできれば使いたいのだけど、変更の仕方がわからず他のテーマを探す・・・
よいテーマだけに残念ですよね。
でも大丈夫！今回は、追加CSSの記述を入れるだけでこの二点をクリアできるサンプルコードをご紹介します。
追加CSSサンプル
ワードプレス管理画面の左側のメニューで「カスタマイズ＞追加CSS」を開いて、以下のコードをコピペしましょう。
これで、ヘッダー画像の高さが画面の高さの半分程度で、フォントも変わっているはずです。
フォントは高さの調整をした場合は該当箇所を編集してもらえば大丈夫です。
※追加CSSではコメントアウト（/**/）を入れるとエラーが発生する場合があるので注意してください。
html, body ,a, abbr, acronym, address, apple, big, blockquotet, caption, cite, code, dl, dt, dd, del, dfn, div, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, iframe, ins, kbd, label, legend, span, object, ol, ul, li, p, pre, q, s, samp, small, strike, strong, sub, sup, table, tbody, tfoot, thead, tr, th, td, tt, var
{
font-family: "YuGothic", "Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif!important;
}
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
height: 50vh;
}
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(50vh - 20px);
}
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 50vh;
}
}
まとめ
このコードがあるだけで「Twenty Seventeen」のテーマはぐっと使いやすくなると思います。
できれば標準機能として入れてほしいですね。
Follow me!
