読者です 読者をやめる 読者になる 読者になる

ぼちぼち書くブログ

日記とかうまいもんとかパソコンのことをマイペースで記します。高知市に住んでいるので地元の情報も投稿します。

ブログヘッダーの高さ修正:はてなブログ

はてなブログを使い始めてそこそこ日数も過ぎたので、ちょっと見た目を弄ってみようかなと思った次第。ちなみに私は見た目はあんまり気にしない方。ブログのデザインは「見やすさが一番」だと思ってる。

使い始めてから気になっているのは一つ、ヘッダーが高すぎる事。無駄に画面の領域を食ってしまうので、いちいちスクロールしないとコンテンツが見えないのは非合理的だと思ったり。

そもそも、はてなブログって見た目弄れるん?と疑問を持ったので調べてみた。

どうやら、デザイン-カスタマイズ-{ }デザインCSSで行える。

ここにCSSを定義すると、標準のCSSを上書きするので(CSSは後書き優先)高さを低くするCSS記述を行った。私はWebブラウザはFirefoxを長く使っているので、いつもどおりFirebugでヘッダー部分のCSSを調査。

#blog-title-innerのpaddingで高さに余裕を持たせている事が分かったので、ここの数値を小さくすれば高さが縮まる。

f:id:sasapurin:20150215000535p:plain

f:id:sasapurin:20150215000556p:plain

出来る事に制限はあるだろうけれど、XHTMLとCSSの基本を理解していれば、そこそこのカスタマイズは行えそうだ。もうちょっと詰められるなぁ

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)