Simplicity2の見出しカスタマイズ|CSSが反応しない!



スポンサーリンク

どうもこんにちは。昭和のアナログ人間・KUMAKOです。

 

ワードプレスでブログ運営を始めたはいいけど、本当に亀の歩み。きっと人が3秒でできることも、1日かかっていそうな不器用さ。

 

自分のためにも、追随するCSSとかHTMLとかが「ファーーーー!?」な誰かのためにも、ワードプレスで悪戦苦闘した記録を残していこうと思った今日この頃です。今回は、ワードプレスの記事の中の見出しのカスタマイズと、せっかく「style.css」にCSSをコピペしたのに反映されない時の1つの解決策について記事にしました!

 

ワードプレスの記事の見出しをカスタマイズ

記事の中で「見出し」は非常に大切な役割を果たしていますよね。読み手のためにもSEOのためにも、適切な見出しを付けるようにしましょう!そして、自分好みの「見出し」を作ることで、自分のサイトに愛着も沸くので意外と重要です。

 

見出しのデザインを考えよう

まずは、どのような見出しにするかを決めます。

    

見出しはH1からH6のタグで表示されます。私は、H2に吹き出し、H3に左線の見出しになるようCSSを設定しました。Simplicity2では、タイトルにH1を利用しているので、H2とH3だけカスタマイズすれば十分だと思います。

 

検索してCSSコードをゲット!

 

見出しが決まったらCSSの作成をしましょう。参考サイトからCSSをコピペです。えぇ、自分でコード書くなんてできませんから、コピペ万歳でございます。

 

私がお世話になったのは、こちら『CSS見出しジェネレーター』様。

自分の理想の見出しの形や大きさを、選択してチェックするだけ。1番下の「ジェネレート」ボタンを押せば、CSSが生成できちゃうのです。素晴らしい世の中に万歳。

 

文字の大きさですが、私の場合、H2は「16pt」、H3は「14pt」にしています。Simplicity2の記事本文は「16px」(pxptで単位が違うけど「16px」は約「12pt」です)がデフォルトになっていたと思うので、全体の文章のバランスを考えて決めてくださいね。

見出しジェネレーターでコードをコピーしたら、「.sample2」を「.article h2」に書き換えます。「h2」だけだとサイドメニューもカスタマイズされちゃうので注意です。

 

スタイルシートにコードを貼り付け

 

CSSのコードをゲットしたところで、「スタイルシート」にコードを張り付けましょう。「スタイルシート」の場所は、管理画面の「外観>>テーマの編集」をクリックしたところにあります。子テーマの方のスタイルシートであることを確認してくださいね。

 

 

 

スタイルシートの中を見るとツラツラ何か書いてありますが、それらは無視して、1番下にペタとコードを貼り付けます。これで、見出しのカスタマイズは終了です。

 

CSSコードが反映されないよ!?

CSSコードを一生懸命コピペしたのに、反映されていないことはありませんか!?(一生懸命コピペって矛盾した言葉のようにも聞こえるが・・・)反映されない原因は色々あるみたいで、私は難しいことはよく分かりません!

ただ、私も反映されなくて困っていた時に、履歴の消去をしたらあっさり反映されたので、ここに書き残しておこうと思います。

 

履歴の消去とは?

インターネットを利用していると、自分が見たウェブサイトの履歴などがパソコンに記録されていきます。これらが悪さをして、ワードプレスのCSSが反映されない状況を引き起こすというのです。

という訳で、CSSが反映されない時は、お使いのブラウザから履歴の消去を試してみましょう。IEchromeの履歴消去の方法は下記の通りです。他のブラウザを利用している方は検索すれば、やり方すぐに出てきますよ!←他人まかせ

 

IEの履歴消去

IEのブラウザを開いて、右上にあるドーナツマークにカーソルを当て、「インターネットオプション」を開きます。

 

「全般」の中にある「閲覧の履歴」を見つけたら、削除ボタンを押します。

 

1番上の「お気に入りwebサイトデーターを保持する」のチェックを外して、削除ボタンを押します。(消しちゃいけない履歴がないことは確認してね)

 

これで、履歴の削除が完了です。

 

chromeの履歴消去

chromeの履歴消去方法も説明しますね。右上のメニューボタンにカーソルを当てて、「設定」を開きます。

 

設定画面が開かれたら、1番下にカーソルを持っていき、「詳細設定」を押します。「プライバシーとセキュリティ―」の項目の中に、「閲覧履歴データを消去する」と書かれているものがあるので、クリックします。

 

消去の期間や項目をチェックして、データ消去のボタンを押せば完了です。

私は、この作業をしたら、全然反映しなかったCSSが反映されて「うぉぉぉぉーーーー!」と声を上げました(笑)

 

まとめ

いやはや、ワードプレスとの格闘はまだまだ続いております。相変わらず分からないことだらけで、調べながらカスタマイズなど頑張っています!また、習得した情報を超初心者目線でどんどん共有していきますので、私と同レベルの人は乞うご期待を(笑)

 

この1か月後くらいにワードプレスのテーマをsimplicity2からストークに変更しました。ストークにしたらワードプレスと格闘する必要がなくなり、めっきり快適になってしまいました(汗)

ワードプレスのテーマをsimplicityからSTORK(ストーク)に変更しました!

2017.12.27

スポンサーリンク


スポンサーリンク

シェアしてくれたら嬉しいです!