ブログのデザインを変更：はてなブログのカスタマイズに関する知見まとめ

昨日紹介したメインサイト Neo's World のリニューアル記に続いて、本ブログ Corredor のデザインを変更した話。

見た目的には、リキッドレイアウトになったことと、コンテンツ部分のフォントサイズがウィンドウ幅に応じて拡大・縮小される点ぐらいか。

今回はデザインのカスタマイズ作業に際して得た知見をまとめる。

目次

デザイン変更の目的

今回のデザイン変更の目的は、デザイン変更そのものというよりも、カスタマイズ CSS の管理を容易にすることが狙いだった。

固定幅2カラムという古めのデザインを捨てたいことや、レスポンシブルなフォントサイズ変更を取り入れたいという個人的な流行もあったので、デザイン変更に合わせてカスタマイズ CSS 全体を綺麗にしたいなと考えた次第。

SASS での管理に移行

これまで、カスタマイズ CSS は素の CSS で書いていた。当時はてなブログを色々と研究した結果、素の CSS でゴリゴリ自分で書き上げる方が、コードの量を削減できると考えたからだ。

しかしこれは、管理が物凄く大変だった。はてなブログに限らず、ブログサービスや CMS 全般にいえるが、自分でページ全体の HTML を作っていないので、どの ID やクラスがどういう関係性にあるのか、スタイルがどうカスケードされていくのかが分かりづらいのだ。

そこで、SASS を導入し、HTML 構造をそのまま CSS (SCSS) に起こしておくことで、HTML 構造やスタイルのカスケードのされ方を把握しやすくすることにした。また、SASS の変数や @mixin などを利用し、より可読性を向上できそうなのも利点だった。

ネストしすぎると生成コードの量はどうしても増えてしまうが、後々カスタマイズしやすいコードである方が、精神衛生的には良かった。

開発とビルドには node-sass を素で利用。npm-scripts で指定するだけの簡素な方針。

段組には CSS Grid を使用

ページ全体を構成する2カラムレイアウトや、フォロー・シェアリンクなど、要素を横並びするところには CSS Grid (display: grid) を使用することにした。

いいかげん float も古いかな、というのと、書き方さえ覚えたら CSS Grid の方が柔軟性ありそうで試したかったのとで、採用した。IE11 では動かないので注意。IE のためにはベンダプレフィックスが必要で、さらに標準仕様と違うところがいくつもあるのでつらい (もう IE11 捨てていいですか…)。

今回色々学べたので、CSS Grid についてはまた記事にまとめようと思う。

blog.css の存在

はてなブログは、何のスタイルも適用しない場合であっても、blog.css という標準スタイルシートが適用されている。これは主にヘッダやコメント欄など、はてなブログの基本機能を実現するためのスタイルが含まれているものだが、一部、コンテンツのスタイリングに影響する指定も含まれている。

また、「ヘッダ画像」を追加していると、ヘッダに別のスタイルが適用されたりとか、JavaScript を使ってインラインにスタイルがブチ込まれたりとかすることもあって、「普通に考えたら自分のスタイルが適用されるはずなのに何故か反映されない → よくよく見たら blog.css が優先されていた」みたいなことが多い。回避するにはセレクタの詳細度を上げたり、やむなく !important を指定したりする必要がある。

この blog.css の存在を覚えておかないと、思いもよらぬ結果になることがある。ブラウザの「開発者ツール」でのチェックは必須だ。

ページによって少しずつクラスが変わる

はてなブログの場合、「トップページ」「アーカイブやカテゴリを選んだ時の記事一覧ページ」「記事詳細ページ」「About ページ」などのページの種類があり、これらで少しずつ CSS クラスが変わっているので、トップページだけ見てスタイリングしているとアーカイブページで大きく崩れていたりする。

似たような作りなのに HTML 構造からも違ったりするので、結構面倒臭い。頑張って HTML 構造を読み取り、SCSS に落とし込んでメモしておくしかない。

スマホ向け AdSense 広告がレイアウト崩れを引き起こす

スマホで表示した時のみ、画面上部からスワイプ表示される AdSense の自動広告が自動挿入されることがあるのだが、コイツがコンテンツ全体を押し下げるようで、position: absolute を使った要素との相性が悪かった。

そこで、ページ全体を囲む #container を position: absolute で画面左上に絶対配置し、幅を 100% にすることで対応した。…が、もっと良いやり方ありそう。なんとかならんか AdSense 広告…。

サブブログでブログデザイン調整用のブログを作ると良い

はてブロは1ユーザが複数のブログを開設できるので、デザインを調整するためだけのブログを別途立ち上げ、そちらで編集作業を行うのが良いかと思う。

自分も今回はそうやってカスタマイズしたのだが、いざ適用すると色々と不備が見つかって、リリースしたものの未だ修正中、といったところだ…。

以上

不備はあるものの、とりあえずデザイン変更とともに SCSS の整理ができた、といったところ。こんな雑なブログだが、今後ともご愛好いただけるとこれ幸い。