コピペで簡単!CSSではてなブログの見出しをカスタマイズ!

コピペで簡単!CSSではてなブログの見出しをカスタマイズ!のアイキャッチ画像

ブロガー必見記事

ブログでお小遣い稼ぎする方法大公開 – NO TITLE

今回はたくさんの見出しを作ってみました。コピペだけで、はてなブログの見出しがカスタマイズできます。デザインは選べる8種類!

CSSの勉強にもなると思うので、WEBデザイン勉強中の人も必見です。

ただし、使っているテーマによっては、うまくいかない可能性があります。ご了承ください。

コピペでできる見出しのカスタマイズ

見出しのサンプルとそのコードの一覧です。コードを下の場所(デザイン→カスタマイズ→デザインCSS)に張り付ければ、CSSが反映されます。テーマを読み込むコードが記述されていると思うので、その下にコピペしてください。

先にコードの見方だけ説明しておきます。

はてなの編集画面では、見出しのタグは以下のように設定されています。

大見出し ・・・ h3

中見出し ・・・ h4

小見出し ・・・ h5

中見出しの見出しを変えたいときはコード内の h3 → h4 に書き換えて下さい。小見出しを変更したい場合は h3 → h5 に書き換えて下さい。

見出しの背景、ライン、文字の色はご自身で好きな色に変更してください。

たとえば、

background-color: #111;

の下線部が背景色です。ここのカラーコードを書き換えると色が変わります。

同様に、

color: #111;

の下線部が文字の色です。

border: #111;

下線部がラインの色です。

下記のサイトからカラーコードが確認できます。コードをコピペして書き換えれば好きな色に変更できます。

www.color-sample.com

もし使っているテーマの見出しデザインと重なってしまったら、下のコードを先に記述して、その後に見出しのコードを追加してください。

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

見出しタイプ1

左にカラーのラインが入ったシンプルな見出しです。よく見かける見出しのデザインですね。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}

見出しタイプ2

左に太めのライン、下に細めのラインが入った見出し。こちらもよく見かける見出しのデザインですね。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

見出しタイプ3

上下にラインが入った見出し。

.entry-content h3 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #2d70a4;
border-bottom: 2px solid #2d70a4;
}

見出しタイプ4

見出しの下に2本のラインを重ねるデザイン。

.entry-content h3 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h3::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #3498db;
z-index: 2;
content: '';
}

見出しタイプ5

もみじさん(id:momijimom)からのリクエストでステッチ入りの見出しを作ってみました。ネイビーの背景色で、デニム生地風に。

.entry-content h3 {
position: relative;
padding: 6px 10px;
color: #fff;
background-color: #293b6a;
border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h3::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
top: 100%;
left: 0;
margin-top: -4px;
border-top: 1px dashed #fff;
}

見出しタイプ6

吹き出し風のデザイン。

.entry-content h3 {
position: relative;
color: #fff;
padding: 8px 12px;
background-color: #129b98;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #129b98;
content: '';
}

見出しタイプ7

二枚の四角の背景を重ねてみました。色の組み合わせが楽しめる見出しです。

.entry-content h3 {
position: relative;
color: #fff;
padding: 6px 10px;
z-index: 2;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 98%;
height: 100%;
content: '';
}
.entry-content h3::before{
top: 0px;
left: 0px;
z-index: -1;
background-color: #2a9ca2;
}
.entry-content h3::after{
top: 4px;
left: 4px;
z-index: -2;
background-color: #111;
}

見出しタイプ8

可愛い感じの見出し。たまに見かけるデザインですね。

.entry-content h3 {
position: relative;
padding: 6px 0 6px 34px;
color: #111;
border-bottom: 2px solid #ce0d55;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
background-color: #ce0d55;
content: '';
}
.entry-content h3::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h3::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}

スマホの見出し変更方法

スマホとPCのデザインを別にしている場合は、以下のようにデザインを設定してください。

スマホの見出しを変えたい場合は、デザイン→スマートフォン→記事上にコピペしてください。その場合、<style>タグを記述して、その中にコードをコピペしてください。

<style>

ここにコードをコピペしてください。

</style>

これでスマホの見出しも変更できます。

注:当ブログのコードで不具合が発生した場合の責任は負いかねますので、ご了承ください。カスタマイズは自己責任でお願いいたします。

このブログのデザインも飽きてきたのでそろそろ大幅な改修でもしようかな。

ブロガー必見のおすすめ記事はコレ!

ブログでお小遣い稼ぎする方法大公開

HTML、CSSを勉強してみたい方は、こちらの記事がオススメ。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

超初心者のためのHTML・CSS入門講座

他にもこんな記事書いてます。

コピペで簡単!はてなブログのシェアボタンをカスタマイズ | NO TITLE

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | NO TITLE

全くの未経験が独学でWEBデザイナーに転職するまで | NO TITLE

