こんにちは！ぽんひろ(@ponhiroo)です。
「AMP対応面倒くせー！」と嘆いている僕ですが、AMPのことはまだ1%ほどしか理解できていません。
先ほどAMPについて一つ学んだことがあったので共有しようと思います。
AMPでは「!important」が使えない。
「常識やんけ！くそが！」と思った方、ごめんなさい。
ということでこの記事で伝えたいことはもう伝えてしまいました。
一応解決策など、詳細を説明していきますので、よかったら見て行ってください！
ちなみに前提として「AMPとは何かを知っている」「!importantが何かを知っている」こととします。
AMPで当ブログのデザインが崩れた箇所
当ブログはWordPressを使用しており、テーマはCocoonを使っています。
Cocoonは無料にも関わらず、1クリックでAMP対応ができる優れものです。
そんな中、なぜ崩れてしまったかというと自分でCSSをカスタマイズしているからです。
今回、デザインが崩れた箇所がこちらです。該当URLはこちら！
まず、理想がこれ！
もちろんAMPでなければ上図のように正しく表示されます。
しかし、AMPで表示させると…
左に寄ってしまうんです。
この時使っていたコードがこちら。
<div class="flow">
<ol>
<li class="now">好きなリストを選ぶ</li>
<li>好きなボックスを選ぶ</li>
<li>リストのCSSをコピペ</li>
<li>リストの色を変更する(任意)</li>
<li>アイコン付のリストはアイコンを変更(任意)</li>
<li>ボックスのCSSをコピペ</li>
<li>ボックスの色を変更(任意)</li>
<li>「AddQuicktag」をインストール</li>
<li>確認作業！</li>
</ol>
</div>
.flow{
padding:1em;
background:#fef9ed;
margin:0;
}
.flow li{
opacity:0.5;
margin: 0 0 0 5em !important;
}
.flow .now{
opacity:1;
font-weight:bold;
position:relative;
}
.flow .now:before{
content: "今ココ";
position: absolute;
left: -5.5em;
padding: 0 7px;
background: #ffa952;
color: #fff;
border-radius: 10px;
}
原因はもうわかるかと思いますが、「!important」ですね。AMPではmarginが効かなくなっています。
自慢ではありませんが僕はimportant人間です。importantを多用する者です。
多用すると管理がしにくくなるのであまり使わない方がいいってことはわかってるんですが、面倒くささが勝ってしまうんですよね。
一からWebサイトを作る時はimportantを使わないように意識できるんですが、WordPressで既存のテーマを使っているとどうしてもimportantに頼ってしまいます。
良くないですね、反省
importantに頼らないためにはCSSの優先度を知る
ここからはimpotantに頼ってしまう人向けに書きます。
そんな皆さんに質問です。CSSの優先度、正しく説明できますか？
「あれでしょ？classよりidが優先されるやつ」
僕はわかっているようでわかっていませんでした。
だからimportant人間なんだね！
CSSの優先度とは？
CSSが重複しているときの順位決めとして、CSSには優先順位というものが存在します。
CSSの優先順位の規則は以下の通りです。
- あとに書いたものが優先される
- セレクターの合計点数によって優先順位が変わる
詳しくは別記事で紹介しますが、セレクタの点数表は以下の通りです。
| 指定方法 | 例 | 点数 |
|---|---|---|
| 全称セレクタ | * | 0 |
| タイプセレクタ | p | 1 |
| 擬似要素 | :hover | 1 |
| 擬似クラス | [type=”text”] | 10 |
| classセレクタ | .hoge | 10 |
| idセレクタ | #hoge | 100 |
| 要素に直書き | style=”” | 1000 |
これらの合計点が高いCSSが優先されて表示されるってことですね。
WordPressでimportantに頼らないには
優先順位はセレクタの合計点で決まるので、セレクタの数を増やして書けば優先される可能性が高いです。
当ブログ(Cocoon)の場合、
.flow li{
opacity:0.5;
margin: 0 0 0 5em !important;
}
この書き方だと点数は10+1=11点です。
これで表示されればそのまんまでいいのですが、僕は他にもいつ書いたか覚えていない
.article ul li, .article ol li{
margin: 0.7em 0;
}
がありました。
こっちのliのCSSが適用されていたってことです。
僕のコーディング力レベルの低さがわかりますね！
この記述の合計点数は10+1+1=12点です。よって、12点の方が優先されて表示されます。
修正方法はもう皆さん何となくわかるかと思いますが、どちらかの点数を変更する必要があります。
優先したいものには
#main .flow li{
opacity:0.5;
margin: 0 0 0 5em;
}
のように親要素を使うと点数があげられます。この場合は100+10+1=111点ですね。
といった感じで、もしimportantに頼っちゃっている人は点数を意識して、CSSを組んであげると良いです。
その他AMPでデザインが崩れる例
importantを使ってないのにデザインが崩れたって方は下記項目も確認してみてください。
- CSSのサイズが50KB以上
- HTMLの画像(amp-img)の縦横サイズが記載されていない
- @Charsetを使っている
上記が当てはまる場合は修正が必要です。
それでも崩れる場合はAMPページURLの後ろに「#development=1」をいれ、コンソールを開いてみてください。エラーが出ていれば原因が表示されるため、解決策がわかるかもしれません。
コメント