1

【WordPress】任意のCSSを複数読み込みたいときはどうすればいい?

【Wordpress】任意のCSSを複数読み込みたいときはどうすればいい?

通常、デフォルトで用意する「style.css」を読み込んでいますが、「ユーザーエージェントごと(PC/iPad/iPhoneなど)に分けてCSSを利用したい」、「基本設定はstyle.cssに記述して細かい指定はsub.cssとして読み込みたい」など、それぞれ理由は違うと思いますが、そのようにCSSを小分けにして利用したいときに、どのように読み込めばいいのか?という時の参考になればと思います。

 

 

まずはじめに「Wordpress」は、テーマフォルダの中に基本スタイルである「style.css」を配置しておかないと作動しませんので注意してください。

階層イメージ

 

1.style.cssから@importで複数読み込む方法

通常読み込んでいる「style.css」を開きます。すると下記のような記述があるのが確認できるかなと思います。

▼無料テーマTwenty Thirteenの場合

 上の記述はテーマに関する情報が記載してありますが、その後ろに以下のように別ファイルを「@import」を使って読み込むようにします。

 

▼「同階層のCSSフォルダ内の(sample.css)を読み込む場合」

 そして、header.php内に下記の記述があればOKです。

これで、すべてのページに「使用中のテーマ/css/sample.css」を読み込むことが出来ます。

 

2.header.phpから複数読み込む方法

▼「同階層のCSSフォルダ内の(sample.css)と(sub.css)を読み込む場合」

header.phpに下記を記述します。

これで、すべてのページに「使用中のテーマ/css/sample.css」と「使用中のテーマ/css/sub.css」を読み込むことが出来ます。

 

おまけ

今回登場した2つの「Wordpressテンプレートタグ」は、この際ついでに覚えておいた方が良いでしょう。

 

bloginfo(‘stylesheet_url’);

現在使用しているテーマのstyle.cssを表示することができます。

 

bloginfo(‘template_directory’);

現在使用しているテーマのルートディレクトリを表示することができます。

 

これで複数のCSSファイルを読み込むことが出来るようになりましたので、利用目的ごとにCSSを割り振るなど試してみてください。




One Comment

コメントを残す

mororeco > WordPress > 【WordPress】任意のCSSを複数読み込みたいときはどうすればいい?