こんにちは。
今回はSeesaaブログのヘッダー画像を設定する方法です。
タイトルのまんまですね。
カバー画像設定から簡単にヘッダー画像を編集する方法があるのですが、それでは少し思い通りにならないこともあったので、スタイルシートにCSSを追加する方法を合わせてやっていきたいと思います。
ヘッダー画像を設定する方法
カバー画像設定
Seesaa機能のひとつに、『カバー画像設定』があります。
- マイページから、『デザイン』をクリック
- 『CSS/HTML編集』をクリック
- デザインタイトルをクリック
- カバー画像設定をクリック
カバー画像設定の項目をクリックすると、画像をアップロードできます。
これがヘッダー画像となるので、使用したい画像をファイルから選んでください。
ヘッダー画像のサイズは大きめで作っておくと良いでしょう。
(無料でもかなり使えるのでオススメ)

アップロードした画像を切り抜く
ドロップ欄の下にアップロードした画像が表示されるようになるので、ヘッダーに使用する画像をクリックします。
過去にアップロードしていた画像を使用したい場合も、画像をクリックして選択します。
画像を選択すると、切り取りへと移り変わります。
ここでは、ヘッダーで表示させたい画像の部分を指定することが出来ます。
ドラッグ&ドロップ
画像上でダブルクリックをしたままマウスを動かすと選択範囲が広がります。
スマホから編集している場合は、画像上で指を押したまま動かすと選択することが出来ます。
ドロップ欄の下にある、
- 画像を切り取る
- 元画像は使用しない
のチェックを外すと、いちいち切り取り作業をしなくてもヘッダー画像を設定することができます。

私は、木のぬくもりを感じたかったので光の多い部分を選択します。
選択したら『切り取りを実行』すると、ヘッダー画像が完成します。
(まだ設置はされていません)
こんな感じになるようです。↓
カバー画像の詳細設定をする
切り取り編集が終わると、プレビューと共に、ヘッダー画像の位置やタイトルの色といった詳細設定をすることが出来るようになります。
もちろん、RGB値やカラーコードを入力して指定することもできます。
(短縮されたカラーコードには反応しません)

画像の位置設定に注意
画像の位置設定では
- そのままのサイズで表示
- ヘッダーの幅に合わせて表示
- 画像全体が見えるように表示
と、ヘッダー画像の表示を変更することが出来ます。

小さな画像をたくさん表示させたり



センスのなさよ…
CSSでヘッダー画像を指定する
ここからは、
- 使用しているテンプレートに『カバー画像設定』の項目がない
- 設定できたけど、ヘッダーのサイズを変えたい
という方向けの作業です。
表示エラーの原因にもなるため、必ず元に戻せるようバックアップしながら編集するようにしましょう。
画像URLを取得する
カバー画像設定の項目がなく、ヘッダー画像をアップロードできていない場合は、マイブログのファイルマネージャから画像のアップロードを行います。
アップロードされた画像のタイトルをクリックすると、画像の詳細情報が開くので、そこから画像URLを取得することができます。
ヘッダー画像をCSSで設定する
まずはヘッダーにヘッダー画像を設置するCSSです。
- CSS/HTML編集をクリック
- 使用するテンプレートのデザインタイトルをクリック
- スタイルシート編集をひたすらスクロール
- 一番最後にコードを追記する
CSSはコードの下に新しいコードを追記することで上書きされるため、スタイルシートの一番最後に下記CSSを追記します。
.l-header { background-image:url("画像URL"); background-repeat:no-repeat; /*画像の繰り返し*/ background-position: center; /*画像の位置*/ }
ポジションチェーンジ!
background-position: left; で左寄せ
background-position: right; で右寄せとなります。
ヘッダー画像を繰り返し表示させる
ヘッダー画像を繰り返し表示させるには、
- リピート
- 画像の表示サイズ
を.l-header{}内に追加します。
※リピートは上記CSSでも記載されているので重複に注意してください。
background-repeat: repeat; /*画像の繰り返し*/ background-size:値; /*画像サイズ*/
数値を150pxで指定すると、こうなりました。↓
どうぞ良い感じで設定されてみてください。
ヘッダーのサイズを変えたい
カバー画像設定から設定したヘッダー画像を見てみると、両サイドに隙間が出来てしまいました。
使用しているのは『シンプルB』のテンプレートです。
.l-wrapper { min-width: 100%; }
これで画面幅いっぱいに広がります。
この設定のせいで、コンテンツやサイドバーなども画面いっぱいに広がってしまいます。直すコードはおいおい書こうと思います。。
縦のサイズを変更する
ヘッダー画像の縦のサイズを変更するときは、クラス名が変わります。
.l-wrapper { min-width: 100%; } .l-header { height:550px; /*縦のサイズ*/ }
参考に、、550pxにしてみました。
今流行りの、ドーン!としたヘッダーになります。
ブログタイトルの文字色やサイズを変える
ブログタイトルの文字色や大きさをざっくりと変更してみます。
画像では変更が分かりやすいようにタイトル文字を小さくしてみました。
以下のCSSをスタイルシートに追記します。
.header h1 { font-size: 16px; /*文字サイズ*/ font-weight: normal; /*文字の太さ*/ } .header h1 a { color: #888; /*文字の色*/ }
ブログ説明が不要な場合は、以下のコードで非表示になります。
.description { visibility: hidden; }
まとめ
疲れてきたのでこの辺にしたいと思います…。
Seesaaブログのスタイルシートは『バックアップをして保存』を押すと、簡単にバックアップをとってくれる心優しいブログサービスです。
コードを変更する際は必ず元に戻せるようバックアップをしながらカスタマイズしていくと安心ですよ。
\ドメインを取得するなら/
格安ドメイン取得サービス─ムームードメイン─