ブログのヘッダーを制作、カスタマイズしてみました。
前々からヘッダー作っておきたいなぁと 思っていたんですが、ようやく重い腰を上げたというわけです。
現在このように表示されていると思いますがどうでしょうか？
グレーのシックな背景にピンクのタイトルが映えていてなかなかカッコイイものに仕上がったと満足しております。
イラストの双葉杏ちゃんはニコニコ静画などに投稿している「むぎ」さんに描いてもらいました。
ばかなことやってねぇで働け / むぎ さんのイラスト - ニコニコ静画 (イラスト)
まぁボクなんですけどね。
最初に描いた段階ではこんな感じで。
「ドラゴンボール超」のパロディです！
構想段階からヘッダーにすることを考えていたんですが、いざ使用してみると「アレ？縦横サイズおかしすぎない？」と重大なミスを見つけてしまいました。つまりどういうことかと言うと、仮に上のイラストをヘッダーにした場合、
こんな感じになって「縦に入りきらない」&「大きな空白ができてしまう」といった問題が生じたわけです。
スポンサーリンク
迷った末に背景の絵を消しました。「キャラクター」「文字」「吹き出し」以外は透過してあります。
フォントは「キルラキル」などで有名な「ラグランパンチ」です。イラスト制作ソフトのメディバンペイントで使用できるので気になった方はDLしてみてはいかがでしょうか。
フォント | メディバンペイント(MediBang Paint)（メディバンペイントさんより）
ちなみに画像サイズは1500×370ピクセルにしています。「はてなブログ」の標準となる画像サイズよりも縦に大きくなっているんですが、これ以上小さくするとイラストが入らなくなるためカスタマイズして使うことにしました。
カスタマイズについては「月無ことのは」さんのブログ記事を参考にさせていただきました！
【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 - 月無ことのは日記（月無ことのは日記さんより）
「はてなフォトライフ」にアップロードしてURLを取得することになりますが、慣れなくてちょっと手こずったため方法を書いておきます。
まずログインして上段にある「アップロード」から対象となる画像をアップします。
アップされた画像は「HatenaBlog」のフォルダに入っていると思うので、そこから画像を選択します。
画像下部にある「オリジナルサイズを表示」をクリックし、ブラウザのURL欄から取得ができます。
構図のバランスが悪かったのでちょっと動かして完成！グレー色の背景は先ほど紹介した月無ことのはさんのブログ記事を参考に、ソースコードの背景色に組み込みました。
とまぁこんな感じで！ブログのデザインを考えるのは楽しいですね！いろいろ難しくて頭パンクしてますけど！ｗ
時間作ってちゃんと勉強しておきたいなぁと思います。
