ちょうど2年前の2012年5月に投稿した「Seesaaブログのスマートフォン版を無効にする方法」あたりからボクの中では Seesaa ブログのレスポンシブ化が始まり、Seesaa の とある秘密ブログはレスポンシブにカスタマイズして運営してきました。

色々とテンプレートをいじくりながら試行錯誤を繰り返していますが、やっぱり素人には限界があります。

Sponsored Link

こうやってレスポシブ計画始動とか言い放ってしまえば、訪問して下さったノウハウのある方々から知恵をお借りできて、ひとりで考えているよりもラクチンなのではないか。そんな下心むき出しの動機から、レスポンシブ計画、始動します。

10分で完成する「Seesaa ブログなんちゃってレスポンシブ」

今さらここで「レスポンシブデザインとは」とか書くつもりもなく、書けるような知識もなく。とりあえずレスポシブデザインとは何ぞやということを確認するには、今使っている Seesaa ブログのテンプレートに適用して実際に見てみるのが手っ取り早いと思います。

そこで Seesaa ブログ共通で最もシンプルなボクの設定方法をご紹介します。なんちゃってなので、詳しくは説明しません。

但し、条件が1つだけあります。
今回ここで紹介する、Seesaa なんちゃってレスポンシブは右サイドバーのテンプレート用です。

このブログのように両サイドバーや左右サイドバーを右2列に寄せているテンプレート、つまり Links-left のあるテンプレートには対応していません。Links-left ありのパターンはまた後日ということで。

1.Viewport や IE8 対策のなど HTML の基本設定

Viewport は簡単にいえばスマートフォンで見られたときに、どのように表示させたいのかを決める基本設定のことです。文字や画像を相対的に縮小してページ全体を横幅いっぱい表示するとか、幅に収まらなくても、横スクロールバーが表示されようとも等倍で表示するとか、ピッチ(親指と人差し指でにゅっと広げるあの動作)で拡大させるさせないとか、表示と動作を制御するものです。

IE8 対策というのは、Microsoft の Internet Explorer 8 以下はレスポンシブに対応しないので、その対策です。

以下の2つを PC 版の HTML の <head> から </head> の間に追記します。

1-1. Viewport の追加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">

<title> の下にある一群の meta タグの中に一緒に書いておけばよろしいかと。
デバイスの横幅にフィットさせ、横幅等倍表示で、ピッチで2倍まで拡大可能という意味です。


1-2. IE8 対策
同じく、Head 内に追記します。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Respond.js の方が良いとか良くないとか、そういった難しい話は抜きです。

Viewport はレスポンシブにするしないにかかわらず追記しておいた方が良いです。
iPhone でアクセスしたけど、「PC版で見る」というリンクで切り替えて PC 版を見ている閲覧者もいるはずです。少なくともボクはスマホのフローティング広告が鬱陶しくて嫌なので、どんなサイトであれ切り替えができるなら PC 版で見ます。

レスポンシブじゃないからこの設定は無縁ということではありません。実際にあなたのブログも iPhone から PC 版で見られているはずなので viewport だけでも追記しておくようにしましょう。

2. メディアクエリーの追加

PC版の CSS (デザイン>PC>デザイン設定) にメディアクエリーを追加します。

メディアクエリーはスマートフォンなどのモバイルデバイスの画面横幅を基準に「横幅がこれくらいのときはこんな表示にする」というスタイルのルールを決めるものです。

以下の定義を CSS の一番最後に追加します。

@media screen and (min-width : 0px) and (max-width : 767px){
#container{width: 100%}
#content{width: 100%}
.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden}
#links{width: 100%}
}

ボクが Seesaa ブログをレスポンシブにカスタマイズするときに、ここからスタートする一番シンプルなメディアクエリーです。

たったこれだけで右サイドバー Seesaa ブログの、なんちゃってレスポンシブは完成であります。

Seesaa ブログ なんちゃってレスポンシブの解説

画面解像度の横幅が 768px 以上 (Windows Phone, Google Nexus 7 など) なら、デスクトップで見たときと同じ表示でいいや。でも、iPhone 3 (320 x 480px) や iPhone 4 (480 x 800px)、 iPhone 5 (640 x 960px)、国産スマホ (720 x 1280px が多い) のときは、右サイドバーを下に落として、ブログ記事を画面いっぱいに表示しよう。下に落とした右サイドバーは画面幅いっぱいに表示しよう。


