Blogger：CSSの独自クラス名をモバイルテンプレートだけに反映させる方法

SC2 2018-12-03

2021-09-09

このサイトを検索 | Search this site

Blogger：CSSの独自クラス名をモバイルテンプレートだけに反映させる方法

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

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

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

新規に作成した .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 > テーマ > モバイル

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

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

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

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 の殆どのテンプレートで使用されていると思われます。

AwesomeInc の記事 (Articles about the AwesomeInc)