Someday Somewhere

A little something to say in my everyday life

ブログのヘッダーに画像を入れる

f:id:tsukisai:20200418035846j:plain

「JOURNAL.」をインストール後、必ず設定して下さい(テーマ作者による)という点が4つあり、その内の1つが「ブログタイトルの背景画像」。

デフォルトのままでもいいようですが、色のみを変えてもよし、或いは画像を入れてもよし。

ということで、画像を入れてみました。

背景画像を入れる

テーマ作者から提供されているコード
#blog-title { background-image: url(https://●画像URL●); }

上記コードに画像URLを入れ、デザインCSSに貼り付ければ完成。

画像URLの調べ方

いちいちここに書く必要もないかもしれませんが、念のため。
1)ブログの記事を書く画面を開き、「みたまま編集」で画像を投稿する時と同じように画像をアップロード。
2)記事は「下書きを更新する」をクリックして保存。(この記事は公開する必要なし)
3)画像をアップロード後、HTML編集画面を開き、<img src=で始まる箇所のhttps:~.jpgまでをコピーし、コード内の画像URLという箇所に貼り付ける。

画像の透明度(ぼかし)

実際に画像を入れてみると分かりますが、画像が少しぼやけた感じになります。

テーマ作者さんんも手引き内に「どんな画像を設定しても馴染むよう、ベージュ色のベールを写真の上にかけています」と書いています。

実際に幾つかの画像を試しに入れてみました。 画像によっては、きれいな色合いがぼけてくすんだ感じになってしまい、せっかく気に入っている画像なのに使えなかったり。 画像によってはぼかしがないほうがいいものもあるので、適した画像を選ぶ必要がありそうです。

透明度を変更

ぼかしがないほうがいいという場合は設定されている透明度を変えることもできます。

もともとの設定
#blog-title:before {
content: '';
background-color: rgba(247, 236, 232, 0.5);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#blog-title a {
/ color: #dfa08b;/
color: #222;
}

コード内にあるrgbaが透明度を設定する部分です。
rgbaに関する説明サイトはたくさんあるので、参考にしてみてください。

www.htmq.com

上記コードでは、ピンクマーカー部分の数値を変えることによりぼかし度を変えることができます。
例えば、0.5を0にするとぼかした感じはなくなり、画像がくっりきと表示されます。

こちらも、rgbaの数値を変更後、上記コードをデザインCSSに貼り付けます。

ちなみに、今回試しに入れた画像は0.3に設定してみました。
試しに使っている画像なので、また変える予定です。