【初心者向け】見出しが反映されない時は初期化CSSをコピペしよう!

ブログ収益化
スポンサーリンク

ブログを書くときに迷うのは見出しのデザインですよね。

ネット検索をすると様々なコードがでてきて、それらをコピペするだけで簡単にオシャレな見出しを作ることができます。開発者の皆さんには感謝しかありません!

ところで、この見出しのコードをコピペした時に「なぜかうまく反映されない…」なんてことはありませんでしょうか?

特に何回もデザインを変えている内に上手く反映されないなんてこともあると思います。

この記事では見出しを変えたいけど上手くできないとお困りの方向けに解決方法をいくつかご紹介します。

この記事はWordpressテーマ「Cocoon」での編集画面を元に説明します。

スポンサーリンク

まずはCSS(スタイルシート)のバックアップ

もう御存じと思いますが、見出しの装飾を行うためにはCSS(スタイルシート)を編集する必要があります。

CSSはブログを装飾し見た目を整える役割がありますので、CSSの設定を間違えるとブログの見た目が大きく変わってしまいます。

元に戻せるようにCSSのバックアップを取っておきましょう。

バックアップはCSSコードが分かればいいため、私はパソコンに標準搭載されている「メモ帳」にコードをコピーしています。

CSSのコピー

1)外観テーマエディターをクリックします。

2)CSSのコードをコピーする。

  • テーマが「Cocoon Child」であることを確認。
  • CSSの一部をクリックしてCtrlAで全選択,CtrlCでコピー。

メモ帳に貼り付けて保存する

メモ帳を開いてペーストして保存しましょう。
 ※WindwsボタンWindowsアクセサリメモ帳
 ※CtrlVでペースト。

見出しを初期化するコードをコピペする

見出しを初期化するコードをコピーしてペーストしましょう。

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初心者は基礎から学ぶ姿勢が大切です。
とても分かりやすい教本がありますので是非手に取ってみてください。

コメント

タイトルとURLをコピーしました