Seesaaブログでヘッダー画像を設定する方法

こんにちは。

今回はSeesaaブログのヘッダー画像を設定する方法です。
タイトルのまんまですね。

カバー画像設定から簡単にヘッダー画像を編集する方法があるのですが、それでは少し思い通りにならないこともあったので、スタイルシートにCSSを追加する方法を合わせてやっていきたいと思います。

 

ヘッダー画像を設定する方法

カバー画像設定

Seesaa機能のひとつに、『カバー画像設定』があります。

1. マイページから、『デザイン』をクリック
2. 『CSS/HTML編集』をクリック
3. デザインタイトルをクリック
4. カバー画像設定をクリック

 

カバー画像設定の項目をクリックすると、画像をアップロードできます。
これがヘッダー画像となるので、使用したい画像をファイルから選んでください。

 

ヘッダー画像のサイズは大きめで作っておくと良いでしょう。

アップロードした画像を切り抜く

ドロップ欄の下にアップロードした画像が表示されるようになるので、ヘッダーに使用する画像をクリックします。

過去にアップロードしていた画像を使用したい場合も、画像をクリックして選択します。

 

画像を選択すると、切り取りへと移り変わります。
ここでは、ヘッダーで表示させたい画像の部分を指定することが出来ます。

 

ドロップ欄の下にある、

• 画像を切り取る
• 元画像は使用しない

のチェックを外すと、いちいち切り取り作業をしなくてもヘッダー画像を設定することができます。

 

 

 

 

選択したら『切り取りを実行』すると、ヘッダー画像が完成します。
（まだ設置はされていません）

こんな感じになるようです。↓

 

カバー画像の詳細設定をする

切り取り編集が終わると、プレビューと共に、ヘッダー画像の位置やタイトルの色といった詳細設定をすることが出来るようになります。

画像の位置設定に注意

画像の位置設定では

• そのままのサイズで表示
• ヘッダーの幅に合わせて表示
• 画像全体が見えるように表示

と、ヘッダー画像の表示を変更することが出来ます。

 

CSSでヘッダー画像を指定する

ここからは、

• 使用しているテンプレートに『カバー画像設定』の項目がない
• 設定できたけど、ヘッダーのサイズを変えたい

という方向けの作業です。

 

 

画像URLを取得する

カバー画像設定の項目がなく、ヘッダー画像をアップロードできていない場合は、マイブログのファイルマネージャから画像のアップロードを行います。

アップロードされた画像のタイトルをクリックすると、画像の詳細情報が開くので、そこから画像URLを取得することができます。

 

ヘッダー画像をCSSで設定する

まずはヘッダーにヘッダー画像を設置するCSSです。

1. CSS/HTML編集をクリック
2. 使用するテンプレートのデザインタイトルをクリック
3. スタイルシート編集をひたすらスクロール
4. 一番最後にコードを追記する

 

 

CSSはコードの下に新しいコードを追記することで上書きされるため、スタイルシートの一番最後に下記CSSを追記します。

.l-header {
background-image:url("画像URL");
background-repeat:no-repeat; /*画像の繰り返し*/
background-position: center; /*画像の位置*/
}

 

ヘッダー画像を繰り返し表示させる

ヘッダー画像を繰り返し表示させるには、

1. リピート
2. 画像の表示サイズ

を.l-header｛｝内に追加します。
※リピートは上記CSSでも記載されているので重複に注意してください。

background-repeat: repeat; /*画像の繰り返し*/
background-size:値; /*画像サイズ*/

 

数値を150pxで指定すると、こうなりました。↓

どうぞ良い感じで設定されてみてください。

 

ヘッダーのサイズを変えたい

カバー画像設定から設定したヘッダー画像を見てみると、両サイドに隙間が出来てしまいました。

.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ブログのスタイルシートは『バックアップをして保存』を押すと、簡単にバックアップをとってくれる心優しいブログサービスです。

コードを変更する際は必ず元に戻せるようバックアップをしながらカスタマイズしていくと安心ですよ。

 

＼ドメインを取得するなら／
格安ドメイン取得サービス─ムームードメイン─

 

• 無料でアフィリエイトブログを作成できる『Seesaaブログ』の始め方
• Seesaaブログ－ヘッダーに表示される広告を非表示にする方法