MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログで「タイトル画像」を設定する時のテクニック

ブログカスタマイズ はてなブログ
f:id:waitingmoon:20151205162123j:plain

はてなブログの「タイトル画像」機能はオプションが少なく、せっかく設定しても意図した通りの表示にならないケースが少なくありません。今回はそんなタイトル画像機能の不満を解消するテクニックを数点掲載します。

タイトル画像機能を使う場合

設定したタイトル画像はどのように表示されている？

設定後の HTML

<body class="header-image-only">
    <header id="blog-title">
        <div id="blog-title-inner" style="background-image: url("画像のURL"); background-position: center -*px";>
            <div id="blog-title-content">
                <h1 id="title"><a href="ブログのURL">ブログタイトル</a></h1>
                <h2 id="blog-description">ブログの説明</h2>
            </div>
        </div>
    </header>
</body>

設定後の CSS

.header-image-only #blog-title {
    background: transparent;
}
.header-image-only #blog-title #title,
.header-image-only #blog-title #blog-description {
    background: transparent;
}
.header-image-only #blog-title #blog-title-inner {
    background-repeat: no-repeat;
    position: relative;
    height: 200px;
}
.header-image-only #blog-title #title a {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.header-image-only #blog-title #blog-description {
    visibility: hidden;
}

設定後の HTML、#blog-title-inner の background-image に設定したタイトル画像の URL が確認できます。つまり、設定したタイトル画像は #blog-title-inner の背景画像として表示されています。

リンク領域の確保は#title a の幅と高さを最大にして position: absolute で #blog-title-inner に重ねることで実現しているようです。

左寄せにする

f:id:waitingmoon:20151205162703p:plain
.header-image-only #blog-title #blog-title-inner {
    background-position: left -*px !important;
}

タイトル画像を左寄せにしたいときは background-position を center *px から left *px に変更します。!important 指定が必要です。

* の値はタイトル画像を設定する際に選択したタイトル画像として表示する領域（選択範囲）の上端と画像の上端の距離（オフセット値）になります。値はブログのソースを参照してください。

高さを変える

f:id:waitingmoon:20151205162817j:plain
.header-image-only #blog-title #blog-title-inner {
    height: 120px; /* Image height */
}

タイトル画像を設定すると、画像のサイズに関係なく #blog-title-inner の高さが 200px に変更されてしまうため、例えば画像の高さが 120px なら 80px の不要な余白が発生してしまいます。これを回避するには、#blog-title-inner に設定した画像の高さを指定します。

タイトル画像機能を使わない場合

手間は増えますが、タイトル画像機能では実現できないデザインを実現できます。

タイトル画像＋概要

f:id:waitingmoon:20151205164120j:plain
#title a {
    display: inline-block;
    background-image: url("画像のURL");
    background-repeat: no-repeat;
    height: * px; /* Image height */
    width: * px; /* Image width */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

「画像のみ」オプションを選択すると概要が消えてしまいますが、表示を残したい人も少なくないと思います。

text-indent: 100%、white-space: nowrap、overflow: hidden はタイトルのテキストを消す指定です。

タイトル画像＋タイトルテキスト＋概要

f:id:waitingmoon:20151205164207j:plain
#title a::before {
    background-image: url("画像のURL");
    background-size: cover;
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: * px; /* Image height */
    width: * px /* Image width */
    margin-right: 15px;
}

擬似要素を使ってタイトルの前に画像を表示するテクニックです。ワンポイントロゴなんかを入れると良いかも。

jQuery で 文字列を img に置換する

$(function() {
    $('#title a').empty().append('<img src="画像のURL" />');
});

#title a に記述されたブログタイトルを jQuery を使って img のタイトル画像に置換するテクニックです。

このテクニックは背景画像としてタイトル画像を表示した場合に発生しうるスマートフォン・タブレット閲覧時にタイトル画像の両端が切れるという問題を解決しますが、本来表示されるはずのテキストが HTML から完全に消えてしまうため、 SEO に影響があるかもしれません。

まとめ

以上でテクニックの紹介は終わりです。jQuery を用いる方法は SEO に影響があると書きましたが、タイトル画像機能のように背景画像で表示する場合と比べて良い影響があるか悪い影響があるかは分かりません。質問や間違いがあればコメントに書き込みをお願いします。