完全初心者がサイトデザインのCSSカスタマイズをするための基礎知識と手順！つまづきやすいポイントも解説
WordPressサイトはCSSの知識がなくてもテーマの基本的なデザインで作ることができます。
ロゴや色などの調整はテーマの設定で出来ることも多いですが、少し慣れてくると「こうしたいな……」という希望が出てくるもの。
そこでコピペでOK！なコードでいじってみたものの、少し崩れてしまったり思い通りにならないことがよくあります。
そんな初心者がCSSの勉強をしなくてもかなり自由にデザインを変えられるようにする方法を紹介します。
CSSの基本の構造を知っておくだけでカスタマイズは簡単にできる！これだけは知っておきたいCSSの基礎知識
実践するのが一番わかりやすいので、CSSについてあらかじめきちんと勉強する必要はありません。
覚える必要はないので、これだけ知っておけばカスタマイズが理解できる！という構造だけさらっと確認しておきましょう。
CSSのセレクタとは？要素名とクラス名とid名
セレクタとは、どの部分にCSSを適用するかを指定する部分のことです。
要素名とは、<div><p><ul>などの、HTMLの種類のことです。
HTMLには要素名と一緒にCSSのためにクラス名とid名を指定できます。
<h2(要素名)class(クラス名)="wide-pink" id(id名)="first">
要素名でなにを表示するかを表し、CSSでデザインを指定するための紐づけとしてクラス名とid名を付けるのが基本のHTMLの構造です。
(フォームやリンクのHTMLでは値やリンク先などの他の値もあります。)
<div class="post">
/* ……(間に様々な要素が入る) */
<h2 id="first" class="wide-pink">記事内のタイトル。目立つようにすると見やすい</h2>
/* ……(間に様々な要素が入る) */
</div>クラス名は何度でも使えます。
同じデザインを適用させるためのものです。こんなデザインですよーっていうことがわかるような名前をつけると良いです。
id名はページ内で１度しか使えません。
特定の要素にのみCSSを適用させたいときに使います。
CSSの他にもフォームやアンカー(ページ内の位置を示す)のためにも使います。この部分ですよーっていうことがわかりやすい名前をつけると良いです。
CSSの基本の書き方―セレクタでどの要素に適用するCSSかを示す
HTMLに対して、CSSでデザインを指定していきます。
セレクタの構造
.post h2#first{
margin: 3em -68px 2em;
padding: 20px 68px;
}緑色になっている部分がセレクタです。
.postの部分がクラス名です。HTMLで指定したクラス名の前に.を付けて指定します。
#firstの部分がID名です。HTMLで指定したID名に#を付けて指定します。
h2#first のように要素名に続けてクラス名やid名を指定した場合は、そのクラス名やid名が付けられた要素にのみCSSが適用されます。
.post h2 のように半角スペースを空けてから要素名やクラス名やid名を指定した場合は、.postのクラスがついた要素のなかにあるh2すべてにCSSが適用されます。
つまり、上記の例の場合.postのクラス名がついた要素内にある#firstのid名がついたh2にのみCSSが適用されます。
セレクタの使い分け
.post h2 {
position: relative;
border-left: 0px solid #fff;
background-color: #ff9eb9;
margin: 3em -25px 50px;
padding: 20px 25px;
}この場合の.postというクラス名はページの本文をしめす要素である<body>に指定されていて、テーマLightningによって全ての投稿ページにつけられています。
なので、.post h2は投稿の本文内の見出しh2すべてにCSSを適用します。固定ページの見出しh2には適用されません。
id名を指定したり、.post .box h2 (<body class="post">の内にある<div class="box">の中にあるh2)など、もっと細かい指定でCSSを書いた場合、より細かい指定が優先されます。
また、テーマで元々適用されているCSSよりは、カスタマイズで書いたCSSが優先されます。
複数のセレクタに同じCSSを指定
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: inherit;
}h1 ,h2, h3, のように,で区切ると、複数の指定で同じCSSを適用できます。
デベロッパーツールでCSSを見るときに、下にスクロールしていくとこのように見出し要素(h1～ h6)すべてに適用されているようなフォントの種類や文字の色などの基本のCSSが出てきます。
あまり変える必要がない基本の設定が多いですが、このように様々な要素に同じCSSを指定する場合はまとめればスッキリします。
画面サイズによってCSSを分けてレスポンシブルデザインにする
@media screen and (min-width: 1309px){
.post h2 {
margin: 3em -68px 2em;
padding: 20px 68px;
}
}@media screen and (min-width:1309px){ }という枠で囲んだCSSは、ユーザーが使用している端末の画面の大きさによってCSSを変えるものです。
min-widthが～以上のmax-widthが～以下のという指定です。
レスポンシブデザイン(PCでもスマホでも同じサイトを見やすく表示する)のために使います。
半角スペースを正しく入れることと、｛ ｝で囲むのを忘れないことに注意しましょう。
疑似要素をセレクタに追加して状態に応じて変化させる
a.tag-cloud-link:hover {
background-color: rgba(229,215,199,0.1);
}:hoverとセレクタに付けると、ホバー(カーソルをのせたとき)の変化を指定できます。
a(リンク)要素やボタンなど、クリックできる要素であることを示すためにデザインを変化させます。
他にもさまざまなセレクタがありますが、これらのセレクタはすべて覚えておく必要はありません。
わからないセレクタが出てきたり、「こんな風に指定できたらいちいちHTMLにクラスを書かないで済んで楽なのにな～」と思ったときにはセレクタの一覧を確認してみましょう。
CSSでの要素の大きさの指定の仕方
CSSでは様々な要素の大きさを指定します。
大きさの単位はさまざまありますが、３つ覚えておけば問題ありません。
px……画面上の大きさの絶対値で、どのデバイスで見ても大きさは同じ。
%……相対値です。画面の幅の50%としたり、親要素のボックスの幅の70%というようにできる。
em……相対値で文字数を基準にします。サイト全体の１文字の大きさが16pxの場合、2emは２文字分で32px。0.5emは8pxになります。
要素に対して大きさの指定の仕方は次のようになっています。
デベロッパーツールでウェブページにカーソルを当てたときに色分けして表示されます。
まずはデベロッパーツールで元のデザインがどうなっているかを理解する＆参考にする
ブラウザで右クリックしてすると、表示されているウェブページのHTMLコードと適用されているCSSを見ることができます。
さやっと。ではブラウザはGoogleChromeをおすすめしています。
検証でデベロッパーツールを開いたときにElementsというタブで見られるのがHTMLのコード。
その右側にあるStylesというのがCSSのコードです。
他にもメニューがありますが、基本的にはこの２つだけ開いて見られればOK。
左上にある四角と矢印のアイコンをクリックしてアクティブにした状態でウェブページ上の見たい部分をクリックすると、その部分のHTMLが表示されます。
さらに表示されたHTMLコードをクリックすると、その部分に適用されているCSSが表示されます。
問題は、どのHTMLコードに適用されるCSSを変えれば、目的のデザインが変えられるのかということ
WordPressでウェブページやウィジェットを作ると、自分が書いた部分がテーマで作られたウェブページの中に入ります。
自分で書いた部分が単純でも、テーマで表示している部分のコードは複雑に入れ子になっていることがあります。
たとえば、フッターウィジェットエリアにテキストウィジェットを追加して自分で単純なボックスのHTMLを書きます。
自分が書いたコード
<div class="box1">
<h5 id="site-name">フッターウィジェットのボックス</h5>
<p>フッターには会社概要を書いたり</p>
<p>利用規約・ヘルプページなどへのリンクを表示したりします。</p>
</div>テーマによってウェブページに表示されたときに、デベロッパーツールでボックスをクリックしてコードを見てみると、このようになります。
テーマによって表示されたコード
<div class="col-md-4">
<aside id="text-4" class="widget widget_text">
<div class="textwidget">
<div class="box1">
<h5 id="site-name">フッターウィジェットのボックス</h5>
<p>フッターには会社概要を書いたり</p>
<p>利用規約・ヘルプページなどへのリンクを表示したりします。</p>
</div>
</div>
</aside>
</div>フッター下に設置したシンプルなボックスをクリックしても、HTMLの中身はこのように複雑になっているため、どの部分のCSSを変えればいいのかわかりにくいかもしれません。
<div>は範囲を示すHTML要素なので、ウェブページの見た目上は何もなくてもCSSを適用させる派にを指定するためにHTML上で使われることがあります。
一つ一つの親要素をクリックして、どんなCSSが指定されているのかを確認していきましょう。
デベロッパーツールで変更を確認することで、どのCSSを変えればいいのかわかる
デベロッパーツールではCSSを直接書き換えて、変更をレビューできます。
変えたい部分のコードかな？と思うコードを見つけたら、デベロッパーツールのCSSを変更してみます。
または、チェックを外すとCSSが削除されます。
そうするとその部分のCSSが変わるので、変えたい部分のセレクタやプロパティを探したり試しに変えてみることができます。
どんなCSSを書いたらここが変わるの？と悩んでいるときはデベロッパーツールで予想した場所のCSSのチェックを外して戻す作業を繰り返すことで見つけられることがあります。
現在のデザインを確認したら、CSSのプロパティ名をググれば変え方がわかる！
デベロッパーツールでCSSを見たら、どんなCSSなのかをググれば指定方法が簡単にわかります。
.tagcloud a {
display: inline-block;
-webkit-box-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 1 0 auto;
min-width: 1px;
letter-spacing: normal;
text-decoration: none;
font-size: 14px;
font-size: 1.4rem!important;
border: 1px solid #ddd;
margin: 2px;
padding: 5px 10px;
}赤色になっているのがCSSプロパティ名です。
display flex letter-spacingなどを調べれば、どんなデザインにするためのCSSなのかがわかり、変え方も書いてあるサイトがあります。
基本で使うCSSは大体同じなため、何度か調べればいちいち調べなくてもカスタマイズできるようになります。
コピペでOKのCSSでも、上手くいかないときや調整したいときは使われているプロパティ名を一つ一つググってみると良いです。
あのサイトで見たようなデザインがやりたい！と思ったときは、他人のサイトでもデベロッパーツールで見て使われているCSSのプロパティ名をググればやり方がわかるかもしれません。
わからなかったらデザインのキーワードで検索してみるとコピペだけで実装できるコードが見つかるときもあります。
とにかくググる！
調べた通りにやっても思うとおりにデザインができない場合は、中身ではなくセレクタが間違っている場合が多いです。
<div class="wrap">
<div class="box">
<ul>
<li>ulのmarginではなくてdivのpaddingだった</li>
<li>背景がついているのはdiv.boxではなくてdiv.wrapだった</li>
</ul>
</div>
</div>このようなコードで、
ボックス内のul(リスト)周りの空白を小さくしようとしてulのmargin(周囲のスペース)を変えたけど変わらない……
→div.boxのpadding(中身の余白)を変えたら変わった。
背景色を消そうとしてdiv.boxのCSSで背景を消しても消えない……
→div.wrapの背景を消したら消えた！ということがあります。
ここじゃなかった！！ということは結構多いので、思う通りにデザインが変えられなかったときは親要素のや周囲の要素のCSSや、画面の大きさごとのCSSが指定されていないかなどをデベロッパーツールで念入りにチェックしましょう。
正しいセレクタを見つけて、プロパティ名を調べればCSSは変えられる！
これだけの手順でCSSのカスタマイズはできます。
とくに、色を変えたり大きさを変えたり、余白の広さを変える、影をつけるなどのカスタマイズはとっても簡単ですぐにマスターできます。
配置を変えたり、複数の要素を揃えたりするのは難しいときもありますが、そういった基本の部分はテーマがやってくれることが多いです。
これ以上の知識は、自分でオリジナルなデザインを作るのでない限り必要ありません。
誰かが書いたコードをコピペして、変えたいところを変えるだけで相当いろんなデザインが実現できます。
気軽にカスタマイズできる気がしてきたのではないでしょうか？
記号や空白が一つでも違っているだけで変わってしまうので、細かいところまでみて正確に書くことだけは気をつけましょう。
さやに相談してみる
自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！
記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！
ご利用ガイド