グローバルナビを手書き風にしました
もしかしたらお気づきの方もいらっしゃるかも…ですが、グローバルナビ（ヘッダー下のメニュー）を手書き文字の画像にしてみました。
▼before
▼after
「こんなんでメニューってわかるんだろうか？クリックできるってわかるかな？」
という不安もあったので、項目名の前にアイコンをつけて“クリックできる感”を出してみた…つもり。クリックできる感ありますでしょうか。。
そもそもグローバルナビ自体設置したのは割と最近です。
▼beforeで使っていたグローバルメニューはこちら。
ハンバーガーメニュー（横３本線でタップすると開くやつ）もすっきりしてていいかなあなんて思いつつ、ハンバーガーメニューってよっぽどそのブログに興味持ったときしかわざわざタップしないよなぁ…と思ったので、タップせずともメニューの項目が目に入る形にしていました。
でも、なんかイマイチ気に入らなくて。
ヘッダー画像がフィルム写真＆手書き文字でアナログ感あるのに、マッチしない…ということで、メニューも手書きにしてみることに。
画像にカテゴリ一覧をリンクさせて並べればいいかなと思ったのですが、せっかくbeforeで使っていたメニューがあったのでそれを利用して、
「育児」「暮らし」などのテキストを画像に置き換えるだけにしました。
この方法だと、横幅が狭くなったときにメニューの幅を自動で調整してもらえたり、項目数が増えたら縦に２段にするなどが簡単にできるのでよいかなぁと。
文字について
手書き文字画像の作り方ですが、
- 万年筆で紙に書いたものを家庭用プリンターでスキャン
- 背景を透明に
- 線の色を若干濃淡がわかる程度にトーンカーブで調整
- 適当に画像サイズをそろえる（90x40pxくらい）
こんな程度です。。
ちなみにこのブログ内で使っている手書き文字はすべて紙に書いてスキャンしています。超アナログ…。
ペンタブがあるともっと簡単に手書き文字を使えるんでしょうか…でも絵を描くわけでもないし、今の方法でなんとかなっているので今後もきっとこのままです。
変更してみて
ヘッダー画像を作った時にも感じましたが、このアナログ感がすごく好きだなぁ！と実感。
自分の字に全く自信はないし、もうちょっと改善の余地がある気がしないでもないですが、自分のブログへの愛着がぐんとアップしました。
もともと手書き文字とか手描きイラストが好きだし、ヘッダー画像もノートに万年筆という「書く」感あるデザインなので、今後も手書きの文字をどんどん使っていきたいと思っています。
もともと家の中のあらゆるラベリングもマスキングテープに手書きなのです。
テプラ等を使えばもっとすっきりするとはわかっているんだけども、どうもオフィス感出る感じが苦手でして…
そんなわけでこれからも（これまでも）ちょこちょこデザインをいじっていくつもりです。試行錯誤中でお見苦しいところをお見せするかもしれませんがご了承くださいませ。
これまでのカスタマイズについても少々
使用テーマとカスタマイズしたこと
"Essay"というテーマを使用しています。
このテーマがもともと“ノートっぽい”デザインなのですよね。クリーム色の背景に、ノートの罫線のようなシンプルなラインの見出しに。そこがお気に入り！
このテーマ、普通にインストールすることもできますが、「Plain」という元のテーマに追加CSSを貼ることでも実現できまして、不要なものを削ったりアレンジしたりがやりやすいので、カスタマイズしたい人には便利です。（そして勉強になる）
テーマ製作者の方がとても親切で、テーマのブログにてカスタマイズ方法をいろいろ公開してくださっている上、「こんなカスタマイズがしたい」という質問にもすごく丁寧に答えてくださいます。
（私も質問しまくっております。。快くお答えいただき本当にありがとうございました！）
私もなんだかんだいろいろ変更しています。主なものは
- 背景色をデフォルトより濃く
- 指定されてるフォントがWebフォントのNoto Sans Japaneseなのですが、重いのでやめて自分で指定→その後Noto Sans Japaneseが軽くなったようなので再度採用しました。やっぱり好き。
ちなみにフォント指定するのにこちらが便利です→Font-familyメーカー：標準フォント一覧からサクッと指定 - 見出しのデザイン。h2を設定したのと、h5のデザインを変更
- トップページ（記事一覧）からはてなスター・ブクマ数を非表示に
- サイドバーのリンクをバナーに
（PCからだとこんな感じ）
- その他細々とデザイン変更（引用とかカエレバリンク、シェアボタン・フォローボタンなど）や余白の調整など。
シェアボタンのカスタマイズはこちらを使わせていただいてます→【FBシェア数非表示版】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する
今後やりたいこと
- サイドバーのモジュール名を手書き文字の画像に置き換えたり…できるのだろうか。
難しそうなら手書き風のフォントにしてみようかな。 - 見出しとか仕切りライン（？）とかに、もっと手書き（手描き）素材を使いたい。自分で作ってみようかと思う
- ヘッダー画像、写真のアスペクト比（3:2）にこだわって今のサイズになっているけど、やっぱりちょっと大きすぎる（特に縦幅が）気がする…
今の雰囲気は保ったままで、もう少し横長の画像にしてみようか。 - 気になっている細かい箇所の調整
- 製作者の方にこれ以上質問しまくるのも申し訳ないし、自分で調べた方が勉強になるけどカスタマイズするたびに調べてはコピペ、調べてはコピペ…とやるのもめんどくさくなってきたので、一度きちんとHTML・CSSの勉強をしたい。（Progateをちょっとやってみている。）
→いずれははてなブログのテーマの制作とか、自力でウェブサイト制作とかしてみたい！
そんなこんなで、いったいどこを目指してるんだ私は、という感じになってきましたが…
とりあえずやりたいと思ったことはどんどんやってみようと思います！
▼文字を書くのに使っているのはこちらの万年筆。お手頃でポップで大好き！
ただ３本持っていて全部ペン先がEF…変えればよかった。
▼インクはヘッダー画像にも写っているiroshizuku。何より見た目が好み！
▼こちらも買ってみたので、もっと万年筆活用したい。
