【OnePress】ベース文字色の変更と、文字サイズの変更方法、ブロックエディタを少し見やすくするカスタマイズなど

【OnePress】をちょこっとカスタマイズするための記事になります。

あくまでも個人的な意見ではありますが、【OnePress】では、以下の点が少々訪問者から見づらいのかなぁと思います。

  • 文字の色が全体的に薄い
  • リンク文字の色が薄い(明るい色過ぎる)
  • ブロックエディタで投稿を編集する際にブロックの判別が難しい

そこで、以下のコードをテーマカスタマイザーの「追加CSS」へ追記することで、この問題を解消していきます(このデモサイトでは既に適用済です)。

/***** 編集画面のブロックに外枠を付ける *****/
.block-editor-block-list__layout .wp-block {
border: 3px solid #f5f5f5;
line-height: 1.7;
color:#555;
}

/***** サイト全体の文字種と文字サイズ *****/
body {
	/* 文字種 */
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
	/* 基本文字サイズ */
    font-size: 17px;
	/* 基本文字サイズに対する倍率 */
    font-size: 1rem;
	/* 基本文字色 */
	color:#222;
}

/***** リンク文字列をはっきりした青色にする *****/
#primary a{
	color:#0275d8;
	font-weight:700;
}

/***** サイドバーリンク文字列を大きくし、色をはっきりさせる *****/
#secondary a {
    color: #222;
    font-size: 1em;
}

これだけのコードでずいぶんはっきりと見やすくなると思います。

【OnePress】では、全体に薄色基調で表現するように基本CSSが書かれているので、テーマ作者の意図からは外れてしまうかもしれませんが、やはりはっきりと文字を表示するのは訪問者から見やすい(アクセシビリティの高い)サイトには必要なのかも知れません。

前述したように既にこのデモサイトへは適用していますので、ご自身のサイトと比べて「見やすい」と感じられましたら是非導入してください。

なお、今回の変更以前に行ったカスタマイズについては以下の記事を参照ください

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)