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

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

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

ヘッダー画像の準備

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

  • 右サイドバーもしくは左サイドバー(2カラム)の場合:960px
  • 両サイドバー(3カラム)の場合:1180px

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

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

ヘッダー画像の設置

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

新デザインパンくず-1

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

ヘッダー画像設定-2

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

ヘッダー画像設定-3

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

ヘッダー画像設定-4

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

ヘッダー画像設定-5

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

ヘッダー画像設定-6

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

MEMO

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

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

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

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

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

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

Seesaaブログのヘッダーに画像を設置する方法【新システム】”に37件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    匿名様

    コメントありがとうございます。選んだデザインによってカバー画像設定タブが無いものがあるみたいですね。ご指摘ありがとうございます。
    今ちょっと追記したのですが、以下の方法で試してみて下さい。

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

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

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

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

    これもデザインによって若干違う部分があるかもしれませんのでもし反映されない場合にはお手数ですが、再度コメント頂けると助かります。

  2. しげぞう 投稿作成者

    みむ様

    わざわざありがとうございます。リンクフリーなので全く問題ありませんし、むしろありがたいです。ありがとうございます、今後ともどうぞよろしく御願い致します。

  3. みむ

    はじめまして、みむ、と言います。こちらの記事のリンクを貼らせていただきましたので、ご報告いたします。私の認識違いや不愉快な点等、何かありましたら、訂正、削除させていただきますので、お手数をおかけしますが、ご連絡を頂けたらと思います。

  4. しげぞう 投稿作成者

    電車猫様

    わざわざ情報ありがとうございます。新旧が交じるとややこしいですね(笑)またしばらく様子をみて追記してみたいと思います。

  5. 電車猫

    はじめまして。
    私もこの記事を読んで、「新システムに更新したのにカバー画像タブだけ見つからない」自体に陥っています。
    私の調べでは、新デザインシステムでも「カバー画像タブ」があるものとないものが分かれているようで、どうやら旧デザインシステム風のデザインを選ぶと「カバー画像タブ」が表示されないようです(新デザインシステムであっても)。
    2017年4月現在の情報で今度対応する可能性もありますがご参考までに。

  6. しげぞう 投稿作成者

    ユース様

    コメントありがとうございます。カバー画像の設定が見当たらないという事はお使いのデザインは旧デザインシステムではないかと思います。Seesaaブログでは従来のシステム(旧システム)と新デザインシステムがあります。こちらの記事は「新デザインシステム用」の記事ですので、旧デザインシステム版の記事で試してみて下さい。

    旧システムでヘッダー画像を設置する方法はこちらの記事です。
    シーサーブログのヘッダーに画像を設定する方法

  7. ユース

    ヘッダー画像の設定が出来ません助けてください。こちらに書かれている通りにカバー画像設定から設定しようとしました。ですがカバー画像設定がどこを探しても見当たりません。
    SimpleDホワイト(右サイドバー)を使用しようかと思っております。
    どうか教えて頂けないでしょうか。

  8. しげぞう 投稿作成者

    みぃ様

    コメントありがとうございます。ヘッダー画像に関してはおそらく画像のURLが間違っているか、スタイルシートでの記述ミス、特に画像のURLを入れる部分の記述にミスがある場合が多いです。そのため、もし良かったらブログのURLを教えて下さい。実際にみれば原因も特定できるかと思います。

    コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  9. みぃ

    あ、ちなみに使っているテンプレはSimpleDホワイト(右サイドバー)です。

  10. みぃ

    だいぶ前からこちらのサイト拝見させていただいております。
    大変分かりやすく助かっているのですが、今回は助けていただきたくコメントを残しました。
    ヘッダーを設定するのにこちらに書いてあるとおりにやったつもりなのですが、何度やっても画像が反映されません。
    わたしのやり方の問題だとは思うのですが、お教えいただけると嬉しいです。

  11. しげぞう 投稿作成者

    リヴァイアス様

    コメントありがとうございます。Seesaaブログで作る私のブログではアイキャッチ画像を使う事がほとんどありませんので、ちょっと試してはないのですが、一度次の点を試して下さい。

    画像がはみ出すという事はおそらくブログの幅を変更されていると思います。Seesaaブログの管理画面から設定⇒ブログの設定と進むとサムネイルサイズという項目があります。これが画像のサイズを決める要素の1つになると思いますので、ここを自分の変更したブログのコンテンツ部分(本文の部分)のサイズに合わせて改めて画像をアップして試して見てください。

    別の方法としてはもしかするとスタイルシートで画像サイズを一括で変更できるかもしれません。もし良かったらブログのURLを教えて下さい。実際に試して検証してみますので、よかったらお願いします。また、ブログのURLはコメント公開時には削除しますので、どうぞよろしくお願い致します。

  12. リヴァイアス

    お世話になります。

    こちらの記事を見ながらシーサーブログでもブログを始めました。

    現在アイキャッチ画像をつけようと記事無いでアップロードした画像を貼り付けたところ
    画像の大きさがはみ出してしまいトップページで隣のサイドバーを覆い尽くしてしまう状況にあります。

    シーサーブログ記事中の画像またはアイキャッチ画像を自動で最適化させてくれるソースややり方をご存知であれば教えてください。

  13. しげぞう 投稿作成者

    S様

    反映されたようで良かったです。また何か分からない部分などありましたらコメント下さい。今後もよろしくお願いします。

  14. S

    行番号を消すと出来ました
    ありがとうございました。
    あとこの前コメントのシステムを知らずツイートしてしまいすいませんでした

  15. しげぞう 投稿作成者

    S様

    返信ありがとうございます。スタイルシート(CSS)に追加したコードですが、行番号まで一緒にコピペされているので、行番号以外の部分を削除して再度試して見てもらえますか?行番号を削除して保存し、ブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。それでも反映されない場合にはお手数ですが、もう一度コメント頂けると助かります。

  16. S

    こんばんは
    もう一度やってみましたがダメでした
    ダメなままにしてあります