⑱デザイン・見た目をカスタマイズする（カスタムCSS）

2016.07.05. 2016.11.05.

natsuki

こんにちは、natsukiです。

今日はよりサイトのデザインを自分好みに変えられてしまう、カスタムCSSという機能について書きます！
正直、これをマスターすればかなりデザインを自由に変えることができる反面、
マスターするにはHTMLとCSSの知識が必要にもなります。

なので、ここでは、
「ここに色々書くとデザインを変えられるんだな」
「自分で本格的にデザインをカスタマイズしたいなら、こういうことを学んだり調べたりする必要があるんだな」
「でも自分はここまで勉強する気はないし、ある程度理解できたら後は誰かにお願いしよう」

など、だいたいのイメージが掴めればOKと思って下さい。

CSSとは

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）は、ホームページのデザインを指定するための言語です。
CSSをカスタマイズすることができれば、「文字色を変える」とか「もっと右に寄せたい」とか「背景に画像を入れたい」とか、色々なデザインをカスタマイズすることができます。

ただ、このCSSはHTMLとセットで使うものなので、HTMLの基礎知識も必要になってきます(汗)

HTMLの例

<h2>これは見出し2です</h2>
<p>文は<p></p>で囲みます。</p>
<h3>これは見出し3です</h3>
<p>こんな風に、基本は要素の最初と最後をタグで囲みます。</p>

CSSの例

h2 {
    font-size: 20px; /*<h2></h2>で囲んでいる見出し2の文字サイズを20pxに指定する*/
}

h3 {
    font-weight: bold; /*<h3></h3>で囲んでいる見出し3の文字を太文字にする*/
}

p {
    color: #555555; /*<p></p>で囲んでいる段落の文字色を#555555に指定する*/
}

この例を見て、なんとなくイメージをつかんでもらえたら嬉しいのですが…
つまりホームページで表示している「文字」や「画像」「リンク」などは、全てHTMLという言語ルールに従って、「タグ」と呼ばれるのを使って書かれています。
そしてそのデザインをCSSで指定しているのです。

参考サイト：
HTMLタグクイックリファレンス（目的別）
スタイルシートリファレンス（目的別）

カスタムCSSを開こう

カスタムCSSという機能は、テーマによってついていたりついていなかったりします。
ついていないテーマの場合は、自分で子テーマというのを作ってカスタマイズする必要があります。

今回利用しているテーマ「Lightning」では、推奨プラグイン「VK All in One Expansion Unit」にこの機能がついています。

左側のメニューの「VK ExUnit」＞「CSSかカスタマイズ」を開きましょう。
ここにCSSを書くと、元のテーマのファイルを編集しなくても、デザインを自由に変更することができます。

でも何を書いていいか分からないですよね(汗)

とりあえずコピペしてみよう

とりあえずコレをコピペしてみましょう(笑)
コレはこのサイトで使っているCSSの一部になります。

/*GoogleのWEBフォントを読み込み*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*②③見出し(タイトル)部分のフォントを読み込んだGoogleフォントにする*/
.entry-title,
.subSection-title,
.entry-body h2, .entry-body h3, .entry-body h4 {
	font-family: "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

/*④⑤段落(p)や協調（em）のフォントを変える*/
p, em {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif ;
}

/*②記事タイトル(見出し1)の上下に少し空間を入れて行間を調整*/
.mainSection header h1 {
	margin: 30px 0;
	line-height: 1.5;
}

/*トップページのセクションのタイトルの調整*/
.mainSection-title {
	border: none;
	background: none;
	color: #333;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6em;
	text-align: center;
}

/*①投稿日時などの情報の色を変える*/
.entry-meta_items {
	color: #727272; /*色を指定*/
}


/*③見出し2のデザインを変える*/
.entry-body h2,
.comments-area h2 {
	border-top: solid 2px #ccc; /*見出しの上の線*/
	border-bottom: solid 2px #ccc; /*見出しの下の線*/
	background: none; /*背景ナシ*/
	font-size: 24px; /*文字の大きさ*/
	margin: 80px 0 60px;
	padding: 15px 20px;
}


/*見出し3の上に余白を入れる*/
.entry-body h3 {
	margin-top: 60px;
}


/*見出し4のデザインを変える*/
.entry-body h4 {
	color: #0097A7; /*色指定*/
	background: none; /*背景ナシ*/
}


/*④⑤段落の下に余白を入れる*/
.entry-body p {
	margin-bottom: 30px;
}


/*強調部分を斜体にせず、太字にする*/
em,strong {
	font-weight: bold;
	font-style: normal !important;
}

すると、デザインが少し調整されます。