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

スポンサードリンク



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

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

ってことでやっていきましょう!

まずは現状の確認

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

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

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

では行ってみましょう。

丸い僕の顔の画像を消す

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

画像作り

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

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

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

画像のフルサイズ表示

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

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

まとめ

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

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

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

おしまい。

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。