【コピペで使える】WPテーマ「Twenty Seventeen」のCSSおすすめカスタマイズ
たーさん最終更新日時 : 2026.08.10
今回は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」のテーマはぐっと使いやすくなると思います。
できれば標準機能として入れてほしいですね。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
