スマートフォンデザインを外部CSSで行う

　以下の記事を参考にスマートフォンでのデザインを行いました。はてなブログPROに加入していると行えるスマートフォンのヘッダタイトル下にStyleタグを書いていくという方法です。

　この方法でも手軽にできてよいのですが、外部CSSで設定する事にしました。外部CSSを配置するには別途有料のレンタルサーバーが必要だと思ってしまいがちですが、僕の場合は『GitHub Pages』を利用していますし、Dropboxの公開機能を使っても無料で実現できます。

外部CSSリンク方法

　スマートフォンのヘッダのタイトル下に以下のHTMLを追記します。スマートフォン表示の時にだけにこのエリアが表示されるため、PC表示時にはCSSの影響がありません。

<link href="スマートフォン用外部CSS.css" rel="stylesheet" type="text/css">

　このブログのCSSは「http://bulldra.github.io/stylem.css」にあります。またPC表示の際にはPC用のヘッダーから「http://bulldra.github.io/style.css」を読み込ませることでスタイルシートを切り替えています。

　外部CSS化が難しい場合にも従前どおり、スマートフォン表示設定のヘッダ部に直接Styleタグを書く事で設定可能です。以下に設定したスタイルを解説します。

WEBフォント指定

　はてなブログにインストール済みの手描きフォントを指定。「.hand-write」で囲むことで手描き文字になります。タイトルや手描き表現をしたくなった時に利用しています。

@font-face {
    font-family: 'HuiFontP109';
    src: url('http://www.hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot');
    src: url('http://www.hatenablog.com/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'),url('http://www.hatenablog.com/fonts/public/HuiFont/HuiFontP109.woff') format('woff'),url('http://www.hatenablog.com/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'),url('http://www.hatenablog.com/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg');
    font-weight: normal;
    font-style: normal;
}

.hand-write {
  font-family:HuiFontP109;
  font-size:120%
}

横幅320pxのモバイルバナーをガクガクさせない

　横幅320pxのモバイルバナーをiPhoneで表示させるとガクガクするという問題があったのですが、マージンを指定して、ガクガクさせないようにします。『はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する - AIUEO Lab2』の通り、色々なやり方があるようですが、このブログではヘッダ部分のみに適用しています。

#top-editarea { 
  margin-left:-10px; 
}

フッターにある邪魔なリンクを表示させない

　「はてなブログを始めよう」や「はてなブログ開発ブログ等のリンク」のリンクが必要ないので除去。プロフィールも消せますが、このブログでは維持します。

.footer-action-wrapper{
  display:none;
}

.touch-item-list{
  display:none;
}

　これは「出来るけどやっちゃいけない」に抵触すると勝手に思っていたのですが、『【はてなブログ】スマホ用ページ下部分のプロフィール（id）とかを非表示にしてみました - チップの日常』によれば、はてなから「はてなブログProならOK、無料版はNGという返答があったそうです*1。

PCの表示スタイルと合わせたタイトルや見出し設定

　タイトルや見出しについては基本的にPCでの表示スタイルに準拠させています。Webフォントによる手書き風タイトルも再現。

.entry-content h3, .entry-content h1, 
  .entry-content h2, .hatena-module-foot h3 {
  font-size: 110%;
  font-weight: bold;
  margin: 1em 0 0.5em 0;
  padding: 4px 10px;
  border-left: solid 10px #c0392b;
  background: #eee;
}

.entry-title {
  background: #850505;
  font-size: 120%;
  font-weight: bold;
  color: #fff;
  margin:3px -10px 3px -10px;
  padding: 0 10px 0 10px;
}

.entry-title a {
  color: #fff;
}

#title {
   font-size: 230%;
   display: inline-block;
   font-family: HuiFontP109;
   font-weight: bold;
}

#title a {
    color: #333;
}

#blog-description {
  margin-top: 5px;
  margin-left: 10px;
  font-size: 120%;
  display: inline-block;
  font-family: HuiFontP109;
}

#blog-description a {
    color: #333;
}

まとめ

　以上のように設定を行うことで、はてなブログのスマートフォン表示でのスタイルシートやWEBフォント設定を外部CSSで行う事ができました。本来はCSSのメディアクエリを用いてレスポンシブデザインを行うべきなのですが、PC用CSSが秘伝のソース化していて本格的な修正が難しい場合に、スマートフォン表示用の独立した外部CSSが利用できます。

　1年前ぐらいはスマートフォン表示のスタイルを修正するのはかなり難しかったのですが、現在は公式の機能追加と、試行錯誤している方々のおかげで色々とできるようになりました。

　またデザイン画面にあるCSSエディタは非常に使いづらかったのですが、gitを使えば修正履歴が残りますし、ローカルでの試験しやすいわけで、外部CSS化によって作業が効率化できます。そんなわけで、外部CSSの利用やスマートフォン表示のスタイル設定を検討されてはいかがでしょうか。