2019-04-16T01:01:30Z kzstock Blogger:CSSの独自クラス名をモバイルテンプレートだけに反映させる時の覚書|スタイルシートの書き方
Scrap 2nd.
3

Blogger:CSSの独自クラス名をモバイルテンプレートだけに反映させる時の覚書|スタイルシートの書き方

1st:
検証:Windows 10 Pro April 2018 Update, v1803


Blogger のテンプレートに独自のCSSを登録していますが、スマートフォンでコンテンツを表示した時に、いくつかのCSSが意図した表示になっていないのを見つけました。

具体的には、block要素のセレクタに横幅を指定したクラス名がパソコンでは問題なく表示されますが、スマートフォンでは画面からはみ出して表示されていました。

例えば次のようなコードです。

新規に作成した .classname に width:90%; を指定すると Blogger に付属する Awesome Inc. テンプレートではモバイル表示が崩れます。

.classname selector { display  : block; width    : 90%; }

モバイルテンプレートの横幅を設定している大元のクラス名を探して修正するのが筋だと思いますが、テンプレートコードを解析するのは私には困難なので、独自に設定したクラス名にモバイルテンプレートだけに影響するクラス名を付加することにしました。

自分が作成したクラス名(.classname)を意図通りに表示させるには、Blogger テンプレート(Awesome Inc. など)が使用しているクラス名を調べて .classname の前に付加する必要があります。

以下の例は Awesome Inc. が <body> 要素で使用しているクラス名 post-body を付加した例です。

例).post-body .classname

この記事はモバイルのみに有効に働くCSSの設定方法について書いています。

モバイルテンプレートをカスタムにする

Blogger > テーマ > モバイル

独自クラス名をモバイルテンプレートに反映させるには、モバイルテーマの選択画面を表示して「カスタム」を選択する必要があります。

モバイルテンプレートだけに反映するクラス名

セレクタの値をパソコンとモバイルで異なる値に設定したい時のクラス名です。

Awesome Inc. テンプレートでは body タグに .post-body.entry-content のクラス名が使われているので、.mobile の次に追加します。

.mobile .post-body.entry-content .classname selector { display  : block; width    : 80%; }

あとがき

CSSをモバイルテンプレートに反映させたいときは、Blogger > 管理画面 > テーマ と遷移して、モバイルテーマを「カスタム」に変更しましょう。

カスタム以外のテーマを選ぶと、独自に作成したCSSのクラス名は動作しません。

そして、単にクラス名 .mobile を付加しただけでは意図した表示にならないことが多いです。

Awesome Inc. テンプレートの場合は、次のクラス名を付加するとうまく動作するようになります。

  • .mobile .post-body.entry-content

上記クラス名は Blogger の殆どのテンプレートで使用されていると思われます。

おわり
次の投稿 前の投稿 ホーム

0 件のコメント:

コメントを投稿

にゃんつくばっと