widthレスポンシブデザインは画面幅によってカラム数が変化したり、コンテンツ幅が変化します。本文は読みやすいサイズ固定でいいのですが、記事タイトルはコンテンツ幅によってバランスのいいサイズというのが決まってきます。コンテンツ幅に対してフォントサイズが大きすぎると改行されすぎたり、逆にフォントサイズが小さすぎると間延びした感じになっちゃいます。Luxeritasの場合、フォントサイズの切り替えがスマホ用とPC用の2つしかないのでその中間(ノートPCとかタブレット)サイズでバランスが悪い場合がでてきます。それを何とかしたいというカスタマイズTipsです。下記の動画を再生してみてください。画面幅が最大(PCサイズ)時と最小(スマホサイズ)の時はバランスがいいのですが、その中間、特に2カラムから1カラムに代わる辺りがバランスが悪いと感じます。アフターカスタマイズ後は下記のようになりました。メインカラムの幅の変化に合わせてタイトルのフォントサイズが細かく変更されているのが分かります。レスポンシブのブレークポイントメインカラムの幅の変化に合わせてタイトルのフォントサイズを変更したいので、まずはそのブレークポイントを確認する必要があります。いつも通りChromeのデベロッパーツールを使って調べます。メインカラムはid属性に"main"を設定しているブロックでそこで幅を指定しています。変更される画面幅を調べます。下記の表がその結果です。1772px以下の100%とはメインカラム幅が画面幅と同じということですので、カラム幅は無段階に変化します。指定しているのでそれを調べます。Luxeritasテーマのデフォルトだと下記の2段階になります。3.2remカラム幅が5段階に対してフォントサイズは2段階のなのでバランスが悪い場合も出てくるでしょう。CSSカスタマイズCSSでフォントサイズの指定に関しては、ようわからんという方はとりあえず下記を参照してください。分かりやすく解説されています。CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2いまだにレスポンシブ怖い、、、、。%とかemとかremのフォントサイズ指定があるから。...https://qiita.com/39_isao/items/e8242901ba1aadb75676画面幅に対して設定するフォントサイズメインカラム幅のブレークポイントを元にそれぞれのフォントサイズを下記のように設定するといい感じになりそうです。いう単位が今回の肝です。上記のリンク先で開設されてますが、「ビューポートの幅に対する割合」つまりブラウザの横幅全体を「100vw」とした単位です。4.2vwは画面幅の4.2%という意味です。余白の除いて1行22文字ぐらいになります。772px以下はカラム幅は100%つまり画面幅と同じなので、フォントサイズは画面幅に比例して無段階に変化します。600;}フォントサイズは規定値(3.6rem)以外のみ設定します。セレクタで指定しました。文字間隔をすこし詰めました。ついでにタイトルを含めて見出し(hタグ)を太字に設定しました。まとめ今回のカスタマイズは地味なもので、読者が普通に閲覧しているだけでは気が付かないものです。派手な演出で読者におっと思わせるものは何もありません。このような細部のデザインまでこだわったサイトは読者にとってなんとなく気持ちいいものです(と思いたい)。テーマカスタマイザーとしては満足度の高いカスタマイズ(単なる自己満足?)でしょう。Editingブログでコメントを投稿した後、誤字や間違いに気づくということはよくありますよね。...CSSで蛍光マーカーいろいろ、クレヨン風などテキストに蛍光マーカー風の下線を付ける方法はあちこちで紹介されています。...CSSグラデーションで抜粋を徐々に消えるように表示ブログの記事一覧でタイトルと抜粋文を表示することはよくあります。...【Luxeritas】関連記事を2列表示にカスタマイズLuxeritasは標準で記事下に関連記事が表示されます。コメントをキャンセルメールアドレスが公開されることはありません。