マホトラのブログ

日々の生活や面白そうなことに注目してみるブログです!

はてなブログの見出しカスタム CSSにコピペしても反映されないワナ



インターネット初心者なので、難しいことが分らない。でも頑張ってブログの見栄えを良くしたいと思っています。いろんなブログを見るとみんなオシャレで羨ましい!とにかくブログの見出しくらいはカッコつけるため、調べてカスタムすることにしました。

 

よく見つけたのはコピペしてCSSに貼り付けるだけっと書いてあるのですが、何度やっても反映されない。いろいろ調べても超初心者なので書いてあることが分らない。いろんなサイトに超初心者向けと書いてあるけど、全然難しくて意味が分らないです。

 

 

 見出しカスタムを反映させる方法

CSSにコピペして反映させる方法を説明します。真の超初心者の自分が5時間もかけて、テキトーにいろいろ試した結果を偶然たどり着いた方法です。たぶん分かる人には『何言ってるの?(笑』って感じかもしれませんが、超初心者の自分は大真面目です。

 

反映させるには【デザイン】→【カスタマイズ】→【{ }デザインCSS】で

/* </system> */ と /* <system section="background" selected="pixel-01"> */の間に張り付けないと反映されません。

 

わかりやすく図1より説明しますと

↓↓

f:id:safet_driver_maybe:20171111153045p:plain

   図1:CSSの中に挿入した部分について

 

上記のCSSですが、で囲ったところが見出しをカスタムするため貼り付けたやつです。

 

1行目~3行目

/* <system section="theme" selected="11696248318756530652"> */
@import "http://hatenablog.com/theme/11696248318756530652.css";
/* </system> */

 

ここに張り付ける

 

12行目~14行目

/* <system section="background" selected="pixel-01"> */
body{ background-image: url('/images/theme/backgrounds/2014/pixel-01.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; background-size: 188px 178px; } @media (-webkit-min-device-pixel-ratio: 2) { body {background-image: url('/images/theme/backgrounds/2014/pixel-01@2x.png');} }
/* </system> */

 

 貼り付ける場所を間違えると反映されない

はてなブログを始めたときに既存の始めから使えるデザインで、とりあえずブログの見栄えを良くする人が多いかと思います。その選択したデザインが1~3行目と12~14行目で表わされているようです。(よくわからないけど、、、)

 

自分の勝手なイメージですが、見出しの変更はその選択したデザインの中で更にカスタムする?って感じなのかもしれません。

 

だから

/* </system> */

 

/* <system section="background" selected="pixel-01"> */

の間に張り付けないと反映されないのかもしれません。

 

ちなみに見出しをカスタムした結果は以下のようになりました。

 

f:id:safet_driver_maybe:20171111155450p:plain

   図2:カスタムした見出し

 

 注意事項について

ここまでブログを読んでいただき大変ありがとうございます。

超初心者の独断と偏見でCSSカスタムについて説明させていただきましたが、いかんせん初心者ですので微妙な間違い等はご了承ください。ただネットで原因を探しても理由がわからなかったため、自分と同じように反映させる方法に悩み苦しんだ方達へ少しでも手助けになればと思って作成しました。

 

ネットにいろいろ書いたあったように、CSSの優先順位とか全角で入力されている等、反映されない原因は様々だと思います。なので100%解決できるというものではございません。

 

特に図1の1~3行目と12~14行目は人によってだいぶ違うと思われます。

なので、このブログを参考にしていただき、反映されない場合はコピペする場所等を自身で考えていただく必要性があるかもしれません。

できる限りわかりやすく書いたつもりですが、わからなかったら申し訳ありません。