ブログのデザインをカスタマイズしてみた
本当はレスポンシブにしたかったのですが、それはもう少し後になりそうなので
とりあえず簡易的にデザインをカスタマイズしてみました。
目次
主なデザインカスタマイズ項目
- はてなのヘッダー、フッターをCSSで非表示
- メニューから「ホーム」を削除
- li要素の横幅をpx指定からパーセンテージ指定に変更
- メニュー名「田舎暮らし」を「田舎」に変更
- メニューマウスオーバー／タップ時に、色が反転する様に変更
デザインをカスタマイズした理由
興味ないかもしれませんが、デザインをカスタマイズした理由を記載します。
1. はてなのヘッダー、フッターをCSSで非表示
できるだけシンプルにしたかったので、非表示にしました。
ただ、スマホの場合ですが、「読者になる」ボタンが消えてしまうので、
今後どこかにボタンを表示するようにします。
対応方法は以下
#globalheader-container {
display:none;
}
#container {
margin-top:0px;
}
PCについては「デザインCSS」項目に記述しましたが、スマホの場合はデザインCSSの項目がないので、そのままヘッダの「タイトル下」に記述しました。
ちなみに私はPCとスマホを別々で記述していますので、「スマートフォン用にHTMLを設定する」を選択しています。
スマホの方は若干調整しており、以下の記述をしています。
#globalheader-container {
display:none;
}
#container {
margin-top:5px;
}
気持ちの問題ですね、トップを5px空けています。
スポンサーリンク
2. メニューから「ホーム」を削除
これはメインビジュアルの画像がトップに戻る様になっているので、あえて外しました。
本当は「ホーム」リンクを用意すべきなのでしょうが、スマホだと狭くなりすぎるのです。
いつかメニューをハンバーガーメニューにした時は、「ホーム」リンクを復活したいと思います。
3. li要素の横幅をpx指定からパーセンテージ指定に変更
元々はメニューリンクが左に寄っていたので、可能な限り中央に寄せる対応を行った時に、
画面を縮めた際にブラウザ枠外にはみ出てしまうので、その時に調整した対応です。
これで正しいのかは分かりませんが、とりあえずブラウザのサイズを極小にしない限りは、ずれないと思います。
4. メニュー名「田舎暮らし」を「田舎」に変更
カテゴリ名をメニュー名にしていたのですが、これも横幅の関係で変更しました。
これもメニューをいつかリニューアルした時に戻したいと思います。
5. メニューマウスオーバー／タップ時に、色が反転する様に変更
メニューの背景を黒にしているのと、どこまでがクリック対象なのか分かりにくかったので変更しました。
PCとの場合は、メニューリンク付近をマウスオーバーすると、クリック可能な範囲が白くなり、メニューテキストが黒になります。
スマホの場合は、タップしたときだけになりますが、上記同様に色が反転するようになります。
PCの対応方法は以下
#top-editarea a {
padding:8px 0 8px 0;
margin: 0 8px 0 8px;
display: block;
color:#fff;
}
#top-editarea a:hover {
padding:8px 0 8px 0;
margin: 0 8px 0 8px;
background-color: #fff;
color: #000;
}
上のCSSでは、メニューのaタグを「display: block;」でブロックレベルにして、liの中にaタグがあるので、その範囲内がクリック対象になるようpaddingとmarginで範囲を調整しています。
下のCSSではマイスオーバー／タップ時に色を反転させる処理を書いています。
ちなみにこれもPCとスマホ両方に記述しています。
今後カスタマイズしたい内容
- デザインテンプレートの変更
- メニューハンバーガー化（スマホ）
- 白黒脱却
- 非表示にした読者になるボタンを追加（スマホ）
- ボタンのカスタマイズ（Twitterフォロー、読者になる）
- レスポンシブ対応（まだまだ後になるかなぁ）
他にも改善したほうが良い点ってあると思いますが、とりあえずこんな感じですね。
それより、もっと記事の内容を充実しないとですね。。
そもそも早く移住しろって話です。。
おわりに
カスタマイズしている時って本当に楽しいですねー
時間忘れて、これ書いているのが朝5時になっています。。。
カスタマイズ始めたのが前日の22時頃なので、7時間程作業とこの記事を書いている訳です。。
あー、今日は徹夜で仕事やることになるのか。。
それではまたー
