外部CSSを読み込む
- スマホの表示を軽くするために外部CSSを読み込みたい。
ココがポイント
結論：
<link rel="stylesheet" href="https://my_web_page_address.com/wp-content/themes/affinger5-child/my_custom-css.css?ver=5.1.7"; type="text/css" media="all"/>
上記コードをHeaderに入れる。media属性値を
- 「screen and (min-width: ○○px)」（最小値までは読み込む）
- 「screen and (max-width: ○○px)」（最大値から読み込む）
に変更して、ウィンドウサイズに合わせた読み込みを実装する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、読み込むCSSの情報量が多くなり、携帯端末からのアクセスが重たくなっていると感じたことはございませんか？
私自身、自分のWebページがかなり重く、CSSを外部ファイルとしてつくり、ソースコードの読み込む量を調整しています。
まだ、WordPressで外部ファイルを読み込むことができていない方は、参考にしてみて下さい。
目次
1.外部CSSファイルとは
外部CSSファイルとは、HTML内には記述されないスタイルシートファイルのことです。
表示されるHTMLファイル内に記述されないので、linkタグを使いHTMLファイルにCSSファイルをリンクさせ、スタイルを適用するようにします。
外部CSSファイルを使用するメリットは、linkタグを使用して目的のページにスタイルを読み込むことで、1ページ内で読み込ませるCSSの情報量を調整できる点にあります。
2.「AFFINGER5」で外部CSSファイルを読み込む
2.Step1_HTMLを追加できるようにする
WordPressでHeaderにHTMLを追加できる、皆様自身の方法を使用して下さい。
私は、プラグイン「Simple Custom CSS and JS」を使用してHTMLを追加しました。
このプラグインはJavaScriptも追加できてかなり便利なので、皆様もインストールしてみてはいかがでしょうか？
2.Step2_コードをHeaderに追加
<link rel="stylesheet" href="https://my_web_page_address.com/wp-content/themes/affinger5-child/my_custom-css-680.css?ver=5.1.7"; type="text/css" media="all"/>
上記コードをHeaderに追加し、https://の後ろの「my_web_page_address.com」を、皆様自身のWebページアドレスにします。
また最後の「my_custom-css.css」が各々が作成した、外部CSSのファイル名になるので、こちらも変更して下さい。
2.Step3_外部CSSファイルを入れる場所
サーバー上にファイルをアップロードできるソフト「FileZilla」をインストールし、左上の「サイトマネージャー」から自身のWebサイトを登録します。
外部CSSファイルを保存する場所は、自身のWebページが格納されているサーバー上のフォルダ名から、public_html/wp-content/themes/affinger5-child/とたどっていき、この「affinger5-child」中に入れます。
子テーマに外部ファイルを入れておくと、テーマのアップデートがあったとき自身で作成したデータが上書きされないので、子テーマに入れておくことをおすすめします。
「FileZilla」はデータのバックアップなどもできる便利なソフトです。是非使用してみて下さい。
もっと詳しく
2.Step4_それぞれのウィンドウサイズで読み込みを制限する
最後に、HTMLのlinkタグ内にあるmedia属性の値を変更していきます。
- media="screen and (min-width: ○○px)"（最小値までは読み込む）
- media="screen and (max-width: ○○px)"（最大値から読み込む）
上記のように変更していただければ、お好みのウィンドウサイズでCSSを切り替えられます。
JavaScriptに以下のコードを記述すれば、Console画面にサイズを表示してくれるので、確認に使用してみて下さい。
/* windowサイズ確認*/
$(window).resize(function() {
console.log($(window).width());
});