コメント

  1. hmic より:

    すごーい!!こんな私でも念願の吹き出しができました!!ありがとうございます( *´艸`)

  2. shiromatakumi より:

    べっぴょん (id:hmic)さん
    喜んでいただいて光栄です!たまにカスタマイズ記事書いてますので、良かったら読んでみて下さい\(^o^)/

  3. oclife より:

    前の見出しデザインと重なってしまい非常~に困っていたところ、こちらの「見出しのリセット」でようやく新しい見出しに直りました!!見出しのカスタマイズの記事は星の数ほどあったのですが、リセットのコードは初めて教えて頂きました。感謝です!!!

  4. shiromatakumi より:

    ミセスG (id:oclife)さん
    コメントありがとうございます。
    サブブログでテストした時に、テーマの見出しとかぶってしまったので、念のために無効化するコードも書いておきました。
    お役に立てて光栄です\(^o^)/

  5. simple-mile より:

    こんにちは、また教えて頂きたいのですが
    リセットを貼り付け、その下に見出し2をつけたのですが、全体の一つだけ色がブルーになり、他もブルーに反映させるにはどうしたら良いでしょうか?
    また、トップページの背景とメニューバーの色もブルーに統一したいです。
    お暇なときにでも教えて下さい。

  6. shiromatakumi より:

    ぶたぺん (id:simple-mile)さん、こんにちは。
    見出し2のコードにh3と書いているのが「大見出し」のことです。
    「中見出し」もカスタマイズするのでしたら、また見出しを選んでCSSに追加し、コード内の「h3」を「h4」に書き換えて下さい。
    ヘッダーメニューの背景色とラインの色変更するには、このコードをCSSに追加して「#111」の部分をお好きなカラーコードに変更して下さい。
    #global-menu {
    background-color: #111;
    border-bottom: 2px solid #111;
    }
    .global-menu-list li a {
    background-color: #111;
    }
    スマホのヘッダーメニューの背景色
    #mobile-head {
    background-color: #111;
    }
    サイドバーの枠線を変更
    .hatena-module-title {
    border: 2px solid #111;
    }
    .hatena-module-title:before{
    border-top-color: #111;
    }
    トップページとは??ページの背景全体をブルーにするということですか?

  7. simple-mile より:

    シロマティさん。私のような超初心者にもいつも対応していただき本当に有難う御座います。 書き換え早速やります。
    トップページとは? 
    シロマティさんの『NO TITLE』が黄色でその背景が黒ですよね 同じようにタイトルの色と背景を私も変えたく質問しました。わかりづらくてすいません。
    あと、私のcssには左側に『!』マークが3つあるのですがブログは普通に見れてるので特に気にしなくて良いですか?

  8. shiromatakumi より:

    ぶたぺん (id:simple-mile)さん
    CSSの中身をのぞいてみましたが、「!」の三つが見当たりませんでした…。多分大丈夫だと思います。
    タイトル周りは以下のCSSで変更できます。
    タイトルの背景色
    #blog-title {
    background-color: #カラーコード;
    }
    タイトルの文字色
    #title a {
    color: #カラーコード;
    }
    タイトル下の説明文
    #blog-description {
    color: #カラーコード;
    }

  9. simple-mile より:

    シロマティさん。返信有難う御座います。
    おかげでブログ書くのが楽しいです。
    今見たら「!」が4つに増えてますが超初心者なんで、気にしないことにします 笑
    タイトルもあとでやってみます。いつも有難う御座います。

  10. jeannief より:

    素敵な見出しをありがとうございました。
    タイプ8をコピペで頂戴しました。
    ようやく見出しらしくなりました!

  11. momorinn1118 より:

    初めまして。
    気になってはいたのですがやりかたがわからなくて諦めてましたが、この記事を見つけてチャレンジしてみようと思います!

  12. emikanzaki861 より:

    吹き出しタイプの見出しを探していたので助かりました。

  13. runtheworld より:

    最近ブログを始めたばかりですが、非常に分かり易くて参考になりました。
    見出しだ出たときには感動です!
    これからも色々と教えてください(^^)

  14. snow0303 より:

    使わせていただきます!ありがとうございます(^_^)

  15. snowcrystal_6 より:

    初めまして。
    ブログを始めた当初、右も左も全然わからない時にこの記事を見つけ本当に助かりました!ありがとうございます。
    昨日読者登録登録しました!←遅い
    この記事のリンクを自分の昨日の記事に貼らせてもらいました。

  16. mitsu2567 より:

    初めましてmitsuと申します
    見出しの装飾の仕方が分からなくて困っていたところ、検索でシロマティ様のブログにたどり着き、こちらの記事で公開されている見出しのCSSをコピーして使わせていただきました、本当にありがとうございました。

  17. fit4life より:

    スマホ版の見出しをカスタマイズしたく、この記事にたどり着きました。たいへん参考になりました。ありがとうございます。

  18. senaandchao より:

    とっても解りやすくて参考になりました!
    ありがとうございます。

  19. nantoka774 より:

    勝手に参考にさせていただきました。
    見出しも賑やかになり嬉しい限りです。
    ありがとうございます。

  20. とっきー より:

    はじめまして。
    最近自身のブログを立ち上げたものです。スマホの見出しがあっさりしすぎているなと
    思っていろいろ調べましたが、こちらの説明が大変わかりやすく、自分の思っている
    ような見出しをつけることができました。ありがとうございました。

コメントする

お気軽にコメントしてください!!

名前・メールの入力は任意です。