Comfort(コンフォート)タイトル周りのカスタマイズと、ヘッダー画像を設置する方法

ヘッダー画像はブログの印象に大きくかかわってくる所です。人によって使いたい画像は異なるはずですので、敢えてデフォルトでは画像を入れていません。

皆さんが自分のブログに合わせてヘッダー画像を表示できるように、詳しく説明していく予定です。

始めに

はてなブログでは、デフォルトでヘッダー画像を追加できるようになっています。はてな側が推奨しているワケですから、恐らくこの方法でした方が表示速度も速く、簡単に設置できるでしょう。

恐らく普通に貼り付けると、余計な空白や、微妙な大きさで画像が表示されてしまったりでかっこ悪いとおもいますので、少し手直しをしてやる必要があります。

まずは完成イメージから。

f:id:oyomiyo:20180526001258p:plain

f:id:oyomiyo:20180526001310p:plain

画像の周りに入る余白を消すことで、ヘッダ画像を全面に表示しています。

その方が精錬された印象になるでしょう。

ブログタイトルに関しては、私はタイトルのみの中央寄せという形を取っていますが、左寄せにしたり、説明文を表示したりすることももちろんできます。

ヘッダー画像を貼る

はてな側がデフォルトで用意してくださっている、ヘッダ画像のカスタマイズで行い少し手直します。

方法については知っている方がほとんどだと思いますが、一応貼り方の説明を載せておきます。

f:id:oyomiyo:20180528083457p:plain

ダッシュボード→デザイン→工具マーク→ヘッダ、と進み、画像を張り付ける形になります。

画像を貼るとおそらくこのような標示になるはずです。

f:id:oyomiyo:20180528103250p:plain

はい、あんまりかっこよくない....

ということで以下のコードを追加します。

 

CSS

<style type="text/css">

#blog-title-inner {
    background-size: cover !important; /*画像を全面に表示*/
    background-position: center 0px !important;
}
#blog-title {
    padding: 0; /*余白調節*/
}
.header-image-enable #title, .header-image-enable #blog-description {
    padding-left: 0; /*余白調節*/
    text-align: center; /*文字を中央寄せ(左寄せにしたい場合は削除する)*/
}
.header-image-enable #title a, .header-image-enable #blog-description {
    color: #fff !important; /*文字色*/
}
/*タイトルのみを表示する場合は以下のコメントアウトを外す
.header-image-enable #title {
    padding-top: 78px;
}
*/

</style>

追加する場所はヘッダ内のタイトル下です。

f:id:oyomiyo:20180528103450p:plain

既に別のコードが書かれている場合は、一番下の部分から少し改行して貼り付けてあげるといいでしょう。

そうすることで、

f:id:oyomiyo:20180527185318p:plain

このような表示になってくれます。

タイトルのみの場合

私のようにサブタイトルを表示せず、タイトルのみを表示する場合は、先程のコードのうち赤表示の部分を削除しておいて下さい。

CSS

<style type="text/css">

#blog-title-inner {
    background-size: cover !important; /*画像を全面に表示*/
    background-position: center 0px !important;
}
#blog-title {
    padding: 0; /*余白調節*/
}
.header-image-enable #title, .header-image-enable #blog-description {
    padding-left: 0; /*余白調節*/
    text-align: center; /*文字を中央寄せ(左寄せにしたい場合は削除する)*/
}
.header-image-enable #title a, .header-image-enable #blog-description {
    color: #fff !important; /*文字色*/
}
/*タイトルのみを表示する場合は以下のコメントアウトを外す
.header-image-enable #title {
    padding-top: 78px;
}
*/

</style>

タイトルのみの場合は、余白に若干のズレができてしまうためこのように設定するようにしています。

サブタイトルも表示する場合はそのままで問題ありません。

タイトルの位置を変える

Comfortでは、デフォルトの場合タイトルが左寄せで表示されるように設定されています。

個人的に、ヘッダー画像を表示する場合、タイトルを中央寄せするパターンが多いように感じているため、先程のコードを追加した時点で勝手にタイトルが中央寄せになるように設定しています。

