前回の記事ではbootrstrapの子テーマを反映させるとこまでやりました（Blog始めたばかりで慣れてなく、細切れにし過ぎてました。反省……）。
今回は子テーマ反映後の作業になります。
目次
前置き
understrapは基本的にscssで開発していくテーマのようですが、私はまだscssまで勉強できていないのです。そのため、今回はcssで作業を進めたいと思います。
さらに前置き
私のブログではunderstrapの解説は初級〜中級の内容なので、検索でこのページにいらした方には物足りない内容の可能性があります。その場合は、下記サイトで中級〜上級レベルの解説がされてますので参照になさってください。
一般的なやり方ではうまく行かない
他のテーマの場合、基本的に子テーマ作成時に作ったstyle.cssに変更したい内容を記述していけば反映されます。
しかしunderstrapの場合、style.cssにどんだけ思いの丈を記述しても、反映してくれることと反映してくれないことが出てきます。
understrapのバージョン
2019/5/13あたりにunderstrapがv0.9.3にバージョンアップされました。
それまでのverでは（バグだったようですが）head内でunderstrap-child/css/theme.min.cssを参照するよう指定されており、親テーマからコピペで移動してきたtheme.min.cssに変更したい内容を追記していけば反映されましたが、突然該当参照リンクがunderstrap/css/theme.min.cssと親テーマ内のtheme.min.cssへと変更されました。
知らずにバージョンアップしたら、それまで変更を加えていたstyleが全部なくなって親テーマに戻っていてビックリしましたわ。
v0.9.3では、head内で子テーマのstyle.cssの下に親テーマのtheme.min.cssが参照されるため、上書きされてしまいます。かといって親テーマ内を触りたくはない。
そのためカスタマイズ用のcssを別に作成し、functions.phpでhead内にそのcssへの参照リンクを追加させる方法を取ろうと思います。
functions.phpに追記してカスタマイズ用cssを参照させる
2020.11.12更新：function.phpと記載してましたが、functions.phpに修正しました。
//headにタグを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '<link rel="stylesheet" href="/wp/wp-content/themes/understrap-child/css/theme-child.css" />
';
}上記をfunctions.phpのphpタグの中に追記します（cssの場所と名前とidは任意です）。
のちのち階層を変える可能性がある場合は、中級な書き方になりますが、
//headにタグを追加
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '
<link rel="stylesheet" href="', $uri = get_stylesheet_directory_uri() ,'/css/theme-child.css" />
';
}と、スタイルシートディレクトリのURIを取得する記述の仕方をすると、後で楽です。
これにより、ちょっと他のcss群と離れてしまいましたが、上書きされない位置に子テーマ用の参照リンクが反映されました。
さて、いよいよcssに記述してきます。
先ほど指定したcss/theme-child.cssにざっと変更したい箇所を記述してアップロードします。
ここでは、TOPページは後回しにして、簡単に進められる投稿ページ（single.php）から調整してみます。
Before
After
ちょっと雰囲気変わりましたね。
この調子でcssで変更できる箇所をカスタマイズしていきます。
サイドメニューを消す方法
ところで上記の例では、understrapでデフォルトで表示される右メニューがすでに非表示にされていますね。消し方は二通りあります（チームで作業している場合はどちらかで統一しておいた方が混乱が無いかと思います）。
方法その1：サイト内で一切サイドメニューを使わないのであれば、 「ダッシュボード」＞「外観」＞「カスタマイズ」＞「テーマレイアウト設定」の「サイドバーの位置」で「サイドバーなし」を選択し、上の「公開」ボタンをクリックで全てのページに反映されます。
方法その2： 一覧ページならindex.php、カテゴリー一覧ページはarchive.php、記事詳細ページならsingle.phpを親テーマから子テーマにコピペで持ってきて、サイドメニューを差し込むコードを削除し保存、アップロードします。
おまけ：footerのコピーライトを編集する
この記事ではcssのみでカスタマイズすると言いつつ、上のキャプチャで編集しちゃってたので言及します。
さっさと変えておきたいfooterのコピーライト部分は、footer.phpを親テーマから子テーマへ複製してきて編集します。
単純にコピーライトのみにしたいなら、footer.php内の
<div class="site-info">
<?php understrap_site_info(); ?>
</div><!-- .site-info -->を、
<div class="site-info">
© （任意のサイト名か団体名）
</div><!-- .site-info -->に書き替えて上書きアップします。
ちなみに、coryrightの記述について調べた記事もありますので、よろしければご覧ください。
次の記事では、テンプレートphpやプラグイン・ウィジェットを編集します。
ブログ型表示サイトの場合は、大体完成に持っていけるんじゃないかと思います。