つなろっく

イロトリドリな毎日

はてなブログの見出しをコピペでおしゃれにカスタマイズ

はてなブログの見出しをコピペでおしゃれにカスタマイズ

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

 はてなブログの見出しをカスタマイズしてみます。CSSをコピペするだけで簡単におしゃれに変身できますよ。さっそくやってみましょう。

見出しってなに?

↑これが見出しです。

編集画面で記事を書いているときには見出しデザインは反映されないので、分かりづらいかもしれませんが、コードを記述しておけばブラウザで見た時に反映されます。

記事の中でも目立つポイントにもなります。

サイトのイメージに合わせておしゃれにカスタマイズしてみませんか。

つなろっくおすすめの1曲を聴きながらどうぞ(*‘∀‘)

大人になったら

大人になったら

  • GLIM SPANKY
  • ロック
  • ¥250
  • provided courtesy of iTunes

見出しのCSSコードをコピペする

コピペOKの見出しCSSコードを紹介しているサイトがたくさんあるので、検索して気に入ったデザインをみつけてみてください。

今回、見出しのコードをこちらのサイトからコピペさせていただきました。

saruwakakun.com

 

シンプルなものからかわいいものまで、どれにしようか迷っちゃうほどに種類が豊富です。見出しだけでなく、サルワカさんのサイトはデザインもおしゃれで、とても参考になります。

手順はとても簡単です。

 

①使いたい見出しデザインを見つけたら「コードを表示」をクリックして、コードを開きます。

 

②コードをコピーします。

 

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

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

④そこに、コピーしたコードを貼り付けます。

 

⑤見出しに合わせてコードの「数字」を書き換えます。

サルワカさんのコードはすべて「h1」タグで書かれていますので、この数字を使いたい見出しタグの番号に変えてください。

見出し2のタグに使いたい時は「h1」→「h2」とか

見出し3のタグに使いたい時は「h1」→「h3」など。

 

⑥色を変更したいときは、カラーコードを書き換えます。

デザインによって変えるところが多少違いますが…

背景色を変えたいときは→「background」
文字色を変えたいときは→「color」

あたりを変えてみるといいかと思います。←けっこういい加減なので、必ずバックアップを取ってから自己責任で書き換えしてくださいね。大変なことになっても責任取れませんので(>_<)

 

⑦「変更を保存する」をクリックします。

サイトのプレビューで確認してみてください。

見出しカスタマイズのポイント

①デザインCSSにコードを貼り付ける

②使いたい見出しタグに数字を合わせること

③色コードを書き換えて色を変えることもできますよ

 

見出しタグをデザインするだけで、個性的でおしゃれなサイトに変身します。

 

はてなブログの方は、h2タグが行方不明になっていることもあるのでご注意ください。

pea-nut.hatenablog.com

うまく反映されない時は

CSSを貼り付けた時に、デザインが重なって表示されてしまうなど、うまく反映されない時は、元テンプレートの見出しデザインを無効化してみましょう。

やり方をこちらにまとめています。

pea-nut.hatenablog.com

 記事を紹介してくれたサイト

この記事が参考になったと言及してくださったサイトです。ありがとうございます。

はてなブログの見出しカスタマイズのメモ - kabkabsunshine’s blog

【ブログ】ブログ名の変更と見出しデザインの変更 - もうすぐアラフォー既婚会社員のベース弾きブログ