【はてなブログ】スマホ用ページのヘッダーにアイコンや画像を重ねて表示させる方法

　今回ははてなブログスマートフォン用ページのヘッダーにアイコンや画像等を重ねて表示させる方法をご紹介します。

　これを応用すればナビゲーション・読者登録・SNS等のアイコンをヘッダーの好きな位置に表示させることが出来るようになるのでかなり便利^^

HTML

　「重ねたいもの」と書かれた部分は重ねて表示させたい画像やアイコン等に変更してください。

　これをはてなブログ管理画面→「デザイン」→「スマホのマーク」→「ヘッダ」→「タイトル下」の中に記述します。

CSS

　CSSもHTMLと同様に「タイトル下」に書き込んでおくと分かりやすいかと思います。

　これで完成です。

　HTML・CSS共にクラス名（toptitlemiconってやつ）は適当に付けたので、分かりやすいものに変更していただいて構いません。

　「top」と「right」の数値を変更することで位置の調整が可能です。

↑左の方に表示したい場合は「right」を「left」に変更すればOK。

　あと、今回ははてなブログデフォルトのヘッダーナビ（上画像の「Hatena Blog」と書かれている部分）を非表示にした状態で紹介しましたが、これを表示させている場合は「top」の数値を50px位にしてあげないと、重ねて表示させたいものが見えなくなってしまうので注意が必要です。

　ちなみに、デフォルトのヘッダーナビは上記CSSで非表示にすることが可能です。

まとめ

　これを応用すればツイッターや読者登録等のアイコンの設置等、デザインの幅が広がるんじゃないかなと思います。

　ぜひぜひ試してみてください☆

　当ブログの場合はハンバーガーアイコンを表示させてみました。

　少しずつだけど思ったようなカスタマイズが出来るようになってきて嬉しい^^