!
ブログを書くときに迷うのは見出しのデザインですよね。
ネット検索をすると様々なコードがでてきて、それらをコピペするだけで簡単にオシャレな見出しを作ることができます。開発者の皆さんには感謝しかありません!
ところで、この見出しのコードをコピペした時に「なぜかうまく反映されない…」なんてことはありませんでしょうか?
特に何回もデザインを変えている内に上手く反映されないなんてこともあると思います。
この記事では見出しを変えたいけど上手くできないとお困りの方向けに解決方法をいくつかご紹介します。
まずはCSS(スタイルシート)のバックアップ
もう御存じと思いますが、見出しの装飾を行うためにはCSS(スタイルシート)を編集する必要があります。
CSSはブログを装飾し見た目を整える役割がありますので、CSSの設定を間違えるとブログの見た目が大きく変わってしまいます。
元に戻せるようにCSSのバックアップを取っておきましょう。
バックアップはCSSコードが分かればいいため、私はパソコンに標準搭載されている「メモ帳」にコードをコピーしています。
CSSのコピー
1)外観>テーマエディターをクリックします。

2)CSSのコードをコピーする。
- テーマが「Cocoon Child」であることを確認。
- CSSの一部をクリックしてCtrl+Aで全選択,Ctrl+Cでコピー。

メモ帳に貼り付けて保存する
メモ帳を開いてペーストして保存しましょう。
※Windwsボタン>Windowsアクセサリ>メモ帳
※Ctrl+Vでペースト。

見出しを初期化するコードをコピペする
見出しを初期化するコードをコピーしてペーストしましょう。
CSSコード
見出しを初期化するコードは以下です。
//*見出しの初期化*//
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
CSSを貼り付ける場所
コピーしたコードは/*ここにコードを書く*/の部分にペーストしましょう。
※要するにCSSの一番最初です。
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/*ここにコードを書く*/
【注意点】
- メディアクエリ(/*~px以下*/)の中に書き込むとその画面サイズだけに反映されます。
- CSSの後半にペーストすると最後に読み込まれてしまいますので設定した見出しのコードが初期化されます。必ず初期化コードの後に見出しのコードを書くことを意識しましょう。
見出しが初期化されたか確認する
CSSコードを編集した後は必ずコードが反映されたか確認しましょう。
参考図書
WordPress初心者は基礎から学ぶ姿勢が大切です。
とても分かりやすい教本がありますので是非手に取ってみてください。
コメント