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

カスタマイズ

こんにちは。

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

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

 

スポンサーリンク

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

カバー画像設定

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

  1. マイページから、『デザイン』をクリック
  2. 『CSS/HTML編集』をクリック
  3. デザインタイトルをクリック
  4. カバー画像設定をクリック
テンプレートがいくつかある場合は使用するデザインのタイトルを選択してください。ここでは『シンプルBホワイト』というテンプレートを使用しています。

『カバー画像設定』の項目がない場合は、使用するテンプレートを項目があるものに変更するか、スタイルシートにCSSを記入する必要があります。

 

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

 

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

小さいサイズの画像だと無理に引き延ばすことになるので、ぼやけの原因になります。
私はCanvaをガッツリと使用して画像を作成しております。今回Seesaaブログのヘッダー用に用意したのもCanvaの画像をちょうど良さそうなサイズで作成しました。
(無料でもかなり使えるのでオススメ)

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

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

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

 

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

ドラッグ&ドロップ

画像上でダブルクリックをしたままマウスを動かすと選択範囲が広がります。
スマホから編集している場合は、画像上で指を押したまま動かすと選択することが出来ます。

 

ドロップ欄の下にある、

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

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

 

 

 

私は、木のぬくもりを感じたかったので光の多い部分を選択します。

 

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

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

 

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

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

『切り取り』編集後、詳細設定の欄へ自動で移行されますが、すでに設定してある場合は設定中のカバー画像をクリックすると詳細設定へ移行することができます。
なんと、スライドさせるだけで良いので感覚的な色味の設定が可能。
もちろん、RGB値やカラーコードを入力して指定することもできます。
(短縮されたカラーコードには反応しません)

画像の位置設定に注意

画像の位置設定では

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

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

『画像全体が見えるように表示』とした場合、確かに全体は見えるのですが画像自体が小さくなってしまうこともあります。
『画像の全体表示』と『繰り返し表示』の機能を使って、
小さな画像をたくさん表示させたり
隅においやることも可能です。

センスのなさよ…

 

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

ここからは、

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

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

 

スタイルシートに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; /*画像の位置*/
}

 

ポジションチェーンジ!

background-position: left; で左寄せ
background-position: right; で右寄せとなります。

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

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

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

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

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

 

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

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

 

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

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

こちらのヘッダーサイズはテンプレートによって異なります。
使用しているのは『シンプルB』のテンプレートです。
ヘッダーのサイズを変更したいのですがブログ幅のサイズがデフォルトで『960px』と指定されているため、960pxより大きいサイズのヘッダーにはなりません。
というわけで、以下のコードを追加してみます。
.l-wrapper {
min-width: 100%;
}

これで画面幅いっぱいに広がります。

.l-wrapperの指定でブログ全体の幅を広げます。
この設定のせいで、コンテンツやサイドバーなども画面いっぱいに広がってしまいます。直すコードはおいおい書こうと思います。。

 

縦のサイズを変更する

ヘッダー画像の縦のサイズを変更するときは、クラス名が変わります。

.l-wrapper {
min-width: 100%;
}
.l-header {
height:550px; /*縦のサイズ*/
}

 

.l-wrapperでブログ全体のサイズを100%(画面幅に合わせるよう)に設定したので、.l-headerの方でヘッダー画像の幅サイズをpx指定しても大丈夫です。

参考に、、550pxにしてみました。
今流行りの、ドーン!としたヘッダーになります。

 

ブログタイトルの文字色やサイズを変える

ブログタイトルの文字色や大きさをざっくりと変更してみます。
画像では変更が分かりやすいようにタイトル文字を小さくしてみました。

 

以下のCSSをスタイルシートに追記します。

.header h1 {
font-size: 16px; /*文字サイズ*/
font-weight: normal; /*文字の太さ*/
}

.header h1 a {
color: #888; /*文字の色*/
}

 

ブログ説明が不要な場合は、以下のコードで非表示になります。

.description {
visibility: hidden;
}

 

 

まとめ

疲れてきたのでこの辺にしたいと思います…。

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

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

 

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

 

タイトルとURLをコピーしました