子テーマに見出しの変更を記述する
前回、７月７日に既存のSimplicity子テーマはサイトからダウンロードして作ることができました。
だいぶ疲れも取れましたので、本日はいよいよ子テーマに見出しの変更を記述します。
とりあえず、ｈ２，ｈ３だけを、なんでもいいので目立つ見出しに変えたいと思います。
見出し変更のコピペ材料を探す
先日いろいろサイトを見ていたので、コピペ材料の記事がたくさんあることは分かっていました。
なるべく面倒がないように、「Simplicity２の子テーマでｈ２，ｈ３の見出しを変更する」という方針の下で検索したら、下記のサイトが一番よさげに思えました。
実際その見出しがサイトに使われているのですが、ｈ２は青色の塗りに白抜き文字、ｈ３は青い下線です。
シンプルかつハッキリとした見出しで、わたし好みでしたのでここに決めました。
実際には色とか線の太さとかバリエーションがありますが、まずは変えて見ることが先決です。
成功して自信がつけば、「色をこうしたい」とかの欲は自然に出てきますし、色見本のコードを調べてチョコッとそこだけいじればいいことです。
記述をコピペして子テーマのCSSのいちばん下に貼り付けてから、「ファイルを更新」を押しました。
（貼り付けると左に「はじめて番号が出現」します。こんなこともはじめてわかりました；）
ドキドキしながらプレビューを見てみると…
表示に反映しない！ そんなときの解決法
おかしいな…。
全然変わっていない。
ですが、こういうことは、非常によくあることですｗ
ていうより、ほとんど常にこういう感じですよねｗw
「子テーマ」「変更」「反映しない」などで検索すると、たくさん出てきました。
わたしにはやさしい言葉で解説してある下記が分かりやすかったです。
終わり間近の「その他」のところにChromeでのやり方が書いてあります。
こんな具合です。
スタイルシートを更新しても、キャッシュが残っていると変更が見れない場合があります。
PCのChromeブラウザの場合、[その他のツール]→[デベロッパー ツール]を選択してから、左上の更新マーク（画面左上の、矢印が右回りに回っているマーク）を長押しし、[キャッシュの消去とハード再読み込み]を選択すれば、スタイルシートの変更が適用されて見えるようになると思います。
↑実際これで、一発で反映しました。
Up-incomeさん、ありがとうございました。m(_ _)m
いいですねー。
一瞬でサイト全体、ｈ２が青塗りの白抜き文字に、ｈ３が青下線になりました。
これだけハッキリしていると見出しの序列は一目瞭然、明解で気持ちいいです。(^o^)
ビジュアル編集画面にも反映させる
さて、ブログの表示は案外簡単に改修されました。
でも実は、一つ問題が残っています。
わたしは投稿の編集のプラグインとしてTinyMCE Advancedを使っています。
これは今ではほとんど方にとって必須のプラグインとなっているようです。
そのプラグインのせいかわかりませんが、「変更した見出しがわたしの使うビジュアル編集画面上では反映していない」んです。（変更前の表示のままです。）
編集画面だけなのでそれほど問題ない気もしますが、ブログの最終イメージが分かりづらいのは面白くないので、ビジュアル編集画面上でも見出しがブログ表示と同じように見えるようにしたいと思います。
実はUp-incomeさんはこのことにも言及していました。
「ビジュアルエディターの見た目も統一する」のところでやり方がこう書いてあります。
ビジュアルエディターのスタイルシート(editor-style.css)を編集します。
先ほどのstyle.cssに記載したCSSコードをコピペして
[.article]部分を[body#tinymce.wp-editor]に変更すれば完了です。
つまり、見出し変更の「ビジュアル編集画面版」をCSSに追記するわけですね。
「解放デビュー」さんのコードであっても、考え方は同じはずです。
もう一回一番下にコピペ→[.article]を[body#tinymce.wp-editor]に変更
そうして、[その他のツール]→[デベロッパー ツール]…もしてキャッシュを削除…これで…
あれ、ビジュアル編集画面変わんないなあ。＞＜；
これはどうしたことだ。
もうちょっと考えてみましょう。(‘_’)
……
（P.S.）
わたしは大きな勘違いをしていたようです。
Simplicity2にデフォルトで用意されている子テーマには、Style.CSSのほかにも８個のファイルがありました。
８個の中のeditor-style.cssというファイルも。
ここに書き込まなければならなかったようです。
それはどこにあるのでしょうか。
editor-style.cssを編集する
外観→テーマの編集でSimplicity Childのstyle.cssを編集していたわけですが、その画面をよく見ると、なんと、右側の「テーマファイル」にstyle.cssのほかにもeditor-style.cssを含めすべてのファイルが並んでいました！
こうなれば話は簡単、１つ前でUp-Incomeさんの言ったようにeditor-style.cssに書き込むだけです。
先ほどと同じようにeditor-style.cssに書き込んで、キャッシュ削除も最後にやって。
おおー、とたんにビジュアル編集画面でｈ２見出しが青く塗られ文字が白抜きに！
これで完璧ですね。(*^_^*)
