Simplicityの見出し2~子テーマを使って変更する

子テーマに見出しの変更を記述する

前回、7月7日に既存のSimplicity子テーマはサイトからダウンロードして作ることができました。

だいぶ疲れも取れましたので、本日はいよいよ子テーマに見出しの変更を記述します。

とりあえず、h2,h3だけを、なんでもいいので目立つ見出しに変えたいと思います。

見出し変更のコピペ材料を探す

先日いろいろサイトを見ていたので、コピペ材料の記事がたくさんあることは分かっていました。

なるべく面倒がないように、「Simplicity2の子テーマでh2,h3の見出しを変更する」という方針の下で検索したら、下記のサイトが一番よさげに思えました。

解放デビュー

実際その見出しがサイトに使われているのですが、h2は青色の塗りに白抜き文字、h3は青い下線です。
シンプルかつハッキリとした見出しで、わたし好みでしたのでここに決めました。

実際には色とか線の太さとかバリエーションがありますが、まずは変えて見ることが先決です。

成功して自信がつけば、「色をこうしたい」とかの欲は自然に出てきますし、色見本のコードを調べてチョコッとそこだけいじればいいことです。

記述をコピペして子テーマのCSSのいちばん下に貼り付けてから、「ファイルを更新」を押しました。

(貼り付けると左に「はじめて番号が出現」します。こんなこともはじめてわかりました;)

ドキドキしながらプレビューを見てみると…

表示に反映しない! そんなときの解決法

おかしいな…。
全然変わっていない。

ですが、こういうことは、非常によくあることですw

ていうより、ほとんど常にこういう感じですよねww

「子テーマ」「変更」「反映しない」などで検索すると、たくさん出てきました。

わたしにはやさしい言葉で解説してある下記が分かりやすかったです。

Up-Income

終わり間近の「その他」のところにChromeでのやり方が書いてあります。
こんな具合です。

スタイルシートを更新しても、キャッシュが残っていると変更が見れない場合があります。

PCのChromeブラウザの場合、[その他のツール]→[デベロッパー ツール]を選択してから、左上の更新マーク(画面左上の、矢印が右回りに回っているマーク)を長押しし、[キャッシュの消去とハード再読み込み]を選択すれば、スタイルシートの変更が適用されて見えるようになると思います。

↑実際これで、一発で反映しました。

Up-incomeさん、ありがとうございました。m(_ _)m

いいですねー。

一瞬でサイト全体、h2が青塗りの白抜き文字に、h3が青下線になりました。

これだけハッキリしていると見出しの序列は一目瞭然、明解で気持ちいいです。(^o^)

ビジュアル編集画面にも反映させる

さて、ブログの表示は案外簡単に改修されました。

でも実は、一つ問題が残っています。

わたしは投稿の編集のプラグインとしてTinyMCE Advancedを使っています。
これは今ではほとんど方にとって必須のプラグインとなっているようです。

そのプラグインのせいかわかりませんが、「変更した見出しがわたしの使うビジュアル編集画面上では反映していない」んです。(変更前の表示のままです。)

編集画面だけなのでそれほど問題ない気もしますが、ブログの最終イメージが分かりづらいのは面白くないので、ビジュアル編集画面上でも見出しがブログ表示と同じように見えるようにしたいと思います。

実はUp-incomeさんはこのことにも言及していました。

Up-Income

「ビジュアルエディターの見た目も統一する」のところでやり方がこう書いてあります。

ビジュアルエディターのスタイルシート(editor-style.css)を編集します。

先ほどのstyle.cssに記載したCSSコードをコピペして

[.article]部分を[body#tinymce.wp-editor]に変更すれば完了です。

つまり、見出し変更の「ビジュアル編集画面版」をCSSに追記するわけですね。

「解放デビュー」さんのコードであっても、考え方は同じはずです。

もう一回一番下にコピペ→[.article]を[body#tinymce.wp-editor]に変更

そうして、[その他のツール]→[デベロッパー ツール]…もしてキャッシュを削除…これで…

あれ、ビジュアル編集画面変わんないなあ。><;
これはどうしたことだ。

もうちょっと考えてみましょう。(‘_’)

……

~~~~~~~~~~~~

(P.S.)

わたしは大きな勘違いをしていたようです。

Simplicity2にデフォルトで用意されている子テーマには、Style.CSSのほかにも8個のファイルがありました。

Simplicity子テーマ内に入っているファイルの役割

8個の中のeditor-style.cssというファイルも。
ここに書き込まなければならなかったようです。

それはどこにあるのでしょうか。

editor-style.cssを編集する

外観→テーマの編集でSimplicity Childのstyle.cssを編集していたわけですが、その画面をよく見ると、なんと、右側の「テーマファイル」にstyle.cssのほかにもeditor-style.cssを含めすべてのファイルが並んでいました!

こうなれば話は簡単、1つ前でUp-Incomeさんの言ったようにeditor-style.cssに書き込むだけです。

先ほどと同じようにeditor-style.cssに書き込んで、キャッシュ削除も最後にやって。

おおー、とたんにビジュアル編集画面でh2見出しが青く塗られ文字が白抜きに!

これで完璧ですね。(*^_^*)

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です