読者です 読者をやめる 読者になる 読者になる

はてなブログの"スマホ ヘッダー"のカスタム【ブログカスタムVol.6】

f:id:george-gogo:20151223171643p:plain

最近ついに「はてなブログPro」にアップデートしましたGeorgeです!
そこでProになったからには、スマホ版のデザインもガッツリいじくっていこうと思います!

はてなブログのカスタム記事のまとめはこちら

まず最初はヘッダーをカスタマイズ!!
やっぱり人と同じデザインはいやだ、ほかの人よりカッコよくしたいって思いますよね?
ってことでやっていきましょう!

まずは現状の確認

f:id:george-gogo:20151223133808p:plain

これがカスタムしていない状態です。
今回の作戦です。

  1. 丸い僕の画像を消す
  2. そしてトップ画像を新たに作る
  3. その画像をフルサイズで表示

では行ってみましょう。

丸い僕の顔の画像を消す

これは単純に「デザイン」「スマホのマーク」「ヘッダー」「画像だけ表示」でオッケーです。

画像作り

今のタイトルも消してしまう予定なので、しっかりタイトルを入れた画像を作ります。
できた。

スマホ表示の最小サイズが縦180pxなので(僕のテーマだけかな)合わせて作っていきます。

f:id:george-gogo:20151223155858p:plain

最近はまっている柔らかいグラデーションで。

画像のフルサイズ表示

画像をきちんとサイズを計算して作ったので、css必要なかった…。やべえ。
これ誰でもできるじゃん。フルサイズで表示させる手順は、自動でした。

f:id:george-gogo:20151223160230p:plain

まとめ

すいません。誰でもできることを書いてしまった。
なんかcssで修正するところあると思ったんだけれど、ありませんでした笑

僕の使っているBlankというテーマは大変よくできているってことですね!(強引)

次回はメニューでもつけようかな

おしまい。