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

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

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

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

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

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

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

らくうるカートの置き換えタグ(独自タグ)は「{{ 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点のみです。

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

らくうるカート

かなりの自動化が可能なので、1人店長やショップ運営の時間を短縮したい&ヤマト運輸を利用されている方には本当におすすめのショッピングカートです。

らくうるカートの新規ショップ制作・テンプレートカスタマイズ・オープン前作業のあれこれ(商品登録・決済の設定、自動送信メールの条件分岐・送料の設定 etc)等、らくうるカートに関する制作・カスタマイズは何でも承ります。

お問い合わせ・ご相談

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。