こんにちは。ぼっちバイカーです。
スマホから見てる方は既にお気づきになっているかもしれませんが、ヘッダー画像やCSSスタイルを大幅に変更しました！オレンジ！
せっかくなのではてなブログのカスタムの内容をブログで解説しようか思いましたが、ネットで調べれば出来るしもっとすごい人がしっかり丁寧に書かれてます。という事で僕は自分が苦労した情報だけメモ程度に書き残すことにします。
・・・なのでこの記事の半分以上はドヤ顔自慢です。
主に変更したのはヘッダー
ヘッダーが大幅に変わりました。
今までははてなブログデフォルトの「ヘッダー画像+ブログのタイトル+ブログの説明文+自分のアバター画像」だったのがヘッダー画像のみにしました。
ビフォアー
アフター
ヘッダー画像をオリジナルで作成した人のブログを読むと「はてなのデフォルトだとみんな同じでつまんない」と書かれてましたが、僕は個人的にははてなデフォルトも好きです。画像もEDRのかっこいい写真が撮れたら気軽にアップデートできますし。
今までの硬派な感じも好きでしたが、「いつかは僕もオリジナルヘッダー欲しい」というカスタム欲はずっとありました。
…しかし絵心がない僕にはヘッダー作成はレベル高杉
絵心もなくレイアウト(DTP?)知識もないしフォトショやイラレはCS2で時代が止まっている僕。しかもツールはPCにインストールされていない。
AdobeのCCのお試し期間でやるかなぁという考えもよぎりつつも「本気でいつかやるときにしよう。今はまだ構想を練っているのだ」と自分に言い訳する怠惰っぷり。
映画やアニメのロゴをパクるオマージュするのがよさそう
もともとセンスがない人が0から作るなんてことをやってもダメに決まってます。
パクリはダメですがオマージュならOKなので、いろいろな映画やアニメのタイトルのロゴをチェック。絵はもう無理なので文字組で何とかできそうなタイトルを探しました。
さすが、タイトルは作品をあらわす非常に大事なものですし何気にコリコリにこだわって作られているってワケ。
とりあえず無料でインストールも不要のGoogleスライド(パワポみたいなやつ)で適当にイメージを作ったりはしていました。
うーん…
デフォルトのゴシックフォントということもありますが、やっぱり素人には厳しいゾ。
ここまで来てフォントとかレイアウトともういろいろ悩んでしまい煮詰まってしまったのです。
「イケてないヘッダー使うくらいならはてな社がコリコリにこだわって作ったデフォルトのヘッダでいいじゃん」って何度も戻っては悩んでの繰り返しでした。ｲｲｼﾞｬﾝｱｾﾞﾙﾊﾞｲｼﾞｬﾝ…
悩んだ末、はてなブロガーのあの人に相談した
結局半年くらい悩んでいたのですが最終的には、同じはてなブロガーでCB400SF乗りのヅッキー (id:grgr_bnbn)さんに泣きつく形で相談したのでした。
最初は構図とか無料で使えるイラレ的なのを紹介やらレイアウトのTipsを教えてもらう感じでしたが、僕がニッチもサッチもいかない状況にいることを察してくれ、最終的にはご厚意で僕のイメージ図案からヘッダー画像を作って頂けることに！！
出来たのがコレ！（二回目）
デデン
ヘッダーを見たときの僕
まず「ぼっちバイカーのブログ」っていう文字組み。色やフォントサイズが違うのにうまく調和が取れててスゲェ！このタイトルだけでもオシャレでセンスを感じます。
そしてなんて言っても左側にあるEDR君のイラスト！！
今までの写真のEDRはかっこいいイメージでしたが、イラスト化されたことでキャラクター感が出て優しい感じが増えました。
そしてよくハンドル周りを見ると、黄色いリス君の姿も…う、うれしい！
今までのヘッダーだと、初めてブログに訪れる人は僕のことを硬派ながちがちのオフローダーだと勘違いされたかもしれません。しかし、このヘッダーだとEDRで楽しくバイク生活を送っている感じが伝わりやすくなったんじゃないかなって。
もともとブログの内容は初心者が感じたことを初心者の目線で書くようにしているのでこっちの方がピッタリだなぁって！
あとはヘッダーの印象に合わせて、CSSの見出しやリスト、あとURLリンクの色もちょこっと変更しました。
…うん。別ブログですね。ちょっとオレンジ成分多めですがしばらく様子見てみます。
・・・
改めて素晴らしいヘッダーをありがとうございました！ヅッキーさん！
ヘッダーが変わって、無駄にスマホから見て思わずニヤニヤしてしまいます。
はてなブログのヘッダー画像を作る時のサイズはコレ
PC版とスマホ版で二種類画像を用意するといいと思います。PCは横長の方がかっこいいですが、スマホで同じ画像を使うと横長で広告かと思うほど長細くなってしまうからです。
PC版のヘッダーは よこ1000px たて200px
はてなブログではディスプレイサイズに合わせて横幅を調整してくれるようです。
レスポンシブデザイン(PCとスマホを同じHTML/CSSで表示させる)かどうかやPCはテーマにもよるのかもしれませんが、僕が使う「Blank」テーマだと1000x200pxで用意する人が多いようです。
モバイル版のヘッダーは よこ800px たて250px(16:5)にした
スマホ版(レスポンシブルでなくはてなブログのモバイルのデザイン)も端末のディプレイサイズの横幅に自動で調整してくるようです。
なので画像サイズは大きくても大丈夫です。大きすぎると勝手に圧縮されるのかどうかは不明ですがタブレットのような大きい画面で横にする場合も考えて僕は800pxの画像を用意しました。
縦横比は16:5でちょっと中途半端ですが僕がいくつか試行錯誤した限りでは一番いいなぁと思った比率でした。
このあたりはGoogle Analyticsなどの解析ツールでどのディプレイサイズでユーザーが多く閲覧しているかを見てみるといいと思います。
僕のブログだとモバイルアクセスの全体の43.75%を閉めるデバイスのディスプレイサイズはこんな感じでした。
Apple強し！というかディスプレイサイズが同じなのが効いていますね！
PC版はもうちょっと調整してから…
スマホ版はヘッダーやら一通り変更しましたが、PC版はまだ変更してません。
はてなブログでは「テーマ」を選んでそれからテーマに合わせてカスタムします。その中でレスポンシブデザイン(PCとスマホを同じHTML/CSSで表示させる)にするかどうか選べますが、僕のブログではPCとスマホでHTML/CSSを分けているのです。
スマホ版は定番カスタムしかしていないので切り替えが簡単でした。しかしPC版はそのままヘッダー画像を適用するといろいろ不都合が出たのです。
今使っている”Simple and Grey”テーマは半年程使ってきましたがサヨナラとなりそう。
テーマが変わると大がかりなカスタムとなります。のでもう少しチェックしてから切り替える予定です。
そもそも、はてなブログはあまり手を入れなくても美しい
僕は元々、ブログのデザインやカスタムに注力せずに文章を書くのに集中できるからこそはてなブログを選びました。
僕の持論はカスタム沢山したいならはてなブログではなくWordPressにすべきなのだと思っており、これは今後も変わらないです。僕はサーバ管理やカスタムに時間を割くよりも、文章を書くことがやりたいから…
結局ブログのカスタムなんて自己満だし、デザインに精通している人がお金をもらって汎用的に使ってもかっこよくなるように作っています。なのでこれを超えるのは大変なのです。
・・・
でもでも！想定されている範囲でのカスタムでもブログへの愛着が湧きますしそれによってブログを書くモチベーションが上がる。というのはやってみてから気づいたことでした。
カスタムって大変だしカスタムしたあともメンテしなくてはいけないのでメンドクサイですが、満足度は意外とありました。
今のデザインは飽きが来にくいデザインだと思っていますが、また飽きたりモチベーションが下がった時にはブログカスタムをしてみるのもありだなぁって。
その時は今度こそAdobeのCCでクリエイティブな才能を磨きたいと思っています。でもそれはだいぶ先かなぁ。
こんな感じ。
2017/04/24追記
制作して頂いたヅッキーさんがこのデザインを作った裏話やヘッダーを作る上で知っておいた方がいいルールを書いてくださいました！必見です！