先日読んだid:codomisu さんの記事が素晴らしかったので、自分も本業ブログのリデザイン、スマホ版のカスタマイズしました。
スマホ版のデザインもPC版とあわせてリニューアルしました。
夏らしさを意識しましたがいかがでしょうか？
スマホ版もPC版と同様、class指定を調べてカスタマイズしていくんですが、先人の知恵を借りたほうが楽に素早く完成できます。今回は自分では記事を書かず、人様の役立つ記事を紹介します。
オリジナルのヘッダーデザイン
スマートフォン版のはてなブログをヘッダー含めオリジナルに作り込むなら、id:codomisu さんのこの記事が丁寧に詳細に書かれています。はてなブログ標準のヘッダーのHTMLで表示されるタイトルなどは非表示にして、独自にHTMLを組んでるので「脱はてなブログ」なオシャレなデザインが実現できます。hitsuzi.hatenablog.com
私は今回は先日書いた「文字のみ画像に置換する」方法を使っています。
design.syofuso.com
スマホ版をスッキリおしゃれに見せるには
スマホ版をスッキリおしゃれに見せるにはid:tsukuruiroiro さんのこの記事がめっちゃ使えますよ。オシャレなはてなブログテーマ「DUDE」の作者さんの記事です。tsukuruiroiro.hatenablog.com
スマホ版に固定フッタメニューをつける
www.yukihy.comアプリのようなフッター固定メニューを付ける方法です。このメニューを設置している人はかなりいるので、デザインが被ります。メニューバーのデザインやアイコン・ボタンをオリジナルのものにアレンジしましょう。
私は上下にボーダーと、読者ボタンをつけています。
CSS
.btn-area a, .btn-area span{ display: block; float: left; width: 20%; height: 50px; line-height: 25px; text-align: center; font-size: 70%; background: #fff;/*メニュー部分の背景色*/ color: #2059d0;/*メニュー部分の文字色*/ border-top: 2px solid #2059d0;/* ボーダー上部 */ border-bottom: 2px solid #2059d0;/* ボーダー下部 */ box-sizing: border-box; }
複合メニューに読者ボタンを追加
<a href="http://blog.hatena.ne.jp/syofuso/blog.syofuso.com/subscribe" onclick="window.open('http://blog.hatena.ne.jp/syofuso/blog.syofuso.com/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog lg"></i><br>読者登録</a>
このようにカスタマイズしています。
はてなブログスマホ版をカスタマイズするときに気をつけること
依頼案件で他の方のはてなブログをカスタマイズをしていて気付いたのですが、はてなブログのスマホ版の各コンテンツ領域はclass="section"で包含されています。.section { width: 93.75%; margin-left: auto; margin-right: auto; margin-bottom: 1em; }
.sectionはこのようにデフォルトのCSSで指定されているため、コンテンツ幅は93.75%で左右に余白があります。このため、そのままではタイトル下などにメニューを設置しても幅100%とはなりませんので注意が必要です。
そこで特定の部分だけ.sectionを幅100％にするため以下のようにCSSを指定します。
#top-editarea .section { width:100%; }
これでこのように幅いっぱいにメニューが表示されるようになります。
ちなみにはてなブログのスマホ版ではデザインCSSには書けないのでフッタなどにstyleタグで囲って記述して下さいね。
<!-- スマホ版CSS --> <style> /* スマホ版のCSSはこの中に書く */ </style>
はてなブログではレスポンシブデザインよりはてなブログの標準のスマートフォン版の方が表示が速いと思います。デフォルトでは味気ないのでぜひオリジナルのカスタマイズをしてみて下さい。
