簡単にきれいなトップページができるWordpressテーマ【OnePress】。そのままでも十分使えるのですが、ちょっとここを・・・という点も使っているうちに見えてきます（これはどんなテーマでも言えることです）。
今回はこのデモサイトを作るにあたって「ちょっとここが・・・」と思った部分のデザインコード（CSS）を紹介します。
親テーマをお使いであればテーマカスタマイザの追加CSSへ、子テーマをお使いであれば子テーマのCSS末尾へ追加するだけで適用できます（※適用後デザインが変わらないときはキーボードの「F5」または「Ctrl」＋「F5」でキャッシュをクリアしてみてください）。
トップページに関するデザインカスタマイズコード
ヘッダーコンテンツ部分の「大きい文字」が大きすぎるのを解消
/***** トップページスライダータイトルの文字サイズ *****/
@media screen and (min-width: 940px){
h2.hero-large-text {
font-size: 60px;
}
}元のCSSで幅940ピクセル以上の画面で見た場合・・となっているので、そこに上書きする形のコードです。
「font-size:〇〇px;」の〇〇の部分を変えると任意のサイズになります
「サービス」セクションの１つ１つのアイテムの高さがバラバラになるのを揃えたい
/***** トップページの「サービス」コンテンツの高さを揃える *****/
.section-services .service-item {
min-height: 480px;
}min-height:〇〇pxの部分で、１つ１つのアイテムの高さの最低値を指定していますので、各自調整ください
「サイトの概要」セクションで固定ページのアイキャッチ画像が表示されるのを解消する
/***** サイトの概要セクションでアイキャッチを非表示 *****/
.section-about .about-image img {
display: none;
}サイト全体に関するデザインコード
ヘッダーのキャッチフレーズがタイトルと重なって表示されてしまうのを解消
/***** キャッチフレーズの位置調整 *****/
.site-branding .no-logo-img.has-desc .site-description, .site-branding .has-logo-img .site-description {
margin-top:15px;
}コードブロックのデザインを変えたい
/***** preタグのデザイン *****/
pre.wp-block-code {
border: 1px solid #2d2c2c;
border-radius: 8px;
padding: 10px;
background: #e9e9e9;
}見出しタグの隙間が少なくて見にくいのを解消する
h1, h2, h3, h4, h5, h6 {
margin-top: 24px;
}今回このデモサイトを作るにあたって変更（追記）したのは
【OnePress】サイドバーありレイアウトでサイトの本文とサイドバーの幅を広げる方法
【OnePress】でサイト全体の文字種と文字サイズを変更する方法
半角英字で入力した文字が、表示すると全て大文字になってしまう現象の解消方法
と合わせてこれですべてになります。
通常のサイトとして維持し続けていくとその他にもいろいろな点の変更が必要かもしれませんが、これらの変更だけでこのデモサイトと同じものは作成可能です。
以上参考になれば幸いです。
2021日5月6日追加事項
また少し見やすくするためのカスタマイズをしました。以下のページから内容をご確認ください（このデモサイトへは適用済です）