「なんちゅう偏見や!戻せ!戻せ!」と言われるかもしれないので、タイトルを左寄せで表示する場合の方法も説明しておきます。

タイトルをデフォルトの左寄せに戻す場合は以下の赤表示の部分を削除してください。

CSS

<style type="text/css">

#blog-title-inner {
    background-size: cover !important; /*画像を全面に表示*/
    background-position: center 0px !important;
}
#blog-title {
    padding: 0; /*余白調節*/
}
.header-image-enable #title, .header-image-enable #blog-description {
    padding-left: 0; /*余白調節*/
    text-align: center; /*文字を中央寄せ(左寄せにしたい場合は削除する)*/
}
.header-image-enable #title a, .header-image-enable #blog-description {
    color: #fff !important; /*文字色*/
}
/*タイトルのみを表示する場合は以下のコメントアウトを外す
.header-image-enable #title {
    padding-top: 78px;
}
*/

</style>

タイトルとサブタイトルは連動しているため、タイトルを左寄せに戻すとサブタイトルも左寄せに戻ります。

タイトルの文字色を変更する

文字色の変更は以下の部分で行います。

CSS

<style type="text/css">

#blog-title-inner {
    background-size: cover !important; /*画像を全面に表示*/
    background-position: center 0px !important;
}
#blog-title {
    padding: 0; /*余白調節*/
}
.header-image-enable #title, .header-image-enable #blog-description {
    padding-left: 0; /*余白調節*/
    text-align: center; /*文字を中央寄せ(左寄せにしたい場合は削除する)*/
}
.header-image-enable #title a, .header-image-enable #blog-description {
    color: #fff !important; /*文字色*/
}
/*タイトルのみを表示する場合は以下のコメントアウトを外す
.header-image-enable #title {
    padding-top: 78px;
}
*/

</style>

この部分にカラーコードを追加して変更します。

注意点と解決策

最後に注意点です。実はこの方法で画像を設置するとき、画像のうちどの部分を切り取るかを決める機能がありますが、Comfortでは基準点を全て画像の一番上に設定しているためこの設定が利きません。(申し訳ない....)

始めに解決策を挙げておきますが、初めから使いたい部分が一番上に来るように画像自体をトリミングしてあげる必要があります。

~ 以下言い訳(汗)~

理由としてはいくつかありますが、そもそも画像を前面に表示する形を取っているためPC表示の場合とSP表示の場合で画像の横幅がかなり変わってきてしまうというのが前提にあります。

画像を設置した場合、PC表示見る横幅100%の画像と、SP表示で見る横幅100%の画像はおそらく印象が全く異なります。PC表示に合わせると、スマホで見た際に「画像ちっさ!!」と感じるはずです。

はてな側の設定では、縦幅が200px固定で横幅が可変になります。

そのため、基準点をあらかじめ決めておき、画面幅が狭くなるにつれて、画像の比率を維持したまま(かつ横幅100%のまま)小さくしていき、画像本来の縦横比になった時点で画像の横幅の表示域を90%、80%、と小さくしていけば、画像をゆがませることなく、常に画面幅前面に画像を表示することができます。

~言い訳おわり~

説明が分かりにくくて申し訳ありませんが、以上を踏まえたうえで結論としていえるのが、

  • 画像のうち使いたい部分が一番上に来るようあらかじめトリミングする必要がある。
  • あらかじめ横長の画像を準備すると見栄えがいい
  • 縦幅が大きい画像ほどSP表示で画像が小さくなる

ということです。

この表示をする以上仕方のないことではありますが、より自分好みにカスタマイズするためにも覚えておいてください。

最後に

はてなデフォルトのカスタマイズ方法をつかっているので、簡単にヘッダ画像を追加することができたと思います。

使う画像に関していえば、画面いっぱいに表示するため画質がいいものに越したことはないでしょう。

いずれにしても、ヘッダーはサイトの印象を左右する重要な部分ですから、画像は慎重に選びたいものです。