webデザインを少し勉強したりしていると、CSSを編集したりしたくなります。
ですが、WordPressは元から設計が組まれているため、弄りづらいなと思う人も多いはずです。
そこで今回は、「WordPressのCSSを編集してオリジナルのデザインにしたい！」「レスポンシブデザインに対応させたい！」といった方向けに、デザインを変更する際のポイントをお伝えしていこうと思います。
＞＞WordPressのCSS編集について学べるWebデザインスクールはこちら
＼ Twitterでも口コミ良好！ ／
2021年5月31日にリリースされた、エックスサーバーのシステムをベースにしたシン・レンタルサーバー！
月額料金がスタンダードプランで1,540円〜（税込）なので、コスパよく爆速なサイト運営が可能に！
管理画面はエックスサーバーと同じで使いやすくなっているので、これからサイト運営をする方にはおすすめです！
CONTENTS
WordPress(ワードプレス)でCSSを編集する方法
WordPressは既にシステムが出来上がっているCMSのため、CSSの編集場所も決まっています。
基本的に、CSSを編集して良いのは、テーマのファイルが入っている「wp-content」→「themes」→「テーマ名」のフォルダ内にあるstyle.cssなどです。
テーマによっては、reset.cssやbase.cssなども編集が必要になったりします。
※「ノーマライズCSS」「リセットCSS」などは、編集ができることと意味が違うので気をつけましょう。
WordPressでCSSを読み込ませる方法
続いて、自分で書いたCSSファイルを読み込ませたい場合や、どのCSSファイルを読み込んでいるのかを確認したい場合についてです。
head内に記述
まず、CSSの読み込みはhead内に記述します。
CSSのパスに注意
ここで、気をつけるべきはCSSのパスです。
上の画像では絶対参照のCSSで参照していますが、"相対参照"で書かれている場合は「どこから参照されているのか？」が大事になります。
特にCSSのbackground:urlで指定する際にエラーが起きるため、既に指定されているものを参考にしましょう。
WordPressで複数のCSSを追加する方法
CSSを複数指定したい場合は、head内に記述しましょう。head内に記述する方法としては、2通りあります。
header.phpを編集する
1つ目はheader.phpに直接<link ~~>を記述することです。これが比較的簡単です。
wp_head()の中身を編集する
2つ目は、WordPressにはwp_head()で、headerの内容を取り込む関数があります。
これはthemesフォルダ内に記載されていたりしますので、ここに書き込むことも一つの手です。ただし、探すのが結構大変なので根気がいります。
固定ページごと・記事ごとにCSSを追加する方法
LP(Landing page,ランディングページ)を作ろうとしていると、固定ページに個別にCSSを適用してヘッダーやフッターを無くしたいと思うことがあります。
結論だけ言えば、それは"半分可能ですが、半分不可能です"。
実はテーマによって、固定ページに個別にCSSを適用できるものもあれば、できないものもあるからです。
ちなみに、「Xeory Base」では個別にCSSを実装することが可能です。
WordPressでCSSを追加できるプラグイン
WordPressのプラグインにある「Simple Custom CSS」を使うと、テーマファイルを直接編集しなくともテーマのstyle.cssに上書きするCSSを書き込むことが出来ます。
このプラグインを使うことで、すぐに初期設定に戻せますし、初心者には安心ですね。
CSSで画像を読み込む
CSSで画像を読み込む際には「background」か「background-image」プロパティを使います。どちらを使うにしても、上記同様パスが重要になるので気をつけましょう。
CSSで画像を読み込む場合は、imgタグで画像を読み込む際と読み込み方が変わるので表示速度などに気にしている時には注意してください。
CSSを編集したのに反映されない場合の対処法
WordPressを編集していると、CSSを変えたのにデザインが変わらないといったことが頻繁にあります。
以下3つの解決策について先に理解しておくことで、編集した瞬間に焦らないで済むので知っておきましょう。
- キャッシュを削除する
- サーバーが反映しているか確認
- エラーが出ていないか確認
キャッシュを削除する
まずは、キャッシュが残っている場合です。
自分のブラウザにキャッシュが残っていて、CSSの変更前のデザインが適応されている場合があります。
その場合は、ブラウザでキャッシュを削除しましょう。(プラグインで保存している場合は、プラグインの方でも削除しましょう)
サーバーが反映しているか確認
次は、サーバーが実際に反映してくれているかを確認します。実はレンタルサーバーなどを使っていると、編集をしても1時間程度はデザインが変わらなかったりします。
これは、サーバー内のファイルを確認すれば、「サーバー自体の反映が遅いのか」「ファイルが間違っているのか」が分かるはずです。
style.cssを確認して、自分がした変更が確認できるかを調べてみてください。
エラーが出ていないか確認
ここまでの内容がすべて完璧だとしたら、エラーが発生している可能性があります。
エラーが発生した場合、全てのデザインがぶっ壊れるか、一部がめちゃくちゃなデザインになったりします。
簡単な確認方法は、デベロッパーツールを開いてエラーや警告が出ていないかを確認する方法です。
この画像の赤枠内の用に、警告マークが出ている場合は確認してみましょう。
レスポンシブ対応って？
続いて、最近では、Webデザイナーとして仕事をしていく上で、レスポンシブ対応は必須のスキルになってきています。
スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。
ただ、実はレスポンシブ対応とはいっても、CSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。
つまり、CSSが普通に書けるようになってしまえば、レスポンシブだろうとあまり関係ないわけです。それでは簡単にメディアクエリについて説明します。
CSSのメディアクエリって何？
CSSにおいてメディアクエリと呼ばれるものは、下のようなコードです。
@media all and (min-width: 920px) {
body{
width:100%;
}
}
これは表示メディア(スマホかダブレットかPCかなど)の表示領域(表示に使われるサイズ)が、920px以上の時に適応されるCSSを意味しています。
この例だと、920px以上の場合(PCなど)はbodyが横幅100%になります。
このように、@mediaという記述を使って表示メディアに応じて適用するCSSを変更するものをメディアクエリと呼びます。
メディアクエリのテンプレート
そして、このメディアクエリの記述方法には、大きく2通りのテンプレートが存在します。
それは「モバイルファースト」と呼ばれるものと「デスクトップファースト」と呼ばれるものです。
モバイルファースト：スマホなどのモバイルでの表示スタイルを先に指定する方法。スマホ→タブレット→PCという順番でCSSをメディアクエリを用いて追記する。
デスクトップファースト：PCなどの表示スタイルを先に指定する方法。PC→タブレット→スマホという順番でCSSをメディアクエリを用いて追記する。
モバイルファーストの場合は、CSSが適用される表示メディアのサイズをだんだんと大きくしてメディアクエリの分岐を作っていきます。
例えば「基本スタイル」→「640px以上のスタイル」→「920px以上のスタイル」のように書いていきます。
デスクトップファーストの場合はこの逆になります。それでは、実際のテンプレートのコードです。
モバイルファースト
まずは、モバイルファーストから紹介します。モバイルファーストの場合はmin-widthを用いた分岐になります。
body{
width:100%;
}
@media all and (min-width:480px) {
/* 480px以上の場合はこのCSSが適用されます */
body{
width:90%;
}
}
@media all and (min-width:768px){
/* 768px以上の場合はこのCSSが適用されます */
body{
width:80%;
}
}
@media all and (min-width:1024px) {
/* 1024px以上の場合はこのCSSが適用されます */
body{
width:70%;
}
}
デスクトップファースト
次はデスクトップファーストの紹介です。こちらはmax-widthを使用します。
body{
width:70%;
}
@media all and (max-width:1024px) {
/* 1024px以下の場合はこのCSSが適用されます */
body{
width:80%;
}
}
@media all and (max-width:768px){
/* 768px以下の場合はこのCSSが適用されます */
body{
width:90%;
}
}
@media all and (max-width:480px) {
/* 480px以下の場合はこのCSSが適用されます */
body{
width:100%;
}
}
メディアクエリで注意すべきポイント
メディアクエリを使うに際して、気をつけるべきポイントが幾つかあります。
1.CSSのルールとして同じ重要度であれば後のスタイルが適用される
2.分岐点を逆にすると全く分岐しない
まず、1つめの内容に関してですが、CSSは同じ重要度(セレクタの指定の仕方などで決まる)の場合は、後から書いたCSSが適用されます。
それを忘れてしまっていると、メディアクエリを書いているのに適応されないといった混乱が起こりやすくなります。
また、これは2つめの内容に影響が及んで、分岐の順番をメチャクチャにすると、スタイルの適用もめちゃくちゃになります。
例えば「420px以下」→「640px以下」→「920px以下」のように分岐させると、全て920px以下に当てはまるので
最後のスタイルがどのサイズでも適用されることになります。これらの注意ポイントだけをしっかりカバーしておけば、困ることはあまりないでしょう。
レスポンシブをCSSのメディアクエリを書いていくにあたって、モバイルファーストとデスクトップファーストというテンプレート(本当は手法)はかなり使えます。
この考え方を上手く使って、実際にCSSのコーディングに役立ててください。
※一般的には、スマホ表示の方が制限が強いため、モバイルファーストで作ったほうが作りやすいとは言われています。
ブレイクポイントについて
ブレイクポイントとは?
メディアクエリの説明の際に、CSSを分岐する境目の幅があったと思います。例えば620pxなど。この幅を、ブレイクポイントといいます。
レスポンシブWebデザインを実践する上では、このブレイクポイントを何pxに設定するかも気にしなければいけません。
これから、この記事の執筆時には使えているブレイクポイントを説明しますが、初心者の方には覚えておいて欲しいことがあります。
それは、”適切な”ブレイクポイントは時代の流れによって変わるということです。
Webデザイナーの中でも、どこをブレイクポイントにするのが適切かといった話が出る時がありますが、スマホのサイズ変更ひとつが影響したりします。
例えば、iphoneのサイズ変更によって今まで使われていなかったpxが、よく使われている表示領域になったりします。
一旦、今のスマホの表示サイズを見てみましょう。
スマホの表示サイズ一覧
iPhone初代～4：320px ×480px
iPhone5：320px × 568px
Nexus5：360px × 640px
iPhone6：375px × 667px
~~~~~~~~~~~~~~~~~~~~~~~
Nexus7：600px × 960px
iPad,iPad mini,Nexus9：768px × 1,024px
Nexus10：800px × 1,280px
このような感じになりますが、例えば上のような表示領域の場合は、どこで分岐させるのがいいのかと考えて出てくるものがブレイクポイントです。
2017年1月でのPCのデバイスサイズは下のようになっています。
横幅が1920pxが最も多く、次に1366px、そして1024pxが続きます。
ここでまず思いつくのが、PCの最小サイズが1024pxなら、1024pxをブレイクポイントにすればいいのでは？という話なのですが、画面サイズと表示領域は意味が異なっており、スクロールバーなどの影響で表示領域はサイズよりも小さくなるのです。
そのため、1024pxと言えど、表示領域はそれより小さいこともあります。
適切なブレイクポイントは？
さて、ここまで話した内容で、この記事執筆時点での適切であろうブレイクポイントについて書きます。
まず、一番小さなブレイクポイントに関しては、できればタブレットとスマホを分けたいので、Nexus7とipadを分岐する感じでいいでしょう。
620pxなどはちょうどその例になります。
次に、スマホ・タブレットとPCの分岐をしたいのですが、PCの1024pxが意外と厄介です。他のPCのサイズに比べると結構小さいので、PCは2段階設定するのがいいでしょう。
スマホ・タブレットと1024pxの境界線を960pxとし、1024pxとそれ以外のPCの境界を1280pxとしている人が多いです。
こんな感じでモバイルファーストとデスクトップファーストそれぞれの形で纏めると
モバイルファースト：
全てに適用されるCSS→620px以上に適用→960px以上に適用→1280px以上に適用
デスクトップファースト：
全てに適用されるCSS→1280px以下に適用→960以下に適用→620px以下に適用
となります。
具体的にコードは下記になります。
モバイルファースト
body{
width:100%;
}
@media all and (min-width:620px) {
/* 620px以上の場合はこのCSSが適用されます */
body{
width:90%;
}
}
@media all and (min-width:960px){
/* 960px以上の場合はこのCSSが適用されます */
body{
width:80%;
}
}
@media all and (min-width:1280px){
/* 1280px以上の場合はこのCSSが適用されます */
body{
width:70%;
}
}
デスクトップファースト
body{
width:70%;
}
@media all and (max-width:1280px){
/* 1280px以下の場合はこのCSSが適用されます */
body{
width:80%;
}
}
@media all and (max-width:960px){
/* 960px以下の場合はこのCSSが適用されます */
body{
width:90%;
}
}
@media all and (max-width:620px) {
/* 620px以下の場合はこのCSSが適用されます */
body{
width:100%;
}
}
レスポンシブなモーダルウィンドウをCSSで実装するコードスニペット
続いて、モーダルウィンドウについてです。
こちらはプラグインなどを使用するものが多く、意外とCSSで実装する方法が紹介されていないので、仕組みを紹介していこうと思います。
まずは、モーダルウィンドウについて知ってもらうためにも、デモを見てもらう方がいいでしょう。
See the Pen QgBQNE by Kurosu Ryo (@ryokurosu) on CodePen.0
幅を狭くすると、レスポンシブにも対応させているのが分かるかと思います。
CSSで実装するメリット
そもそも、なぜCSSで書けたほうが良いのか？という話もしておきます。
プラグインを使う必要がない
WordPressならプラグインを使えばいいのですが、自分で開発しているCMSの場合はそうもいきません。
自分で作成しているサイトの場合も、プラグインが入れれないことが多いです。そんな場合は、自分で実装するしか無いです。
iframeを使う必要がない
また、iframeというセレクタを使わなくて済みます。個人的にはiframeが出てくると、少しCSSが書きにくくなるので出来る限り避けたいと思っています。
IE8などにも対応できる
最後に、CSSで使われている機能も、よく使われているものばかりなので、ブラウザ間による差が少ないです。
モーダルウィンドウの作り方のポイント
それでは、このモーダルウィンドウの作り方のポイントを紹介していきます。
イベントハンドラを使う
大事な要素として、イベントハンドラを使う部分があります。具体的には、以下のコードです。
$(function(){
$('#button').on('click',function(){
$('body').append('<div id="mordal">modal<a id="close">×</a></div>');
$('body').append('<div id="cover"></div>');
$('#close').on('click',function(){
$('#mordal,#cover').remove();
});
});
});
idがbuttonのものと、idがcloseのものにイベントハンドラをつけています。
cover要素を付ける
モーダルウィンドウを出す時に、文字を表示するものの背後にグレーで覆う要素が必要です。
それは、idがcoverのdiv要素が覆ってくれています。
かなりシンプルにwidthは%指定しました。heightはpaddingを指定すれば、比較的綺麗に余白ができるかと思います。
z-indexで調整する
cover要素と、モーダルウィンドウのウィンドウ部分にz軸方向の優先順位を付ける必要があります。
もちろん、ウィンドウ部分が手前に来るように大きい数字を指定しましょう。
中には、このモーダルウィンドウをメニューに応用したい人もいるでしょう。
スマホなどの場合、メニューを押すとモーダルウィンドウが出てさらに細かくメニューが選べるといった機能もありますね。
今回は作っていませんが、この場合はPHPとうまく連携させる必要があるかなと思っています。
WordPressでCSSを編集する方法まとめ
いかがでしたでしょうか。CSSの編集方法について今回は色々と纏めてみました。
この記事が、これからあなたがWordPressのオリジナルサイトを作っていこうという力になれば幸いです。最後までお読み頂きありがとうございました。
WordPressにおすすめのレンタルサーバー
