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

f:id:a-a-chan:20200212030720j:plain ※この記事は『はてなブログ』でブログ運営していた時の記事になります。
現在は『WordPress』へ移行しています。

こんにちは、

あーちゃんママ(@a_a_chanm0m)です。

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

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

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

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

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

憧れます!

www.okuni.me

saruwakakun.com

どう翻弄されたのか

初心者でHTMLや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点に注意してください。

【はてなブログ】見出しのカスタマイズ:まとめ

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

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

【はてなブログ】カスタマイズまとめ|ブログ初心者向け

1 COMMENT

a-a-chan

ふんわリッチ様(id:happykonkatsu)
はてブありがとうございます!
そう言っていただけて嬉しいです!!!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA