ゆるかんママブログ

1児の看護師ママが妊娠・子育て・日々の事・看護関係についてゆるーくブログをお届け!

【はてなブログ】見出しのカスタマイズ|コピペOK|ブログ初心者向けカスタマイズ|Haruni

f:id:a-a-chan:20200212030720j:plain 

 

f:id:a-a-chan:20200228172500p:plain
あーちゃんママ

どうも、あーちゃんママです。

 

ブログを始めて5ヶ月目に突入し、記事数や収益なんて全然ですが(←記事数おい)そろそろカスタマイズに挑戦しようかなと思い、 初心者なりに色々チャレンジをしています。

 

中でも『見出し』のカスタマイズにかなり翻弄されたので、その事を書きました。

   

 

スポンサーリンク

 

 

お世話になったサイトの紹介

2つのサイトにお世話になりました。

とっても分かりやすいし、何よりこの2つのサイトともおしゃれ…!

憧れます!

 

www.okuni.me

 

saruwakakun.com

 

どう翻弄されたのか

初心者でHTMLやCSSなどが分かっていない私。

そんな私にとっての救世主、

それは『コピペ』

 

「コピペするだけで見出しデザインが変更できるなんて結構楽じゃん!」

と思っていました。

それが甘かった。

  

コピペしたけどデザイン変更が反映されない

さっそく、良いと思った見出しのCSSを自身のブログへコピペ。

 

…。

……。

………。

 

あれ?何回やっても見出しが反映されないぞ?(ーー;)

どうしてだ?

リサーチ開始!

 

デザインが反映されない原因

(※ここからは「言ってる事違うよ」という点もあるかとは思いますが、素人発言なのであしからず…(^^;; )

 

リサーチ能力の低い私が原因についてをリサーチした結果

 

はじめに設定したデザインテーマのCSSを変更しないと、自分の望むデザインには出来ないという事が判明。

 

つまり、

既存のテーマのCSSが、変更したいCSSの邪魔をしている

という事だそう。

 

(ちなみに私のデザインテーマは『Haruni』)

 

「なーんだ、なるほどね。原因分かったならすぐ解決出来るかも」

 

はい、2回目の甘くみてるやつ。

 

全く簡単ではありませんでした。

 

スポンサーリンク

 

解決策①(初心者には難しいver.)

両手を額に当て悩んでいる女性

手順(とっても簡単に書きます)

  1. インストールしたテーマのCSSを確認する
  2. そのCSSをメモ帳などのテキストエディタにコピーしておく
  3. そのCSSを自身のデザインCSSにもコピー
  4. 変更したい部分を探し、変更

というような手順。

さっそくやってみる私。

 

…。

……。

………。

 

え、ちょ、何これ、、、

テーマのデザインCSSの量が半端ねぇ。

 

デザインCSSの行(?)が300くらいから一気に3000程度に。

 

膨大な情報量の中から何とか見出しのCSSを見つけ、自分なりに変更。

 

あーちゃんママ

変更できたけど元のテーマのデザインと混ざってしまった…_| ̄|○

 

つまり、この方法は初心者には難し過ぎた。

   

解決策②(初心者でもいけるver.)

手順

  1. 既存のテーマのCSSをリセットするCSSを自身のサイトにコピペ
  2. リセットするCSSの後に変更したい見出しデザインのCSSをコピペ

解決策①より簡単です!

 

ではやり方の詳細。

はじめに紹介したサイト様。

www.okuni.me

 

こちらのサイト様↑で『既存のテーマのCSSをリセットする方法』が書いてあるので、それを実行。

 

 

そしてこちら↓のサイト様から気に入った見出しデザインのCSSをコピペ。

saruwakakun.com

 

以上です!

 

注意したい事

オークニ様のサイトにも記載されているのですが

POINT

変えたい見出しに合わせてh3、h4、h5の変更をする事

 

はてなブログの場合は見出しの前に『.entry-content』とつけて『.entry-content h3』とする事

 

変更する見出しデザインにも.entry-content』をつける

 

以上の3点に注意してください。

 

まとめ

そんなこんなで無事見出しデザインを変更する事が出来ました!

 

しっかり調べれば自分に合ったカスタマイズの方法があり、今回の様に混乱せずに済んだと思うので、今後はしっかりリサーチをしようと思います。

 

スポンサーリンク

 

www.yurukanmama.com

www.yurukanmama.com

www.yurukanmama.com