超初心者のためのWordPressのサイトのデザインの微調整方法

超初心者のための
WordPressのサイトの
デザインの微調整方法
‑CSSカスタマイズ‑
kurudrive@Vektor,Inc.
1

石川栄和@kurudrive
株式会社ベクトル
代表/フロントエンドエンジニア
趣味:スケボー/スプラトゥーン/将棋
自己紹介
2

無料WordPressテーマLightning
デモサイト
ビジネスサイト向け汎用WordPressテーマ
WordPress公式ディレクトリ登録済（無料）

3

今日の内容
HTMLとCSS
CSS指定の例
id名やclass名で指定する方法
idやclassで指定するメリット
複数のセレクタで指定する
CSSの継承の注意
CSSを書く場所とそれぞれの特徴
4

変更したい箇所の調べ方
特定のページだけ変更する
特定の画面サイズの時だけ指定する
5

HTMLとCSS
HTMLの例
普段ブラウザで見ているサイトはHTMLという形式の記
法で文章などが書かれています。
表示する文字をタグと呼ばれる<>で括っています。
<h1>h1 タグは見出し１の意味です</h1>
<p>文章は p タグを使います。</p>
<h2>見出し２は h2 になります</h2>
6

CSSの例
そのHTMLのデザインを調整しているのがCSSです。
index.html
<html>
<head>
<style type="text/css">
h1 {
font-size:24px;
color:#ff0000;
}
</style>
</head>
<body>
<h1>h1タグは「見出し１」の意味です</h1>
<p>文章はpタグを使います。</p>
<h2>見出し２はh2になります</h2>
<p>文章はpタグを使います。</p>
</body>
</html>
7

CSS指定の例
HTML
<h1>これは見出しです</h1>
<p>文章が入ります。</p>
CSS
h1 {
font-size:24px;
color:#330000;
text-align:center;
}
p {
font-size:16px;
}
8

id名やclass名で指定する方法
HTML
<div id="content">
<h1 class="post-title">投稿のタイトル</h1>
</div>
CSS
#content { width:80%; }
.post-title { font-size:18px; }
id名で指定する場合は#そのid名の前に#を
classで指定する場合はclass名の前に.をつけます。
9

idやclassで指定するメリット
タグの種類が同じでも場所によってデザインを変更
できる
タグの種類は変更になる場合がある
ブロックエディタでもブロックに対してclass名を入力
する所がある
10

複数のセレクタで指定する
HTML
<div id="content">
<h1 class="post-title event-title">投稿のタイトル</h1>
</div>
CSS
階層が深くなる場合は間にスペース空ける
同じタグ内での指定はh1.post‑title.event‑titleのよう
につなげる
div#content h1.post-title.event-title { font-size:18px; }
11

CSSの継承の注意
#指定や指定が多いものは優先度が高い
テーマなどでのCSS指定
h1.design { font-size:24px; }
追加した指定
h1 { font-size:14; } /* 指定が弱いので効かない */
12

index.htmlなどのファイル名で以下のコードを貼り付
けて確認してください。
<html>
<head>
<style type="text/css">
h1.design {
font-size:24px;
color:#ff0000;
}
h1 {
font-size:14px; /* 指定が弱いので効かない */
}
</style>
</head>
<body>
<h1 class="design">h1 タグは見出し１の意味です</h1>
</body>
</html>
13

CSSを書く場所
外観>カスタマイズ画面追加CSS
子テーマのstyle.css
プラグインなどで用意された場所
14

外観>カスタマイズ画面[追加CSS]
プレビューしながら作業できる
現在選択しているテーマにしか適用されない
テーマを変更すると記述してある内容は反映されま
せん。
データベースに保存される
うっかり消してしまったりすると戻しにくい
※データベースのバックアップがあれば戻せるが...
15

子テーマのstyle.css
ファイルなので旧バージョンなど保持しやすい
サーバーにアップするのが少し手間
16

プラグインなどで用意された場所
VKallInOneExpansionUnitの場合
管理画面>ExUnit>CSSカスタマイズ（サイト全
体に有効）
各投稿画面（該当の投稿にのみ有効）
テーマを変更しても適用される
（それが良い悪いはケースバイケース）
17

変更したい箇所の調べ方
18

デベロッパーツールを開く
デベロッパーツールは下記の手順で開けます。
1.Chromeでデザインを調整したいページを開く
2.画面のなにもない所などで右クリック
3.検証を選択
19

1.デベロッパーツール左上のアイコンをクリック
2.変更したい要素をクリック
3.該当のHTML部分がハイライトされる
4.指定した要素に効いているCSSが右側に表示される
5.表示されているCSSをコピーして、追加CSSなど
に貼り付けて改変する
（上書きしたい部分の行だけでOK）
21

特定のページだけ変更する
特定のページにだけ指定したい場合はbodyタグに指定
されているclass名を利用します。
変更したいページのHTMLを表示してデベロッパーツー
ルを活用して、タグについているclassを確認して指定
する事ができます。
<body class="post-template-default single
single-post postid-620 single-format-standard
post-type-post">
22

class名の意味の例
single:投稿の詳細ページ
single‑post:投稿タイプ「投稿」の詳細ページ
postid‑620:投稿のidが620の投稿
post‑type‑post:投稿タイプが「投稿」
CSSの指定例
body.post-type-post .mainSection{ width:100%; }
body.post-type-post .sideSection{ width:100%; }
投稿タイプが「投稿」の場合にメインエリアとサイド
バーを横幅いっぱいにして１カラムにする
23

余談:複数の一括指定は,で区切る
body.post-type-post .mainSection{ width:100%; }
は以下のように書ける
body.post-type-post .mainSection,
24

特定の画面サイズの時だけ指定する
表示画面のサイズによってCSSの指定が異なる場合が
あります。デベロッパーツールでセレクタを確認した
際に@media(min‑width:970px)などの表示がある場
合がそれにあたります。
25

特定の幅以上の時だけ指定する
@media (min-width: 768px ) {
.container {
width: 800px;
}
}
デベロッパーツールで見た時は@media(min‑width:
970px)の最後に{が無いので、コピーして貼り付け
る時は注意してください。
26

特定幅以上特定幅以下の指定
@media (min-width: 768px ) and ( max-width:992px) {
.container {
width: 800px;
}
}
27

そんな感じで頑張ってください。
ありがとうございました。
28

超初心者のためのWordPressのサイトのデザインの微調整方法

More Related Content

What's hot

Similar to 超初心者のためのWordPressのサイトのデザインの微調整方法

More from Hidekazu Ishikawa

Recently uploaded

超初心者のためのWordPressのサイトのデザインの微調整方法