太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログのスマートフォン表示を外部CSSでオシャレにする

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

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

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

外部CSSリンク方法

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

f:id:bulldra:20141102114834j:plain

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

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

f:id:bulldra:20141102130942j:plain

 外部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の利用やスマートフォン表示のスタイル設定を検討されてはいかがでしょうか。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

よくわかるWeb&モバイルマーケティングの教科書

よくわかるWeb&モバイルマーケティングの教科書

  • 作者: 大倉ウェブマーケティング事業部 櫻沢信行,大倉ウェブマーケティング事業部 林なほ子
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2010/11/30
  • メディア: 単行本(ソフトカバー)
  • 購入: 4人 クリック: 53回
  • この商品を含むブログ (4件) を見る

関連記事

*1:リンク先回答引用アリ