当サイトおすすめ洋画ベストはこちらをクリック

原因はキャッシュ:見出しレイアウトCSSを変更したけど反映されない時の対処法

こんにちはヒカル(@Hikaru_55crypto)です。

先日、有料テーマ『SANGO』を導入し、いろいろと修正しなければいけない点や

変更したいことが多すぎて、今週一週間バタバタしていました(笑)

今回は、その中の一つ、『見出しレイアウト』を変更した際に起きたトラブルの

解消内容を上げとこうと思います。

結論としては、『Googleキャッシュを消去してリロードさせる』というもの。

見出しレイアウトはスタイルシートにCSSコードを書き込むだけで簡単に出来るよ☆

見出しレイアウトを変更する

見出しとは、記事のかたまりの頭のタイトル的なもので

『h2』とか『h3』とかありますよね。

はてなブログやワードプレスブログを利用している人はご存知だと思います。

今まで使っていた無料テーマ『Simplicity2』の見出しレイアウトが

『SANGO』に変更後、使用できなくなってしまったのがきっかけです。

『SANGO』は初期段階ではこの見出しのレイアウトがほとんど無地だったんです。

理由は以下、

「見出し2」と「見出し4」については、もはや文字だけです。これだけシンプルにしている理由は、後から自由にカスタマイズしやすいようにするためです(カスタマイズは上書きしていく形で行うことが多いので、シンプルな方がやりやすいのです)。

サルワカ SANGOでデフォルトの見出しを変える方法 より引用”

「なるほど。理解納得」と、いうことで変更に至ったわけです。

とはいえ、当ブログのデザイン的には、さほど大きな変更はいらないなとも思いましたが、

さすがに文字が大きいか小さいかだけの区別だとちょっと

見た目が面白くないのでちょっぴりとだけね。

 

因みに、見出しレイアウトはテーマ編集から

コードを書き込むことで変更できます。

  1. ワードプレスダッシュボード
  2. 【外観】→【テーマの編集】
  3. 【右部テーマファイル】→【スタイルシート】

コード編集は基本親テーマにではなく子テーマのスタイルシートに!

もしものためにバックアップを取っておくこと!

試しにプレビューしてみたら、変更が反映されていない

さて、ここまでは簡単な作業だったのですが、

まさかの、プレビューで確認してみると反映されていない事態。

なーぜーだー!わざわざバックアップまで取って、スタイルシートという

素人には触りずらい場所までいじったのに!!

何かマズかったのか?!

焦りを抑えながらも、とりあえず必殺Google検索

 

ありましたよ~メチャメチャ簡単な内容だった(笑)

”Googleキャッシュを消去して、リロードさせなさい”

おぉ、そんなことだったのか(笑)

なるほど、して、どのように?

Googleキャッシュを消去してリロードさせる方法

要するに、シートに書き込んだ更新事項がキャッシュのせいで反映されていない状態にある

ということで、コード自体が間違っていたわけではなかったので一安心。

で、手順としては

1.スタイルシートにコードを書き込んで

2.ファイル更新ボタンを押したら

3.ブラウザ上どこでもいいから『デベロッパーツール』を開く

Windowsの場合は、「F12」ボタンをポチるだけで下か横にデベロッパーツールが出ます。

Macの方は、右クリックの「検証」から開けます。

※出てきたデベロッパーツールには何もしません。表示させとくだけ

4.開いたら、その状態でアドレスバーの左にある更新マークを右クリック

5.『キャッシュの消去とハード再読み込み』をクリック

 

以上が、手順です。

すると、無事プレビュー画面で反映されました☆

 

因みに、投稿編集画面上ではこのレイアウトは

変更されないみたいです。

変更を確認するには

プレビュー画面で見てみてください。

まとめ:見出しレイアウト変更してみて

この、キャッシュ消去とハード再読み込みは

見出しレイアウト変更以外にも、何かしら

スタイルシートにCSSコード書き込みを行った後は

行った方がいいのかもしれません。

 

ブログをより良いものにする・個性を出すためにカスタマイズする為には

HTMLとかCSSの知識も必要になってくのだと学びました。

英語ばかりでチンプンカンプンですが、無事目標達成できた時の

達成感は楽しいから頑張って覚えよう( *´艸`)