【Simplicity2】見出しタグ変更方法、デザインのかぶり修正

ここでは、Simplicity2において見出しのデザインを変更する方法について記しておく。またこの作業の途中、親テーマのデザインとかぶってしまうという問題が起きたので、その解決した方法も残す。

見出しタグのデザイン変更方法

Simplicityにおいて、h1～h6のタグは一般的なものとかぶらないように名前が変えられているので、CSSのテンプレートなどをスタイルシートにそのままコピーしても反映されない。

通常のタグ　【h3】→ 【.article h3】simplicityのタグ

例えば、

のようなデザインにする場合、以下のコードになる。

/*****ここからh3のCSS*****/
.article h3{
position: relative;
border-bottom:transparent;/*親テーマのスタイルシート無効化*/
padding: 0.25em 0;
}
.article h3:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right, rgb(75, 133, 159), #62c1ce);
background: -webkit-linear-gradient(to right, rgb(75, 133, 159), #62c1ce);
background: linear-gradient(to right, rgb(75, 133, 159), #62c1ce);
}

/*****ここまでh3のCSS*****/

普通のCSSテンプレートサイトのコードをコピペすると「h3」になっているので上記のように「.article h3」に変える。

このコードをコピーするのは子テーマである「simplicity2-child」のスタイルシート（style.css）。

スタイルシートの記入はFTPかワードプレスから。

ワードプレスなら【外観】→【テーマの編集】から編集できる。

親スタイルシートのデザインも同時に表示される場合

デザインによっては子テーマのスタイルシートで書き換えを行っても、親のスタイルシートとかぶって表示されることがある。例えば以下のような場合。

これは、子テーマはあくまで親テーマの上書きとして実行されるので、親テーマの条件を書き換えていない部分があると表示されてしまう。上記の例の場合、border-bottomに関する記載が子テーマにはなかったので親テーマの下線も読み込んでしまったわけだ。

この場合以下のコードを入れることによって解決する。（上記のソースコードにすでに入っているので場所はそちらを参照）

border-bottom:transparent;/*親テーマのスタイルシート無効化*/

ここでは、親のスタイルであったグレーの下線を透明にして対応した。このように、親テーマのデザインもダブって読み込まれてしまう場合には、親テーマのstyle.cssの中身を確認して、言及していない指定がないか調べる必要がある。

参考 https://2001y.blogspot.com/2018/01/30.html

 



フルオーダーメイドのカリキュラム作成できるエンジニア塾【Samurai】