KOALAのタイトル周り(背景画像の設置含む)のカスタマイズを一気に紹介する

KOALAにヘッダー画像の設置方法や、タイトルの文字の大きさ、余白などのカスタマイズ方法をまとめます。

始めにヘッダー周りのカスタマイズで使う共通のコードを載せておきます。これ一つでタイトルの文字関係からヘッダー画像まですべてカスタマイズできます。

CSS

<style type="text/css">
#title {
    font-size: 1.5rem; /*タイトルの文字サイズ*/ }
#title a {
    color: #454545; /*タイトルの文字色*/ }
#blog-title {
    background-image: url(画像のURL); /*ヘッダー画像*/
    background-size: 100%;
    padding: 2em 0; /*ヘッダー内余白*/ }
#blog-description {
    font-weight: normal; /*説明文の文字の太さ*/
    font-size: .8rem; /*説明文の文字サイズ*/
    margin: 1em 0 0; /*タイトルとの間隔*/ }
h2#blog-description {
    color: #333; /*説明文の文字色*/ }
</style>

ごちゃごちゃしてますが、今から詳しく解説していくので大丈夫です。

挿入する場所は、デザイン→工具マークと進んで、タイトル下の部分に入れるのが良いと思います。

f:id:oyomiyo:20180801120151p:plain

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

ヘッダー画像の設置方法

はてなのデフォルト機能でヘッダー画像を追加できますが、何かと使い勝手が悪いためこちらの方法で設置してください。

前テーマのComfortではデフォルト機能を使えるようにしていましたが、表示されるまでにタイムラグがあること(理由は不明)と、多少なりともカスタマイズが必要になることがネックだったので今回はこの方法でやらせていただきます。

CSS

<style type="text/css">
#title {
    font-size: 1.5rem; /*タイトルの文字サイズ*/ }
#title a {
    color: #454545; /*タイトルの文字色*/ }
#blog-title {
    background-image: url(画像のURL); /*ヘッダー画像*/
    background-size: 100%;
    padding: 2em 0; /*ヘッダー内余白*/ }
#blog-description {
    font-weight: normal; /*説明文の文字の太さ*/
    font-size: .8rem; /*説明文の文字サイズ*/
    margin: 1em 0 0; /*タイトルとの間隔*/ }
h2#blog-description {
    color: #333; /*説明文の文字色*/ }
</style>

先程も載せた共通コードのうち、赤表示の部分にURLを貼ってカスタマイズするので、始めに使いたい画像のURLを取得する必要があります。

方法は簡単で、記事なりなんなりに使いたい画像を貼り付けて、右クリックで「画像のアドレスをコピー」します。

それを先程のコードの赤表示の部分にコピペします。

私の場合だとこのようになりました。

CSS

<style type="text/css">
#title {
    font-size: 1.5rem; /*タイトルの文字サイズ*/ }
#title a {
    color: #454545; /*タイトルの文字色*/ }
#blog-title {
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180720/20180720165643.png); /*ヘッダー画像*/
    background-size: 100%;
    padding: 2em 0; /*ヘッダー内余白*/ }
#blog-description {
    font-weight: normal; /*説明文の文字の太さ*/
    font-size: .8rem; /*説明文の文字サイズ*/
    margin: 1em 0 0; /*タイトルとの間隔*/ }
h2#blog-description {
    color: #333; /*説明文の文字色*/ }
</style>

これだけでタイトルの背景に画像が表示されるようになるはずです。

文字関係のカスタマイズ

コメントアウトで残しているのでいちいち説明しなくてもいいかもしれません。

CSS

<style type="text/css">
#title {
    font-size: 1.5rem; /*タイトルの文字サイズ*/ }
#title a {
    color: #454545; /*タイトルの文字色*/ }
#blog-title {
    background-image: url(画像のURL); /*ヘッダー画像*/
    background-size: 100%;
    padding: 2em 0; /*ヘッダー内余白*/ }
#blog-description {
    font-weight: normal; /*説明文の文字の太さ*/
    font-size: .8rem; /*説明文の文字サイズ*/
    margin: 1em 0 0; /*タイトルとの間隔*/ }
h2#blog-description {
    color: #333; /*説明文の文字色*/ }
</style>

ここで文字サイズ、文字色、文字の太さ(説明文のみ)のカスタマイズができます。

文字サイズはrem指定をしていますがemでもpxでも構いません。

またブログ説明文の部分は文字サイズをnormalで指定していますが、boldくらいでも自然だと思います。

いずれにしてもみなさんの好きなようにカスタマイズしてください。

余白の設定

余白の設定は以下の場所で行います。

CSS

<style type="text/css">
#title {
    font-size: 1.5rem; /*タイトルの文字サイズ*/ }
#title a {
    color: #454545; /*タイトルの文字色*/ }
#blog-title {
    background-image: url(画像のURL); /*ヘッダー画像*/
    background-size: 100%;
    padding: 2em 0; /*ヘッダー内余白*/ }
#blog-description {
    font-weight: normal; /*説明文の文字の太さ*/
    font-size: .8rem; /*説明文の文字サイズ*/
    margin: 1em 0 0; /*タイトルとの間隔*/ }
h2#blog-description {
    color: #333; /*説明文の文字色*/ }
</style>

ちなみに、ヘッダー内余白とは、

f:id:oyomiyo:20180801133744p:plain

矢印の部分の余白にあたります。デフォルトでは2emになっているため、タイトル上部に2em、下に2emと振り分けられています。

一方タイトルとの間隔の部分は、

f:id:oyomiyo:20180801134206p:plain

ここにあたります。

必要であれば追加していきます。ではまた。