はてなグループをスマホ対応させてみた
新年あけましておめでとうございます。
毎年その年の最初のエントリーは、昨年の反省・今年の目標を書いていて、結果として未達になっていたりやろうとしていて毎年出来ていないことを再確認しため息混じりに書いていたので、今年は手を動かすことにしました。
僕は仕事とプライベートではてなグループを使っています。
はてなの中の人でも最近は使いづらさを感じ他のサービスを組織で使っていたりするのかもしれませんが（書かれているエントリーはこちら。個人的にとても事情が理解できます。）、職場の組織運営ではブログ+wikiという分かりやすく且つコラボレーションツールとしての二大始祖を組み合わせた仕組みが、今でも最適だと感じていて活用しています。
残念ながら最近はてなグループはダイアリー以上にメンテナンスモードで運営されているので、スマホ対応も一切されていない状態で、外出先でグループをチェックする際も使いづらい状態でした。
そこでまずはグループ内の自分のブログだけでもと思いスマホ対策をやってみたら上手く言ったので紹介したいと思います。
メディアクエリは普通に書ける
はてなダイアリー・はてなグループはデザイン上の制約として、書けないHTML・CSSの記述方法がありますが、CSS3のメディアクエリは直接書き込むのであれば反応してくれました。
ただこれだけでは上手く行かなかったので強引に解決をしてあります。
今の僕のブログは、はてなが提供しているブログデザインとは若干違うHTMLになっているので、下にはデザイン編集画面に書き加える肝となる部分のみ書いておきますので、適時設定を書き換えて貰えればどのブログでも対応できると思います。
ページのヘッダ
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" /> <div class="main"> <a href="#sp-footer" class="sp-footerlink">フッタへ</a>
まずCSSの設定は問題なかったのですが、最終的に表示する際にheadタグ内にviewportが書けないので、横幅が正しく表示されない状態になってしまいます。
ここで詰んだと思ったのですが、本来は正しくない書き方ですが「ページのヘッダ」内に書いてしまうことにより、iPhoneのSafariが認識してくれて解決しました（笑）。
またブログのサイドバーに簡単にアクセスできるように、アンカーポイントのリンクを追記しました。
ページのフッタ
<div class="sidebar" id="sp-footer">
サイドバーには、ページのヘッダで追記したリンクに反応するようにidを追記しました。
スタイルシート
/*PCで表示する場合は表示しない*/ .sp-footerlink{ display:none; } @media screen and (max-device-width: 480px) { /*表示しない場所を設定*/ #simple-header,.hatena-module-trackback{ display:none; } /*あとは自分が見やすいように好きにスタイルを書く*/ }
スタイルシートには、
- PCで表示する際にサイドバーへのリンクが表示されないようにする設定
- メディアクエリの設定内
- 表示をしない場所
- その他スマートフォンに最適化するための設定
を記述しました。
僕の場合は、一番上にあるヘッダがPCでは使いますがスマホでは邪魔だったので消し、またサイドバーの中に入れていたはてなのモジュールで不要なトラックバックなどの表示を消しました。
その他の表示設定については基本的にはてなのブログデザインはシンプルなので、スマホのサイズに最適化されるように、幅や文字の大きさを微調整しただけです。
