カスタムテーマを適用したときのモバイル用CSSの修正方法メモ

Blogのレイアウト刷新に伴い、シロートなりにモバイル表示も弄ってみたので、同じくHTML初心者のBloggerユーザーで弄って見たいと思っている方のためにいくつかTipsを残しておこうと思います。

・事前に知っておきたい基礎知識

＜参考＞クリボウさんのサイトが非常に参考になります。
→モバイルテンプレートもカスタマイズ可能に - クリボウの Blogger Tips

１．CSSの書き方

フォーマットは、セレクタ{属性 : 値;}
セレクタ：変更したい要素（タグ）
属性：変更したい内容（widthとかfontとか）
値：属性に与える内容（10pxとかautoとか）
（例1）変更したい要素がdiv id='a'の場合
→#a{width: auto;}
（例2）変更したい要素がdiv class='b'の場合
→.b{width: auto;}

２．モバイル用CSSの書き方

.mobile に続いてCSSを記述する
（例）.mobile #header{width: auto;}

３．margin・padding・borderの書き方

margin:5px;←上下左右5px
margin:5px 3px;←上下5px，左右3px
margin:5px 3px 10px;←上5px，左右3px，下10px
margin:5px 3px 10px 2px;←上5px，右3px，下10px，左2px
border: 1px solid #ff7700;←太さ1px，1本線，色は#ff7700（濃いオレンジ）

margin・padding・borderの概念図

４．モバイルのみ表示させる方法

<b:if cond='data:blog.isMobile'>
（モバイルで表示させたいことを記載）
<b:else/>
（モバイル以外で表示させたいことを記載）
</b:if>

・実際の作業

０．作業前にかならずバックアップを保存しておきます。

１．meta viewportの指定

<head>直後に以下のように記載します。

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport'/>
<b:else/>
（もともとの記載を記述）
</b:if>

width=device-width：幅を各端末の幅に指定
initial-scale=1.0：標準での表示倍率
minimum-scale=1.0：最小の表示倍率
maximum-scale=1.0：最大の表示倍率
user-scalable=no：ピンチによるズームを有効にしない

２．<body>タグの変更

<body>→<body expr:class='"loading" + data:blog.mobileClass'>に変更する（すでにこうなっていれば不要）
→これにより、モバイル端末で読み込むとき、モバイル用CSS（.mobile）が読み込まれる

３．表示したくないウィジェットを非表示にする。

各ウィジェットにmobile='no'を追加すれば非表示になります。
※CSSでdisplay: noneと指定してもいいと思います。

４．モバイル用にwidthを指定する。

まず、/* Mobile------------------------------------------------- */のような仕切りを書いて、モバイル用CSSがどこから始まるか判別しやすいような工夫をしておきます。
各div要素の幅を指定する。
（例）.mobile #main-wrapper{width: 100%}
※大体はautoや100%などを指定すればいいと思います。余白を作りたい場合はpaddingやmarginを調整しましょう
各エントリに含まれる、imgやtable要素の幅を指定する。
.mobile .post-body img{width:80%;}
.mobile .post-body table{width:80%}
※URL?m=1とすることでPCでもモバイル表示することが可能なので、はみ出していたりするところの要素を検証しながら各要素のwidthを適切な値を指定する
※ここで300pxなどと数値を固定すると、画面を横向きにしたりタブレットで画面で表示したときなどに小さく表示されてしまう可能性があるため、パーセントで標記するほうがいいと思います

５．手持ちの端末で表示を確かめながら修正していく。

標準ブラウザ・Chromeなどいくつかのブラウザで表示確認するといいと思います。
レイアウトが崩れるところがあれば、PC版Chromeで確認して、CSSを修正します。

Chromeで修正したい部分を右クリックして”要素を検証”を選択することで、適用されているCSSなどを確認できます

表示が崩れたり、切れたりするところは、幅やmargin/padding等を指定してあげるとうまくいくと思います。

ちむどろいど

カスタムテーマを適用したときのモバイル用CSSの修正方法メモ