ブログ

    はてなブログの記事タイトルのカスタマイズ

    はてなブログの記事タイトルのカスタマイズ

    はてなブログの記事のタイトルって、超シンプルですよね。

    シンプルと言えば聞こえがいいですが、ダサいというか・・・

    一番最初に読者の目に付く個所なので、重要ですよね。簡単にコピペでカスタマイズできるので、やっていきましょう。

    記事タイトルのカスタマイズ

    テーマにもよりますが、何もしていない記事タイトルはこんな感じですよね。

    はてなブログの記事タイトルのカスタマイズ

    ちょっと、これ変えましょう・・・。以下に紹介するカスタマイズは、全て「ダッシュボード」→「デザイン」→「カスタマイズ(レンチマーク)」→「デザインCSS」にコピペします。

    はてなブログ 記事タイトルのカスタマイズ場所

    また、色を変える時のコードはこちら原色大辞典で探せます。

    例1 こんな感じ↓のタイトルになります。はてなブログ 記事タイトルのカスタマイズ

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: 4px solid #ccc;
    }
    .entry-title::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    z-index: 2;
    content: '';
    width: 20%;
    height: 4px;
    background-color: #3498db;
    }

     

    7行目・border-bottom: 4px solid #ccc; このccc部分を変えると灰色の下線の色が変わります。

    最後のbackground-colorを変えると、青になっている部分の色が変わります。

    例2 下線2本のタイトル

    はてなブログ記事タイトルのカスタマイズ
    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: double 5px #FFC778;
    }

     

    例3 シンプルに左端に線を入れたもの

    はてなブログ 記事タイトルのカスタマイズ3
    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-left: solid 5px #55ACEE;
    }

     

    例4 上下に線を入れてみました

    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-top: solid 3px #000000;
    border-bottom: solid 3px #000000;
      }

     

    例5 下線のみのシンプルなもの

    はてなブログ 記事タイトルのカスタマイズ5
    .entry-title {
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: solid 3px #000000;
    }

     

    例6 タイトルの文字色を変えたもの

    はてなブログ 記事タイトルのカスタマイズ6
    .entry-title {
    color: #ff69b4;
    font-weight: bold;
    font-size: 25px;
    padding: 10px 10px;
    position: relative;
    padding-bottom: .5em;
    border-bottom: solid 3px #ff69b4;
    }

    文字の色を変える時は、colorの#以降の文字を変えたら色が変わります。

    最後に

    他にもいろいろなカスタマイズを紹介しているので、下記リンクを参考にどうぞ。

    はてなブログのカスタマイズまとめ

    はてなブログで画像読み込み遅延・Lazyloadのカスタマイズ

    はてなブログ・収益化のまとめ