ページ目次
WordPressのデフォルトテンプレートにオリジナルCSSを加えたい
とりあえず簡単にWebサイトを起ち上げるとき、Wordpressは一番の候補になると思います。
さらにサイトのデザインもそれほどこだわりがないとなると、デフォルトで設定されているテンプレートをそのまま使うのが一番簡単で楽ちんです。そう、このブログのように（爆）。
少しデザインをカスタマイズしたい
そのままでいいやと言いつつも、やはり多少自分好みにアレンジしたい。そこでオリジナルのスタイルシートを用意してデフォルトのテンプレートに適用しようと試みました。
（2017年3月追記）
注：多少変更を加えたので、現在の当サイトは下記のスタイルとは多少違っています。
具体的には、見出しタグをもう少し際立たせたかったので、
- h2タグは、背景色を青に変えて文字色を白に。
- h3タグは、背景色をグレーに、文字の左に青のボーダーをつける。
- それぞれ余白をもう少しあける。
などの変更を加えようと決めました（上記画像を参照してください）。
function.phpにwp_enqueue_style()を追加する
最初は、style.cssに直接書き込もうかとも考えたのですが、新規にCSSファイルを用意することにしました。
CSSファイルの置き場所は、元々用意されていたその他のCSSファイルと同じにし、【テンプレートディレクトリ/assets/css/mystyle.css】としました。
このままではただファイルを設置しただけなので、読み込ませるためにfunction.phpをいじります。
// function.php
// テンプレートがTwenty Seventeenの場合、410行目あたり
/**
* Enqueue scripts and styles.
*/
function twentyseventeen_scripts() {
//
// ~ 他のCSS読み込み部分 ~
//
wp_enqueue_style( 'mystyle', get_theme_file_uri('/assets/css/mystyle.css'), array( 'twentyseventeen-style' ) );
//
// ~ javascriptの読み込み ~
//
}
なぜかCSSが反映されない！
なぜかh2に指定したスタイルが反映されていない
function.phpで指定したファイルはちゃんと読み込まれているのにもかかわらず、なぜか反映されていないスタイルが一部ありました。全部ではなく、一部。
他のスタイルで上書きされている訳でもなく、一部スタイルのみ（ファイルの先頭部分に定義したスタイル）が、ただただ反映されていない。何故だろう。
Theme Nameの記述がいるんだってさ！
不思議に思って、他のCSSファイルを覗いてみる。
ファイルの先頭にTheme Nameとの記述を発見…。
絶対これだわ。。。
そういえば、オリジナルのテンプレートを作るとき、style.cssの冒頭にテンプレートテーマ名を記述してたな…。
// mystyle.css
/*
Theme Name: Twenty Seventeen
*/
~ Styleの記述 ~
なんというケアレスミス！！恥
書き込んで見ると問題なく全てのスタイルが反映されました。なんて超基本的なところでひっかかっていたんだ…。おつかれさまでした。
