RSS | ATOM | SEARCH

JUGEMテンプレートのレスポンシブ化

学習塾の準備を始めた頃を境に、このブログの更新は停まっていたままでした。学習塾を始めたのが2010年の9月、準備は6月頃からでしたので、すでに7年ちょっとが経過してしまいました。

今回、あらためてブログにも触ろうと思い立ったのですが、7年の間に世の中の携帯端末の使用状況は一変。まずは読んでいただきやすいように、スマホフレンドリーなJUGEMブログへとリニューアルです。

学習指導要領にもプログラミングが明記されるご時世ですし、『階層構造に基づいた組物』として、生徒への刺激の一つにでもなればなと。

JUGEMブログはスマホに弱い

まずは引き継ぐもの(記事と最低限の枠組み)と精算するもの(使わない機能)の仕分けから。

PC用のテンプレートを修正して、こちらはまあそのまま。いざスマホ対応もしなくてはと設定画面を探すことしばし。

「スマホのテンプレートはどう……にもならないんかい!」

意外と、スマホフレンドリーではありませんでしたよJUGEMさん(当社比)。

そこで、既存テンプレをそのまま活用して、JUGEMブログをレスポンシブデザインにしてみました。

ただしこちらの方法、スマホテンプレートのheadタグ内にJavascriptを記述する必要があります。そこを変更する機能は有料版にしか無いので、無料プランで使っている場合は、この方法では無理なようです。

準備作業

PC用のテンプレートのcssを使うため、スマホで読み込んだ際に自動的にスマホのテンプレートに切り替わらないようにしないといけません。

スマホ閲覧時にもPC用テンプレートを適用される設定を施します。この際に、有料プランでないといじれない部分に記述するため、無料プランではここで作業が止まってしまうというわけです。

以下のコードをスマホテンプレートの[フリースペース1]内に記述します。

<script>
javascript:pcview_on();
</script>

このとき公開・非公開の設定も併せて確認して下さい。デフォルトでは非公開になっていると思います。

こちらが参考になりました!

ブログ(JUGEM)のデザインをレスポンシブHTMLにしてみた。

cssの“加工”

次にcssに加筆をして、スマホ等の画面の小さい端末で閲覧した際に上書きで適用させる装飾を進めます。

大まかな流れとしては、より外側のブロックに関するcssから設定して、

  • 内側に少しずつ
  • 表示を確認しながら

進めていくようにします。こうしておくことで、問題が起こった時に悪さをした部分の見当がつけやすくなりますので、万一のときもそれなりに安心です。

まずは、大体の塊ごとに区切って、上書き用の@media記述の「枠」をつくります。

@media screen and ( max-width:479px ) { ここに上書き用のcssを記述 }

 

続いて、枠の中に一旦上記の塊をすべてコピペしたもののうち、

  • 変更するもの
  • 新たなもの

それぞれの記述を施します。

そのままにしておく記述は単なる重複なので、削除してしまってもOKです。ただし、PC用の記述を変更した際に、連動してレイアウトに影響する可能性もありえる点は注意したほうがよろしいかと。

全体的な方向性

haikei.PNG

読みさすさ優先、背景画像は基本的にnone

haikeinone2.PNG私が使っているテンプレートのベースが旧いせいもあってか、タイトルバックなどには背景画像が多用されています。今では(と言ってもそうなってしばらく経ちますが……)radius属性で『一発丸め』ですが、ボックスの角を丸くするために、角が丸い画像を使うような頃のものです。

スマホでの閲覧がなるべく容易になるように、単なる装飾としての画像の使用は、なるべく控えたほうが良いのではないかと考えています。

ということで、ガシガシと背景画像の指定をnone。たとえ「なんちゃって」であっても、ミニマルかつフラットなデザイン寄りにしたほうが、スマホでの閲覧には親切です、きっと。

コンテンツは組み替えられない

当たり前ですが、ブログシステムを使っている都合上、吐き出されたソースの構成は変更できません

『スマホテンプレートを使用する場合にスマホ用に吐き出されるソース』もありますが、今回はPC用のテンプレートを使用していますので、『PC用として吐き出されたソース』を使用することになります。

基本的に、私自身はPC向けとスマホなどの携帯端末向けとで、情報量に大きな差がないようにしたいタイプです。そういう意味では、“勝手に”情報量を減らされてしまうスマホ用のソースよりは、今回のようにPC用のソースを使える場合のほうが、実は嬉しかったりなど。

あくまでcssを使って“見かけ上の”位置調整はできますが、ブロックの表示順序を変更するような『組み換え』が必要になってしまう場合は、まずPCテンプレート(JUGEMであればHTMLテンプレート)の段階で組み替えておかないといけません。

例えばグリッド表示にする場合には、float属性のleftとrightを使い分けることで、左右の位置を入れ替えられます。あとは、カレンダーや一部のブログパーツなど、スマホでの閲覧に不要なブロックをvisible属性で隠すことも、必要なことです。現実的にはcssで対応するのはその程度でしょうか。

タブレットサイズではPC表示で

