Header

角島
検証したことをメモに残しています。そして将棋の話題など。

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

SC2 2018-12-03 reload 2021-09-09
Tags
Atom | RSS
このサイトを検索 | Search this site
blogger150x.png

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 > テーマ > モバイル

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

select-theme

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

セレクタの値を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 の殆どのテンプレートで使用されていると思われます。
：SC2
Windowsランキング 将棋ランキング スマホ・携帯ランキング にほんブログ村 IT技術ブログ ライフハックへ にほんブログ村 その他趣味ブログ 将棋へ

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

投稿者 SC2

将棋ウォッチャーのカシミヤです。（@sc2kzstock）検証したことをメモに残しています。質問は受け付けていません。Windows、Android、将棋の話題。 --- I am taking notes on what I have verified. No questions are accepted. Information welcome! (@sc2kzstock) Topics related to Windows, Android, free software, and Japanese chess.

コメントを投稿

0 コメント

コメントを投稿