右サイドバーテンプレート用の上記メディアクエリーを日常のことばで表わすとこんな感じになります。いわゆる与件ですね。

では1行ずつ少しだけ解説します。

1行目:@media screen and (min-width : 0px) and (max-width : 767px)
⇒ 「画面解像度の横幅が768px以上なら...」の条件
この部分をブレイクポイントと呼びます。解像度横幅 0px 以上 767px 未満の範囲で以下のスタイルを適用しなさいという宣言です。768px 以上の場合は、元々の CSS スタイル定義が適用されます。

2行目:#container{width: 100%}
3行目:#content{width: 100%}
⇒ 「ブログ記事を画面いっぱいに表示しよう」の条件
ブログ記事やサイドバーを含めた Seesaa ブログの一番の外枠が #Containerです。#content は navi からコメントやトラックバックまでを含む、サイドバー部分を除いたブログ記事まわりの一番の外枠です。これらを 100% で画面いっぱいに広げることで、サイドバーの余地が無くなりサイドバーは下に落ちます。

4行目:.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden}
⇒ おまけ (ブログ記事を中央に寄せるために若干のレイアウト調整)
blog というクラスは #content のひとつ内側の包含ブロック(枠組み)でブログ記事の外枠のことです。これを中央に寄せる理由ですが、例えば、元々の blog クラスの幅が 450px に設定されていた場合、横幅 720px の画面で見たときには #content は 100% だから 720px、blog 幅が 450px。

つまり 720 - 450=270px と 270px もブログ記事の右側に余白ができてしまいます。右サイドバーが無くなったご自身のブログをイメージしてもらえばわかりやすいと思います。恐ろしくバランスが悪いのでブログ記事は画面の中央に寄せています。

5行目:#links{width: 100%}
⇒ #links は右サイドバーのことです。ちなみに左サイドバーは #links-left になります。この #links は元々 160px、250px、300px などのように設定されているはずです。この幅のまま下に落ちたら細長くなってしまうので、画面幅に対して100%まで広げます。

メディアクエリーは元々設定されているスタイルを上書きします。メディアクエリーに指定されていないスタイルは元々のものが使われます。なので、調整したい要素だけブレイクポイントの中に定義すればよいわけです。

このなんちゃってレスポンシブでの表示結果を見て、タイトルの文字が大きすぎると思えば h1 なり title なりを 80% などに縮小するスタイルをこのメディアクエリーに追加していくことで、カスタマイズが進んで行きます。

繰り返しますが、メディアクエリーは元々のスタイルより優先されますから、元々のスタイル定義を削除してはいけません。変更したい要素だけをピックアップして、メディアクエリーに追記していくイメージです。

少し分りやすくアップデートしたこちらの記事もご参照ください。»Seesaaブログスマホ広告を消す悩みを消す方法

まとめ

ご紹介した Seesaa ブログレスポンシブは、実はこんなに簡単にレスポンシブになりますという体験版です。実稼働までには、ブレイクポイント(表示を切り替える画面の横幅)はどうするとか、左サイドバーはどう扱うかとか、ブログに貼り付けた画像のサイズはどうするこうする、横スクロールバーが出ちゃうけど左右の余白はどうやって調整するのかとか、インデックスページに表示される記事の文字数を減らせないのかとか、サイドバーは下に落とすのではなくトップのメニューバーにしたいとか、アドセンス広告のレスポンシブ対応も導入しなくちゃとか、他の ASP の広告バナーはどうやってサイズ変更しようかとか、スマホ版との SEO はどうなんのとか、なんで pingoo のメモリーボードに何も表示されないんだとか、、、挙げればキリがないくらいに課題があります。

ただ、Google 先生はレスポンシブを推奨していますし、Seesaa ブログのスマホ版は広告が多いし、カスタマイズできないし。ボクはこの2年くらいで とある秘密ブログのテンプレートをレスポンシブ化し続けた結果、モバイルデバイスでのページビューは格段に延びてることを実感しています(echo運用ブログ比)。なので時代はレスポンシブだと信じています。が、一方でレスポンシブのデメリットもたくさんあるようです。

やはり時代はレスポンシブだなという方々からいろいろお題を頂戴したり、こちらからのお題を解決して頂いたりしたいと思います。ボク的には、できれば後者中心で。

Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link