こんにちは、つばさ（@tsubasa123）です。
最近、本格的にスマホサイトのカスタマイズに乗り出しました。まぁ、考えることが多くてめんどくさい難しいです。とりあえず、枠組みはできたのであとはメインイメージとかアイコンとかを調達します。
今日は個人的には結構こだわったのですが多分誰にも気づかれないであろうちょっとしたカスタマイズネタをお伝えしたいと思います。カスタマイズというよりは若干自己満ネタに近いものですがお付き合いください。
デフォルトのデザインでもそこそこいい感じ
はてなブログのスマホサイトデザイン、デフォルトでもかなりシンプルで良いデザインだと個人的には思っています。ちょっと白すぎかもしれませんが、ブログとして記事を読んでもらうには適したデザインじゃないかと。
ただ、ちょっとだけ、ほんのちょっとだけ気になるところがありまして、今回はその辺をCSSとJavaScriptを利用して調整していきます。気にならない人にとっては本日のカスタマイズは無意味なものです、申し訳ない。
私と同じように、ちょっとだけ気になっている方がいましたら是非一度お試しください。もしくは私のカスタマイズをベースにご自身にとってベストな値になるように調整してみてください。
記事タイトルの行間を少し狭める
まず最初にやったのがこれ。デフォルトの設定だとちょっと行間が広めに設定されていて、スカスカした印象を覚えました。見やすくていい反面、スマホサイトでは表示領域が狭いのでできるたけ余計はスペースは無くしたいものです。
ポートレート（スマホ縦向き）で見ている文にはまぁいいのですが、ランドスケープ（スマホ横向き）にすると結構場所を取りそうだったので行間を少しだけ狭めました。
h1.entry-title { line-height: 125% !important; }
CSSは上記のように指定しています。
before-afterはこんな感じ。フォントサイズは変更していません、同じサイズです。少しスペースを節約できたのがお分かりいただけるんじゃないでしょうか。ほんとにちょっとの差なんですけど大満足です。
記事のフォントサイズと行間を調整する
次にやったのがフォントサイズの変更と行間の高さ。はてなブログのスマホサイトのデフォルトデザインだと少し文字が小さいな、と感じていました。
反対に文字が小さいわりにはちょっと行間が広め。好みの問題かもしれませんがスッキリしなかったのでCSSで調整しました。
.entry-content { line-height: 1.6 !important; font-size: 95% !important; }
CSSの指定はこんな感じ。
before-afterです。一回りくらい文字が大きくなっているのがわかるかと思います。そのかわり、行間を少し狭めたため、全体的には同じくらいのスペースでコンテンツが表示できるようになっています。
端末の表示サイズに合わせてフォントのサイズを調整しようかとも思ったんですが、コスパが悪そうなので断念しました。今後、有用な調整だと判断した場合は追加で対応する予定です。
不要な<p>タグを非表示にする
これはわかりやすい違いですが、同じような状況になっている人は少ないかもしれません。
私は記事を書くとき、結構な頻度で改行を入れています。その方が読みやすいかな、と思って意図的に改行を入れるようにしています。
PCで表示する時はスペースに余裕があっていいのですが、これがスマホになるとスッカスカになってしまいます。見出し上にスペースがあるのは許せたのですが、見出しの下にまでスペースができるのが許せませんでした。
許すも何も、自分で改行が入るように調整しているので自業自得なんですけどね。失敗失敗。
というわけで、スマホサイトでは改行を（HTML的にはスペースを確保するための<p>タグを）JavaScriptで取り除くようにしました。
<script> $(function() { $('.entry-content p').each(function() { if ($(this)[0].innerHTML === ' ') { $(this).hide(); } }); }); </script>
合わせて、<p>タグ間のスペースを少し広くとるようにCSSも修正しました。
.entry-content p { margin: 1.4em 0 1.4em !important; }
デフォルトは1emが指定されているので1.4倍のスペースを確保するようにしています。好みもありますが、個人的には適度な余白があるほうが読みやすいと思っています。
おまけ
ついでにわかりやすいカスタマイズも3つほど。自分のカスタマイズを宣伝したいというのが狙いですがまぁご容赦を。
フォントを変更する
これは完全に好みの問題ですが、フォントを游ゴシックに変更しています。PCサイトでも游ゴシックを利用しています。
ヒラギノやメイリオもキレイですけど、最近は游ゴシックがお気に入りです。なんて偉そうに言っていますがフォントの違いなんて言われなければ普段はそこまで気にしません。ただ、游ゴシックがマイブームなのでスマホサイトにも適用しました。
見出しを変更する
ベタですが当然見出しも変更しました。PCのデザインに合わせています。PCとスマホで見出しのデザインを別々にしている人も多いですが個人的には同じにしたほうがいいかな、という考えです。
そこまで特徴的な見出しではありませんが、統一感があった方が「あーあのブログか」みたくなるのかも。なんて考えがあるわけではなく、単にデザイン考えるのと管理が煩雑になるのを嫌いました。
目次を折りたたむ
これは宣伝ですね。自分のカスタマイズアピールです。
でもこれ、割と便利だと思うんですよ、自画自賛で恥ずかしいですが。もしよければ一度お試しください。たまーに使ってくれてる人を見かけて喜んでいます。
さいごに
以上、細かすぎて伝わらないシリーズでした。こんな微妙なところよりもメインイメージとか目立つことから取り組んだ方が良いのはわかっているんですが、気になっちゃうもんは仕方ない。
もう少し精度が上がったら次はヘッダー固定メニューあたりもご紹介したいと思います。
ではでは、最後までお付き合いいただきありがとうございました。
コメント