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