PC用の表示が固定幅の場合、その幅よりも狭い画面で表示された場合にも対応させた方がベターです。しかし今回は、「スマホで見た時に見やすい」ようにするためだけなので、@mediaで対応させる幅を1パターンのみとしました。

そうするとどのような挙動になるのか?

PCのブラウザで表示させ、幅を徐々に狭めていくと……いったん横スクロールが必要な状況になり、やがて@mediaで指定した幅にまで狭くなると、スマホ向け表示に切り替わります。

ということはスマホを横にするとPC向け表示になる(横スクロールにはならずに縮小表示される)ということですが、そこは似たような作業をもう一周行うことで、いずれ対応するのかしないのか(笑)

作業の行方

参考になるかもしれないので、今回の作業の流れをざっくりと以下に残します。

全体枠(wrap) 02

Screenshot_20171112-015731.png まずは、全体の枠を表示領域に合わせることからです。PC用のテンプレートはピクセル指定の固定幅なので、これを100%表示にします。しかし内側のブロックもピクセル指定のため、それだけでは大して変わりません。まずは

「ですよね」

の確認ということで。

ちなみに、この画像ではヘッダーの幅を100%とした状態のため、もともとヘッダーの右に配置されていたサイドバーは、画面の外に表示されています。つまり、横スクロールしないといけない状況です。もちろん、こうならないように、少しずつ配置を詰めていくのですが。

部分枠(header,entry,footer等)

結論として、大外の枠以外も100%にするとよいです。基本的に100%で指定した後で、それでもはみ出している内側の部分を小さくして、収めていきます。ここでどこかの枠がはみ出すと、表示が左右スクロールするようになってしまうのでもれなく残念感がアップ。

magin属性やpadding属性もpxなどの絶対指定になっていると、場合によっては調整しにくい印象がありました(対応は後述)。特に、ブロックが入れ子になっていて、かつ内側のブロックにこの設定がなされていると、コンテンツが右側に飛び出るようになってしまいがちでした。

サイドバー

このブログには、サイドバーが二本あります。これを、そのまま半々で横並びのグリッド表示風にしました。

float属性のleft,rightで振り分けると、左右に並べて表示されるようになります。

境界にborder属性を設定するために、どちらか片方の幅を49%にしておくと、左右スクロールの元凶になりません(後述)。

また、カレンダーなど表示させないブロックはvisible属性でhiddenとして、表示させないようにしておけばOKです。

やりやすかった方法

余白も%指定で行う

すべての余白に対して当てはまるものではないですが、特に内側のブロックでは、『左右余白の間にコンテンツ』となるケースが自然と多くなります。このときに、左右余白も%で設定すれば、コンテンツ部分も含めた合計が100%になるようにするだけでよくなります

border属性は極力使わない

border属性は枠サイズの外側なので、ブロックの幅を%で指定する流れでは、こいつのせいで微妙な結末になりがちです。それは煩雑でしか無いため、border属性は特に左右には使わないようにしています。

ハックとしてボーダーをブロックの内側にする方法もありますが、現状そこまでして使いたいものでもありませんので、まあシンプルさをなるべく優先に。

グリッド配置

Screenshot_20171112-022946.pngサイドバーが二本ある場合には特に、そのまま二列のグリッド配置にすると収めやすいですね。HTMLの吐き出しがフッターの直前にしてあったので、スマホでの閲覧時もいい位置です。

幅をどちらかだけ49%にして、境目に左右どちらかのborder属性を与えると、視覚的にそれなりの区切りになります。あとは“左右の”サイドバーのpadding属性で余白を仕上げます。

上下方向の境目にはborderで区切り感

haikeinone.PNG記事のタイトル部分には、背景色や飾りのborder属性などを設定することで、「さあ、ここから記事が始まりますよ!」のアナウンスは比較的しやすいですね。

記事終わりやコメント欄、ブログパーツの類の区切りには、上下いずれかの枠にborder-top属性を与えるのが良いと思います。

また、罫線上下の空白も重要です。余白を確保して、空白による区切り感を出しておくと読みやすいレイアウトになると感じました。

border-top属性であれば、上の余白はmargin-top、下の余白はpadding-topです。border-bottom属性でしたら、marginとpaddingが逆になります。

または、border属性を与えない側の“境界”に、paddingまたはmargin属性を設定しても同じようなことです。私は、paddingで済むように統一して(基本的にmarginを使わないようにして)属性を設定しました。

お疲れ様でしたm(_ _)m

そんなこんなで、スマホフレンドリーなブログになりました。有料プランでないとできないのでニーズがあるのかどうか想像もつかないのですが、どなたかのお役に立つのであればこれ幸いです。

それにしても、ここまで一晩、つまり数時間の作業。かけた手間の割にかなりの満足感です(実際、記事化するほうがよほど手間っ喰い(笑))。

すっかり気を良くしています。その他、なるはやで対応したいことは、

  • ソーシャルボタンを設置
  • ソーシャルボタンを設置
  • ソーシャルボタンを設置

ですかね。この辺りも、JUGEMさん弱めなのです。

カテゴリ:[パソコン・インターネット]ウェブブラウザ, comments(0), trackbacks(0)
Comment









Trackback
url: http://shimmy.jugem.jp/trackback/90