Seesaaブログのヘッダーに画像を設置する方法【新システム】

37 comments

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考に。
⇒シーサーブログのヘッダーに画像を設定する方法

今回はSeesaaブログのヘッダーに画像を設置する方法を紹介していきます。ただ、画像を設置するとブログのタイトルや説明文が邪魔になるので、次回の記事でタイトルの位置調整や文字の大きさ変更などのカスタマイズを書いておきますね。

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

ヘッダー画像の準備

ヘッダーの画像は準備しておく必要がありますが、ブログの幅を知っておかないとちょうどいいサイズになりません。全部のデザインを調べた訳ではないですが、大体初期状態ではこんな感じの横幅になっている場合が多いです。

右サイドバーもしくは左サイドバー（2カラム）の場合：960px
両サイドバー（3カラム）の場合：1180px

という訳なので画像はそれぞれブログの幅に合わせたサイズを準備。大きい分なら問題はありませんが、横幅がブログの幅よりも小さい画像は横のスペースが余っちゃうのでできればちょうどのサイズか少し大きめの画像がいいかな。

高さに関しては後で調整できますが、おすすめは250px～300pxくらい。あまりに高さがあるとメインコンテンツまで遠くなります。画像の用意ができたらヘッダー画像を設定していきます。

ヘッダー画像の設置

まず、Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリック。

それで「カバー画像設定」というタブがあるのでこれをクリック（このタブがない場合は後述します）。

それで「クリックもしくはここにファイルをドロップ」の部分をクリックして使いたいヘッダー画像のファイルをアップロード。すでにアップロードされている場合には下に画像が並んでいると思いますので使いたい画像をクリック。

選択した画像が大きく表示されます。画像の上でドラッグすると枠が広がるのでこれをいっぱいに上下いっぱいに広げます。

枠を広げたらその枠自体をドラッグして移動できるので、使いたい範囲に移動して「切り取りを実行」をクリック。

すると設定画面になって、ブログタイトルの文字色や説明文の色なども調整できます。

これだとタイトルや説明文がちょっと邪魔ですね。なので、これはブログタイトルや説明文の色を変更するよりも「タイトルの位置を移動する」か「タイトルや説明分は消す」方が見た目はいいかも。これの対処方法はまた別記事で書いてます。

MEMO

カバー画像設定というタブがない場合には事前にヘッダー画像をアップロードしておいて、画像のURLを調べておきます。
⇒シーサーブログの画像URLを調べる方法

画像のURLが分かったらスタイルシート編集で一番下に次のコードを追加してヘッダー画像を設置できます。

.l-header {
  height: 300px;
  background-image:url(画像のURL);　　
  background-repeat:no-repeat; 
  margin-bottom:0px;
}

※hieghtの数値で画像の高さを調整できます。

一度ヘッダー画像が設置できたらブログを表示させて確認。もしヘッダー画像が表示されない、反映されない場合にはブログを表示させた状態で「Ctrl」と「F5」を一緒に押してリロードしてみて下さい。

という訳で次回は設置したヘッダー画像から「ブログタイトル」と「説明文」を非表示にしてさらにヘッダー画像をトップページへのリンクにしてみましょう。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから