はてなブログのタイトルヘッダー画像を最大設定する

更新日：2023年6月12日

概要

はてなブログのタイトルヘッダー画像を最大化したい。

ということで前回【ChatGPT + Stable Diffusion】で画像を生成しましたので、今回それを設定していきたいと思います。

前回の記事

ai-wonderland.com

手順

１．画像を用意する

はてなブログのヘッダーサイズは横長で最大化しようとするなら

［横：1000px　×　縦：200px］がよいようです。

このサイズで画像生成するか、画像加工ツールで切り取るかして用意します。

「Canva」というサイトでオリジナリティがあるデザインヘッダーの作成ができるようです。

https://www.canva.com/

参考にさせていただいたブログ

www.j-lifestyle.work

２．ブログヘッダに画像設定

自分のブログの

管理画面→デザイン→カスタマイズ→ヘッダ

私の場合はこれだけでOKでした。

使用テーマ：【Brooklyn】

使用しているデザインテーマによってはCSSで設定変更が必要かもしれません。

３．CSSでブログタイトル位置とフォント調整

デザインCSSで調整できるようですが

CSSど素人のためうまく反映できなくて難しかったです。

調べると書き方がいろいろあり、とりあえず下記に落ち着きました。

「!important」を追加すると上位命令になるのかな。。

というレベルです笑

Copy

#title,#title a {
    text-align: center;/* 中央寄せ */
    font-family: "Nico Moji" !important;
    font-size: 60px;
    color: #ff6c94 !important;/* タイトル名の文字の色 */
    margin: 0;
    padding-top: 120px;/* タイトル名の上からの位置 */
}
#blog-description {
    text-align: center;
    color: #eaf6fd !important;/* 説明文の文字色 */
    font-size: 18px;
}

フォントは【Googleフォント】の「Nico Moji」を使ってみました。

googlefonts.github.io

ヘッダ→ブログタイトル下に書きを追加すればOK

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">

とりあえずできました。

以上、はてなブログのタイトルヘッダー画像を最大設定する　でした。

ではまた。