↓下の様に変更
テーマファイルエディッタのCSSエディッタのスタイルシート
不随のCSSエディッタ→追加CSS
どちらで編集しても構いません。「追加CSS」は、サイトの変更点を確認しながら編集できます。
CSSは次の3カ所で指定でき、追加CSSに記述したCSSが、子テーマや親テーマよりも優先されます。
h2は本文(コンテンツ)の他、サイドバーにも使われています。本文のh2のみを変更する場合には、本文のh2のクラス名を確認します。
画像②にカーソルを合わせると、h2のクラス名などがわかります。画像③がクラス名です。
テーマによりクラス名は異なります。コンテンツのクラス名が「.entry-content」のテーマもあります。
h1 | 見出しのタグ | h1はタイトルに使われる |
h2 | 見出しのタグ | h2は見出しに使われる |
h3 | 見出しのタグ | h3はh2の下の小見出しに使われる |
.entry-title | タイトルのクラス名 | クラス名は「.」が付く |
.article | コンテンツのクラス名 | ― |
.entry-content | コンテンツのクラス名 | ― |
.sidebar | サイドバーのクラス名 | ― |
自分でクラス名を作ることもできます。
クラス名 | どのように表示するか |
---|---|
.red | 赤い二重線 |
CSSエディッタで、style.css(スタイルシート)に追加します。
.red { border-bottom: 3px double red; }ブロックエディッタでクラス名「red」を指定
上記のクラス「.red」を指定したページ
上のh3は「red」を指定、下のh3は通常のh3。
様々なサイトでコピペして利用できる見出しのデザインがあるので、CSSエディッタにコピペして利用すると簡単です。その場合、クラス名を付けることを忘れずに。
現在のスタイル(上の画像)
.article h2 {
background: white;
border: none;
position: relative;
padding-left: 30px;
}
上のcssの意味
プロパティ | プロパティ値 |
---|---|
background(背景) | white(白) |
border(線) | none(なし) |
padding-left(左側の余白) | 30px |
.article h2
を変更します。
色や線の種類や余白を変更し確認することができます。
見出し(h2)の紫の丸い部分を変更します。
「.article h2:before」でH2の前の部分の指定をする(上の画像)
.article h2:before {
height: 1em;
border-radius: 50%;
width: 1em;
left: 0;
top: 1.15em;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
上のスタイルの説明
heightとwidth | 高さと幅 | 1em(文字と同じサイズ) |
border-radius | 線の周囲を丸くする | 50%丸くする(円になる) |
leftとtop | 左と上の位置 | 数字を変えると丸の位置が移動 |
background-image | 背景 | ― |
inear-gradient | グラデーション | 背景はグラデーション |
45deg | 方向・角度 | グラデーションの方向 |
#ff9a9e 0% | 色・割合 | %でグラデーションの割合が変わる |
.article h2:before {
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
この部分を変更します。
デフォルト | 変更 |
---|---|
#ff9a9e 0% | #ff9a9e 50% |
#fad0c4 99% | #fad0c4 50% |
#fad0c4 100% | #fad0c4 50% |
上の様に数字を変更すると、円のグラデーションが変わります。
CSSエディッタに記述後、公開します。何度でも書き換えは可能です。スタイルを変更することによって、不具合が起こる可能性があるので、事前のバックアップが必要です。