ブログのデザインを新しくした勢いで、ブログデザインのカスタマイズ（設定を変更）にも挑戦しました。主な変更点は３つ。
- ブログタイトルの下にグローバルナビをつける
- ブログタイトル部分（ヘッダー）に少し色のある画像を貼る
- スマートフォンにも対応のレスポンシブデザインへ
グローバルナビ
グローバルナビは、ブログデザイン「Brooklyn」の作者さんが、一般ユーザー用と有料プラン「はてなブログPro」ユーザー用のそれぞれのコードを紹介してくれています。ただ、他のブログデザインでは使えないかも知れません。
最初、「グローバルナビ」って何？とわからずにいましたが、説明を読むとタイトルの下に帯状に並ぶ項目のリンクだとわかりました。さらに、それぞれの文字にカーソルを当てると小さな項目のリンクが表示されます。
私がプルダウンメニュー（ドロップダウンメニュー等、別名あり）と思っていたのは、大きな項目の下に並ぶメニューでした。
グローバルナビとは、サイトの上部に並んでいて全ページ共通で表示されているリンクのことです。 ユーザーを目的のページに適切に案内するために、非常に重要な場所となっています。
とのことです。
このブログもカテゴリーが１７にまで増えました。サイドバーにもカテゴリーは表示されますがバラバラ感満載なので、整理したいなと思っていたところです。これ幸いと挑戦しました。まず、このブログのカテゴリーを５つの大きな項目「高校時代」「tn・近況」「お題・話題」「パズル」「その他」に分類。17のカテゴリーを振り分け、続いて小項目に個々のURLを貼り付けました。（６個以上になるとデザインが崩れるとのことでした）
手間はかかりましたが、何とか完成。よかった、よかった。これで、高校時代blogなのに、高校時代じゃない話題が圧倒的じゃんと思われることも少しは減るでしょう。「このブログのメインは高校時代です」とグローバルナビで示した格好です。
ヘッダーに少し色をつける
デザインがあまりにモノトーンだったので、少しだけ色をつけました。こうすれば同じBrooklyn を使う人同士でも区別ができるかな？と思ったのです。
微妙なデザインと色ですが、むしろそれが私らしいかな？と思っています。
レスポンシブデザイン
以前の記事、同じの探し第２問「再寅イ！」、らしさ探し「ＴＲＹ！」 で、さじ (id:conasaji)さんから
スマホレスポンシブ対応だと嬉しいです。
とのコメントをいただいていました。でも、不勉強なので、スマホレス？ポンシブ対応？スマホ無しで前向きな（それ、ポジティブ…）対応？って感じで何のことかわかりません。
調べました。ありました。
レスポンシブWebデザインとは、スマートフォン・タブレット・PCなど、異なる画面サイズの幅を基準にしてWebサイト表示を柔軟に調整し、見やすくすることを指します。 レスポンシブWebデザインのメリットは、同一のファイルですべてのデバイスに対応した表示ができる点にあります。
引用元： レスポンシブWebデザインとは？ MarkeTRUNK
Brooklyn も対応しているとのこと。
ってことで、スマホレスポンシブへの切り替えはあっさり済んだのですが、ここで問題が発生。PCのデザインとスマホ対応のレスポンシブデザインで推奨されるヘッダー画像の大きさが違うのです。
適当な大きさ、デザインを決めるのに試行錯誤を繰り返したので、ヘッダーの画像を何種類も作り直しました。きっと、もっと効率の良い作成方法や適したデザインがあるはずだと思いつつ、何とか自分で作成した画像を使いたくて、中途半端な仕上がりになりました。
注意点
いろいろ調べている内に、一般ユーザーと「はてなブログPro」ユーザーとの違いも勉強できたので記録しておきます。
は禁止事項とのことです。
最後に
もう３年もはてなブログを利用しているのに、まだまだ知らないことがたくさん。
記事の最後にこんなボタンを設定できることも、先日知ったばかりです。
ご利用いただけると嬉しいです。
