つなろっく

イロトリドリな毎日

はてなブログの見出しデザインが反映されない時は無効化しよう

f:id:pea-nut:20181125145231j:image

おすっ!つな(@tu_na_69)です(*´▽`*)

見出しのデザインをおしゃれに変更したいのに、うまくできないという方はこちらを参考にしてみてください。

見出しCSSが反映されない 

「つなちゃんのブログを参考して、見出しのデザインのCSSをコピペしたんだけど、うまく表示されないよ」

ブログサポートをしている友だちから、こんなヘルプがありました。

テンプレートによっては、テンプレートのデザインと追加したCSSのデザインが重なって表示される現象が起こってしまいます。

元のデザインがシンプルだと気づかないこともあるかもしれません。

デザインの重なりを防ぐために、CSSを追加する前に、元テンプレートの見出しデザインを無効化します。

見出しのデザインを無効化する

見出しデザインを無効化する手順をざっくりと説明しますね。

①ブログ記事の中から無効化したい見出しを選択し、右クリックで「検証」をクリックします。

②画面右側に選択した箇所の情報が表示されます。ここから、見出しCSSをコピーします。

③コピーした見出しCSSを少し書き換えて、無効化させたCSSを「デザインCSS」に貼り付けます。

②→③は、コピーしたCSSをそのまま「デザインCSS」に貼り付けし、ブラウザ上で書き換えを行っていますが、初心者の方には、コード書き換えの際には間違えを防ぐためにも、メモ帳やテキストエディターの利用をおすすめします。

 

では順番にやってみましょう。

①見出しを「検証」する

f:id:pea-nut:20181125132255p:plain

自分のブログの記事の中から、無効化したい見出し(元テンプレートのデザインのもの)を選択して、右クリックしてください。そこから「検証」をクリックします。

②「検証」から見出しCSSをコピーする

f:id:pea-nut:20181125133633p:plain

 

「検証」すると、画面右側にこのような情報が表示されます。

ここから、見出しCSSをまるごとコピーします。

つぎに貼り付けしますが、初心者の方にはメモ帳やテキストエディタでの作業をおすすめします。

③CSSを書き換える

ダッシュボードから「デザイン」→「カスタマイズ」をクリックします。

「デザインCSS」にコピーしたコードを貼り付けします。

コードから値の部分をnoneに書き換えていきます。

「:」と「;」のあいだですね。

.entry-content h2 {

    background: none;

    color: none;

    font-weight: none;

}

コードが長いので、短くして表示してみます。

こんな感じで、noneに書き換えます。

保存します。

ページを開いて確認してください。

元の見出しデザインが無効化され、シンプルな見出しになってのではないでしょうか。

見出しCSSをカスタマイズ

元デザインの見出しが無効化されたのを確認したら、変更したい見出しCSSを書き加えます。

先ほど書き換えたCSSの下に書き加えてください。

やりかたはこちらの記事にまとめています。

pea-nut.hatenablog.com