【スポンサーリンク】

印刷用スタイルをメインCSSから分けた

この項目は、随時追記します。なにかのヒントになれば嬉しいです。

\記事が役に立ったらシェアしてね/
キーワード

キーワード:

【スポンサーリンク】

1. @import print(CSS)

かんたんな方法としては、CSS内で別CSSをインポートする方法があります。

@import url("print.css") print;
@import print(CSS)

しかし、この方法ではCSSがブラウザのキャッシュに入ってしまって更新されません。
ブラウザにCSSの更新を伝えるには、CSSのURLバージョン情報を付加して呼び出す必要があります。

また、読込みも遅いようなので、分ける意味がないかも。

「@import url」は読み込み速度が遅いみたいで、style.cssに全部まとめるのがいいみたい…

ブラウザのキャッシュ機能を有効にしつつ、style.cssが更新されたらキャッシュをクリアする方法 | web関連 | 勉強ブログ「二色人日記。」

2. wp_enqueue_style(PHP)

functions.phpでスタイルを追加する方法があります。

    wp_enqueue_style(
        'wpa-print-style', 
        get_stylesheet_directory_uri() . '/print.css', 
        array(), 
        '', 
        'print'
    );

こちらは、ちゃんと自動的にバージョン情報を付与してくれているので、スタイルを更新すると反映されます。

こちらもどうぞ。

QRコードを読み込むと、関連記事を確認できます。

印刷用スタイルをメインCSSから分けた
【スポンサーリンク】
タイトルとURLをコピーしました