らくうるカートでCSSをstyleタグで読み込む際の注意点

らくうるカート / / Tips

らくうるカートのHTML編集では、他の多くの類似サービスと同じようにHTMLとCSSを自由に記述できます。

しかし部分的にstyleタグを使ってHTML内に直接スタイルを書きたい場合もあるでしょう。

特に、らくうるカートのCSSファイル読み込みは妙に時間がかかります。らくうるカートのCSSファイルを全てstyleタグで読み込んだところ、Lighthouseのスコアが10ポイントぐらい改善されたこともあります。

ただし、気を付けないとstyleタグが原因でサイトデザインが崩れてしまうことがあります。

問題が起きるのはCSSをMinify系ソフトで圧縮したときだけ。気を付けるべき点は2つだけですので、らくうるカートテンプレートを編集なさる方は以下ささっとお読みください。

注意点１ アットルールの文末

らくうるカートの置き換えタグ（独自タグ）は「{{ variable }}」のようにマスタッシュ表記を用います。

styleタグ内で、@mediaや、@supportsなどアットルールを使用する場合、ルール末尾が「}}」となってしまうため、置き換えタグと認識され、スタイルが読み込まれません。

末尾のみ改行することで回避できます。

/* エラーとなる例 */
<style>@media(min-width:1000px){.selector{property:value}}</style>


/* 末尾のみ改行で回避 */
<style>@media(min-width:1000px){.selector{property:value}
}</style>


/* 普通に改行していれば何の心配もいりません */
<style>
@media(min-width:1000px){
  .selector{
    property:value;
  }
}
</style>

注意点2 アットルールの先頭にid指定が来るとき

らくうるカートのテンプレートは恐らくdjangoなので、{# ここにコメントを記述 #} のように「｛# #｝」で囲むとコメント文を挿入できます。

これもアットルールを使用しており最初のルールがID指定だと、コメントと誤認され、以降のスタイルが読み込まれません。

/* エラーとなる例 */
<style>@media(min-width:1000px){#selector{property:value}.other{prop:val}
}</style>


/* 改行で回避 */
<style>@media(min-width:1000px){
  #selector{property:value}.other{prop:val}
}
</style>

らくうるカート＆styleタグの使用でエラーが起こるのは以上の2点のみです。

＠ルールを使用する際、前後に改行を入れるようにしておけば防げる内容なので、テンプレート編集の際は頭の片隅にでも置いておいてください。

関連投稿