はるなぴログ

WEBサイト作成技術研究

はてなブログにヘッダー画像を設定する方法(余白、はみ出し対応)

はてなブログにヘッダー画像を設置しようとしたら思った以上に苦労したので備忘録として書いておきます。

何に苦労したかというとヘッダー画像のサイズが合わなかったこと。余白が変になったりパンくずリストから下にヘッダー画像がはみ出してしまったりと散々でした。

自分がいろいろと失敗した体験からヘッダー画像をどう設置したら良いか分かりましたので記事にしてみました。

f:id:hal7pi:20180701200133j:plain

ヘッダー画像を設置していないとカスタマイズしたとみなされないような雰囲気ってあるみたいですね。はるなぴはヘッダー画像は個人ブロガーには必ずしも必要ないんではないかと思う時もあります。

ヘッダー画像があると表示が重たくなりますし、現にこうやって表示が崩れたりなんだりとブログの内容と関係ないところで苦労しなくてはなりませんからね。

でも不満ばかりも言っていられません。頑張りましょう!

ヘッダ画像指定での苦労話

f:id:hal7pi:20180630064301j:plain

はてなブログお勧めのヘッダ画像サイズが1000px×200pxということでちゃんとサイズの合った画像を用意しました。

そして設定してみたところ、アレ?サイズが合ってない。横に画像が繰り返し表示されて折り返っています。

f:id:hal7pi:20180701200431p:plain

更に縦もはみだしてしまっています。

f:id:hal7pi:20180701200441p:plain

これはダメ、何か変ということで大分苦労しましたよ。

背景画像をCSSで指定する

結局はてなブログの機能から背景画像を指定するのではなく、CSSで指定する方法を選びました。はるなぴとしてはこちらの方法がお勧めです。

はてなブログの設定項目でヘッダ画像を指定しようとしていた方はまず指定したヘッダ用の背景画像を外す必要があります。

Hatenaブログ設定のヘッダ画像の外し方

左側にあるブログの管理画面から「デザイン」の項目を選択します。

f:id:hal7pi:20180701200644p:plain

スパナマークのあるタブを選び「背景画像」を選択します。

f:id:hal7pi:20180701200655p:plain

「画像を外す」のバツ印をクリックして設定してあった背景用のヘッダ画像を外します。

f:id:hal7pi:20180701200712p:plain

確認画面が出ますので「OK」を選びます。

f:id:hal7pi:20180701200724p:plain

画像をアップロードのところの「ファイルを選択」のところが「選択されていません」と表示されていればOKです。

f:id:hal7pi:20180701200736p:plain

あらためて背景画像(ヘッダー画像)を設定

まず背景用のヘッダ画像を「はてなフォトライフ」に登録します。

誤って削除しないようにヘッダ画像用のフォルダを作っておきましょう。

「利用中のサービス」から「はてなフォトライフ」を選びます。

f:id:hal7pi:20180701200920p:plain

右側にある「フォルダ」のところから「新規」をクリックします。

f:id:hal7pi:20180701200933p:plain

「新しいフォルダの作成」という画面になりますので「フォルダ名」を入力し「フォルダを作成する」ボタンをクリックします。

f:id:hal7pi:20180701200956p:plain

ヘッダ用画像が準備できたら「このフォルダに写真をアップロード」と下線が引いてあるリンクをクリックします。

f:id:hal7pi:20180701201010p:plain

「画像をアップロード」という画面になりますので「ファイルを選択」ボタンを押します。

f:id:hal7pi:20180701201022p:plain

ファイルが選択されたら下の方にある「アップロード」ボタンを押すのを忘れないようにしてください。

f:id:hal7pi:20180701201105p:plain f:id:hal7pi:20180701201115p:plain

アップロードしたヘッダ用画像のチェックボックスにチェックを入れ、「このフォルダの写真を編集」の画面から「ブログに貼り付ける」ボタンをクリックします。

f:id:hal7pi:20180701201204p:plain

「HTMLタグ」の窓の中に記述されているところを見ます。

f:id:hal7pi:20180701201215p:plain

<a href="http://f.hatena.ne.jp/hal7pi/20180701083308"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180701/20180701083308.jpg" alt="20180701083308"></a>

ここでsrc以下の部分に記載されているURLがヘッダ画像のURLになります。テキストファイルにでも保存しておきましょう。

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180701/20180701083308.jpg

はてなフォトライフの画像をCSSを使ってヘッダ画像に指定する方法

CSSの設定を以下のようにします。

blog-title-inner {
  background-image:url(さっき取得したヘッダ画像のURL);
  background-position:center center;
  background-size:cover
}

このCSS設定ではヘッダ画像をブラウザの幅いっぱいに広げます。

デザインCSS窓でCSS設定する方法

普通にデザインCSS窓でやる方は以下の手順になります。

管理画面から「デザイン」を選びます。

f:id:hal7pi:20180701201454p:plain

スパナマークのタブをクリックします。

f:id:hal7pi:20180701201502p:plain

一番下の「デザインCSS」を選択します。

f:id:hal7pi:20180701201519p:plain

かなり小さなウィンドウが開きますので、先ほどのCSSをこの窓の中にコピペします。こんな感じです。

f:id:hal7pi:20180701201544p:plain

blog-title-inner {
  background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hal7pi/20180701/20180701083308.jpg);
  background-position:center center;
  background-size:cover
}

最後に上部にある「変更を保存する」ボタンを押すのを忘れないように注意してください。

f:id:hal7pi:20180701201555p:plain

外部CSSファイルでCSS設定する方法

外部CSSファイルを使ってはてなブログのCSS設定が可能です。

こちらの記事をご参照ください。はるなぴログではDropboxを使ってCSSを設定しています。簡単で便利ですよ!

www.halu7.com

これを使えばドロップボックスのファイルに書き加えるだけであっという間にヘッダ画像のCSSを設置することが可能です。すぐに反映されるのもいいですね。便利便利!

これでようやくヘッダ画像をはてなブログに設置することができました!