Wordpress

外部CSSを読み込む【WordPress】【AFFINGER5】

  1. HOME >
  2. Wordpress >

外部CSSを読み込む【WordPress】【AFFINGER5】

設定

外部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());
    });

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.