2018休日の今日はサイトのCSS(スタイルシート)を少しイジッてました。僕はBrooklynというデザインテーマを使ってます。表示速度が速くシンプルなので気に入ってます。白黒を基調にしてるので見出しに圧迫感があるのが気になってました。数日前に見出しを変更してましたが、せっかくのBrooklynのシンプルさが台無しになってます。これはデザインセンスの問題で、僕にはこういうセンスが足りないようです。見出しのカスタマイズに挑戦Brooklynの製作者、シロマさんのサイトにカスタマイズ用の記事があります。見出しの効果とデザインテーマについて出来るだけ出しゃばらない見出しをつくる事を目標にしたので、見出しに背景色は付けません。出しゃばらず、それでいて本文とハッキリ区別できるスッキリとした見出しをつくるのが今回の目的です。記事タイトル部分は文字を小さく記事タイトル部分は通常でっかい文字になってます。もんで2行表示になってたりします。疑問が「これデカい文字」にする必要あるの?でした。記事タイトルは検索画面に表示されたときタイトルが切れないようにするには32文字以内で書く必要があります。32文字書くとどうしても2行になるのが気に入りません。タイトルのお仕事は訪問した時点で終わってるので小っちゃくてもいいじゃないの?ってわけで20pxに変更しました。20pxまで落とすとタイトルを32文字にしても折り返しなく表示されました。それだけだと味気ないので枠を入れましたら、今度はセセコましくなったので、マージンを調整して枠を広げてみました。結局通常と変わらないスペースを使ってしまったけど、スッキリ感は増しました。大見出し(h2)のカスタマイズはてなの大見出しは(h3)になってますが、記事タイトルが(h1)なので順番的には(h2)を使います。訪問者が最初に接触する見出しなので重要度は最も高いといえます。視認性を上げるため大きく表示するため30pxに。デザインは違和感を与えないように記事タイトルと類似したものにして罫線の色で区別化してみました。はてなの大見出し(h3)と中見出し(h4)の違いは文字の太さはてなブログの大見出しは(h3)中見出しは(h4)となってます。僕のサイトで使うのは(h4)まで、サイズは共に21pxで設定しました。h3とh4は文字の太さ以外は同じものにしました。主張しすぎると品がなくなり、控えすぎると見出しの働きをしないので、おさえた青を使ってみたが、青はリンクカラーとして古くから認識されてることを忘れていた。不都合を感じたら変更する予定です。余白の美学とギャップ文字の大きさやマージンなどで余白とギャップを意識したつもり。余白は特に重要で内容はべつにしても見た感じがスッキリして美しく読みやすく感じる。目次はスルーされる場合が多いので小さい文字で、特に大見出しの直下で表示されるので良い感じでギャップを演出できたのではないでしょうか?目次はkimixさんのサイトからお借りしました。見た目が大事なのはブログ記事にしても同じで、見やすさにつながるカスタマイズはユーザビリティをあげることにつながります。必要以上のカスタマイズはサイトの表示速度を遅くする原因になるので注意が必要です。装飾したところで見慣れたら同じ、表示速度を落とさないように気を付けるべきでしょう。今日は名護市長選挙の投票日、朝早くに投票はすませました。youTwitterSharePocketHatenaLINEコピーするこの記事を書いた人nago癒されたい管理人のNAGOです。プロフィール-はてなブログauthor関連記事はてなブログPro解約の手順はてなブログProなど、有料プランをやめる場合には解約手続きが必要になります。先週の日曜日(5月27日)に、はてなブログからワードプレスに移転しました。...はてなブログならできる簡単にアクセス数を増やす方法はてなブログでアクセス数を倍増させるのは簡単です。ワードプレスと違いコミュニケーション機能が多く実装されているため特にはてなブログでアクセス数が少ないと感じている方にオススメの方法です。読者登録仕方から活用法、スターの使い方。はてなブックマークなどを的確に使う事ができればアクセスがないという悩みはなくなるでしょう。~も訪問者の少なさに泣きそうなNAGOです。...はてなブログ記事の概要を簡単に編集する7つのポイントはてなブログにはページの内容を編集できる「記事の概要」が設置されてます。記事の概要はメタディスクリプションのことでここで編集記述されたページの内容はスニペットと呼ばれる検索結果画面に表示されます。今回は、はてなブログで記事の概要を使い多くのアクセスを呼び込むための7つのポイントをご紹介します。書籍/漫画ブログ運営アクセスアップnago癒されたい管理人のNAGOです。