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」を一緒に押してリロードしてみて下さい。

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

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

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

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

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

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

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

  1. 風来坊

    しげぞう様でも無理なんですね・・・

    いろいろお手数おかけしました。
    ありがとうございました。

  2. しげぞう 投稿作成者

    風来坊様

    返信ありがとうございます。このデザインはサムネイル(小)が表示される方ですね、サムネイルの大きいデザインでのやり方でした。。。。

    このデザインの場合はもともと大きく表示させているものを位置を指定してはみ出す部分を非表示にするというCSSになってますので、ちょっと可能かどうかわかりません。専門家でもないのですみません。。しばらくトライしてみましたが私には無理っぽいです。

  3. 風来坊

    毎回、PCのCSS変更直後に「Ctrl」と「F5」を一緒に押してリロード(再読込み)するようにしています。

    今回は、それでもだめなので、下記コメントをいたいました。

    今もリロードしましたが、トップ画面はやはり欠けたサムネイルのまです。

    よろしくお願いします。

  4. しげぞう 投稿作成者

    風来坊様

    返信ありがとうございます。CSSでOKです。リロード(再読込み)して確認をお願いします。それでも反映されない場合にはURL教えてください。

  5. 風来坊

    ご教示ありがとうございます。

    下記のソースコードをPCのCSSに追加しましたが、トップ画面のサムネイルは変わらず欠けたままです。

    CSSでなく、HTML編集に追加するのでしょうか?

  6. しげぞう 投稿作成者

    風来坊様

    返信ありがとうございます。あ、ホントですね、PCは全体が入っているかと思っていたら個別ページだけなんですね。トップページは確かに全体が入ってませんね。

    アイキャッチ画像のサイズが統一されていると仮定して、以下のコードを追加して表示させる画像の高さを調整したら良いと思います。

    トップページが大きなサムネイル画像のデザインで試したコードです。

    .entry__thumbnail a {
        height: 350px;
    }
    

    一応350pxにしてますが、400pxとかでも試してみて下さい。

  7. 風来坊

    早速の返信ありがとうございます。

    スマホページだけでなく、PCページでもサムネイル画像が欠けてしまうので、
    PCページのHTML編集だけでも教えていただけると幸いです。

    ちなみに、PCページのサムネイルが欠けてしまうのは、トップページで新着順の記事の各個別のアイキャッチ画像をもとにしたサムネイルです。表示倍率設定の問題だと思います。

    サイドバーの記事一覧のサムネイルは縮小して全表示になるように、下記のとおり修正してうまく表示されています。

    よろしくお願いします。

  8. しげぞう 投稿作成者

    風来坊様

    コメントありがとうございます。Seesaaブログのスマホページのサムネイル画像だと思うのですが、これはちょっと私もわかりません。可能かどうかもちょっと微妙です。

    HTMLを編集できればかんたんなんですが、HTMLが編集できないため、CSSで無理やりって感じになります。ちょっと色々試してみたんですが私にはできませんでした。参考にならずすみません。

  9. 風来坊

    「サムネイル画像」の表示倍率の設定方法についてお伺いします。

    ヘッダー画像とは話がそれるかもしれませんが、サムネイル画像関連の記事がないので、ここに投稿します。

    デフォルト設定だと、トップ画面の記事一覧のサムネイル画像の倍率が大きすぎて、表示が画像全体に収まらず欠けてしまいます。

    関連サイトを読み漁り、PC、スマホ画面ともに「サイドバー」の記事一覧のサムネイル画像はCSSに
    .recent-entry__thumbnail img {
    max-width: 100%;
    height: auto;
    }
    を追加して何とか画像が欠けずに収まっています。

    でも、トップ画像記事サムネイルの全表示設定方法がわからないので、よろしくご教示ください。

  10. しげぞう 投稿作成者

    匿名様

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

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

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

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

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

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

  11. しげぞう 投稿作成者

    みむ様

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

  12. みむ

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

  13. しげぞう 投稿作成者

    電車猫様

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

  14. 電車猫

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

  15. しげぞう 投稿作成者

    ユース様

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

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

  16. ユース

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

  17. しげぞう 投稿作成者

    みぃ様

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

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

  18. みぃ

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

  19. みぃ

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

  20. しげぞう 投稿作成者

    リヴァイアス様

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

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

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

  21. リヴァイアス

    お世話になります。

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

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

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

  22. しげぞう 投稿作成者

    S様

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

  23. S

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

  24. しげぞう 投稿作成者

    S様

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

  25. S

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

  26. しげぞう 投稿作成者

    S様

    返信ありがとうございます。ブログを確認させて頂きましたが、画像の設定がされていないようですので、ヘッダー画像を設置してみてから再度コメント頂けると助かります。多分初期値に戻した関係でヘッダー画像が設定されていない状態だと思いますので、一度設定し、それで反映されていない状態でサイトを見せて頂けると原因の特定もできると思いますので、どうぞよろしくお願いします。

  27. S

    昨日コメントしましたSです
    やはりできません
    初期値に戻してやってみたりもしたのですがむりでした
    僕のブログ→
    お願いします

  28. しげぞう 投稿作成者

    S様

    コメントありがとうございます。1度確認をしてもらいたいのですが、画像のURLの部分を「 ” 」で囲っていますが、これが半角になっているか確認して下さい。それで反映されない場合には今度は画像のURLを囲む「 ” 」を削除してみて下さい。

    それで保存し、ブログを表示させます。「Ctrl」と「F5」を押してリロードしてから確認して下さい。もしそれでも反映されない場合にはブログのURLを教えて頂けると原因の特定ができると思います。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。

  29. S

    はじめまして、この前始めたばかりの者なのですが、
    どうやっても画像が表示されません。
    使っているデザインは シンプルa パステルイエロー 左カラム です

  30. しげぞう 投稿作成者

    akan様

    報告ありがとうございます。ブログのタイトルと説明文ですが、これは私の勘違いでテンプレートを間違っていました。akan様のサイトの場合は次のコードをスタイルシートに追加して下さい。画像のリンクも対応できるかと思います。

    .header { 
        height: 250px;
    }
    
    .header h1 {
        height: 210px;
    }
    
    .header h1 a {
        height: 210px;
        display: block;
        text-indent: -9999px;
    }
    
    p.description {
        display: none;
    }

    これでタイトルと説明文を消して画像をリンクにできると思いますので、追加したらブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認してみてください。それでダメなら再度コメント頂けると助かります。

    また、記事下のブログランキングですが、ブログランキングというのはどういう物なのかちょっと分からないのですが、ブログランキングのコードを追加するだけというのであれば「Seesaaブログにアドセンスを貼る方法」などで記事下に広告を貼る方法を解説してますので、そちらを参考に広告の代わりにそのランキングのコードを追加すればOKだと思います。

  31. akan

    それとheder画像をホームボタン(リンクボタン)にしたいのですが、どのようにすればいいのでしょうか?厚かましくて申し訳ありません。

  32. akan

    教えて頂き有り難いのですが、タイトル、説明文が消えません。

    見て頂きたいのですが、他に記事下にブログランキングを入れたいのですが、どこか分かりません。

  33. しげぞう 投稿作成者

    あや様

    返信ありがとうございます。次の2点を試して見て下さい。

    1.画像のURLの前後の「 ” 」「 ” 」が半角になっているか確かめる。

    2.それでダメなら画像URL前後の「 ” 」「 ” 」を削除。

    以上2点を試して見て下さい。また、ブログの表示を確認する場合には「Ctrl」と「F5」を一緒に押してリロードしてから試して見てください。

  34. あや

    お返事ありがとうございます。
    教えていただいたとうりURLをコピーしましたが
    表示されませんでした、、、

    スタイルシートの一番下にこれを貼り付けているものです。
    .l-header{
    height: 300px; /* 画像の高さ */
    background-image:url(“http://m-m-home.up.seesaa.net/image/500x167x0d5b1c4c7f720f698946c7f6.jpg”); /* 背景画像 */
    background-repeat:no-repeat; /* 背景画像繰り返し */
    }

    .l-header を .hearder でも試したのと
    300pxを500px(半角)にも変えてみましたができませんでした、、、

  35. しげぞう 投稿作成者

    あや様

    コメントありがとうございます。一度ファルマネージャーを開いて「画像」をクリックしてみてください。すると右側に画像、その下にURLがあると思います。「httpから始まるURLで、最後が「.jpg」とか「.png」で終わるURLになると思います。一度確認し、それを挿入してみて試してみて貰えますか?

    もしそれでも表示されないのであれば再度コメント下さい。また、URLも教えて頂けると原因も特定しやすいので、もしよかったらURLも教えて頂けると助かります。コメント公開時にはURLは削除しますので、よろしくお願い致します。

  36. あや

    はじめまして。seesaaブログに昨日登録したばかりの初心者です。
    ヘッダーを変更したく調べたところこちらのサイトを見つけました。
    デザインは「シンプルA.ホワイト.右カラム」というものにして、この記事のとおりスタイルシートの編集をしているつもりなのですがヘッダー画像が表示されません。
    多分画像のURLをきちんと入力できていないからだと思うのですが
    ファイルマネージャの画像一覧からヘッダーにしたい画像の挿入をひらくと
    <a href="ttp:// (省略) とありますが
    これをすべてコピーするのでしょうか?
    http//からコピーをするのかとも思ったのですがどこまでコピーするのかわかりません、、、

    超ド素人な質問で申し訳ありませんが、よければお返事お願いします。

  37. しげぞう 投稿作成者

    akan様

    コメントありがとうございます。タイトルと説明文を消すにはスタイルシートの一番下に次のコードを追加したら消せると思います。

    #banner h1 {
        display: none;
    }
    
    #banner .description {
        display: none;
    }

    このコードでタイトルと説明文は非表示にできますがあまりおすすめはできません。心配な点としては「非表示」にする事で「隠しテキスト」と判断されないか?という点です。以前キーワードを詰め込んで非表示にするようなスパムが結構あって、これもやり過ぎると順位を落とされるかもしれません。これくらいは大丈夫かもしれませんが、その点だけはちょっと心配です。

  38. akan

    いつも大変お世話になっております。
    ヘッダーに画像は挿入出来ましたが、タイトル文字と説明文を消したいのですが、どのようにすればいいのでしょうか?

  39. あー

    しげぞう様

    大変丁寧に詳細を教えていただきありがとうございます!
    無事希望通りのヘッダーにカスタマイズできました。
    本当にありがとうございました!!

    こちらのサイトのファンです。また色々参考にさせていただければと思います。
    今後とも宜しくお願いいたします。

  40. しげぞう 投稿作成者

    あー様

    コメントありがとうございます。あー様がどのように設置したいのかは理解できていると思いますが、もしイメージと違うという場合には改めてコメント下さい。

    先にちょっと気になる点があるので、それについて書かせて下さい。後で解決策は書いてみます。「background-image:url」で画像のURLを囲む「 ” 」が全角になってますので、これを半角にする必要があります。それで、画像のURLに書いてある 「width=”200″ height=”150″」という部分は削除して下さい。ここは画像のURLだけ入れないと反映はされません。

    ただ、上記の部分を変更してもあー様の思うように設置はできないと思います。「タイトルと画像を横並びに」という事だと思いますので、それについて書いてみます。

    まず、横並びにする時に使うのが「float:left」とか「float:right」というやつなんです。現時点でこのヘッダー部分には「header」という1つの箱があると思って下さい。この「header」の下にもう1つ新しい箱(画像用)を作成(HTML)して2つの箱を横に並べるという処理(スタイルシート)をする必要があると思います。

    さらにこの2つの箱を入れる大きな箱をもう1つ作成する必要もあります。この大きな箱にはスタイルシートで2つの箱に適応する「float」を解除するコードをいれるだけの目的です。floatを解除しないとヘッダーの下のコンテンツのレイアウトが崩れたりするので必要になると思います。

    以上の部分を実装していきますが、ちょっと数カ所処理が必要なので、現在のHTMLとスタイルシートはメモ帳などにコピーしておいて下さい。もし失敗した時に元に戻せるようにしておいて下さい(コレ重要です!)。

    コピーができたら一度スタイルシートで自分で追加したコードの内、「.header」に記述した「background」系の記述は一度削除して保存しておいて下さい。後で改めて書きます。

    まずは「HTML編集」のタブを選択して次の記述を探します(17行目くらい)。

    <div class="l-wrapper">
    <header role="banner" class="l-header">

    これの直後に2つの箱を囲む大きな箱を作成します。次の1行を追加して下さい。

    <div class="oya">

    それでその下にこのような記述があります。

    <div class="header">
    <h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1>
    <p class="description"><% blog.description | nl2br | mark_raw -%></p>
    </div>

    この部分がタイトルや説明文が入る部分ですので、この「直後」に新しい箱(画像用)を作成します。次のコードを入れます。

    <div class="gazou">
    <img border="0" alt="画像の説明文" src="画像のURL" width="200px" height="150px">
    </div>
    </div>

    ここに直接画像を入れて高さと横幅を記述してしまいます。冒頭でも書いたように「 ” 」は全角ではなく「半角」です。これでHTMLの編集はOKです。

    次にスタイルシートの編集タグに切り替えて次のコードを追加。

    /* ヘッダー左(タイトルや説明文の箱) */
    .header{
      width: 500px  /* タイトル・説明文の部分の横幅 */
      height: 150px; /* 同じく高さ */
      float:left;  /* 左にfloat */
      margin-right:20px; /* 2つの箱の間の距離 */
    }
    
    /* ヘッダー右(画像の箱) */
    .gazou{  
      float:left; /* 画像をfloat */
    }
    
    /* float解除の記述 */
    .oya:after{content:"";
      display:block;
      clear:both;
    }

    横に並べた2つの箱はどちらも「float:left」を使い、2つの箱の間隔を「margin-right」で調整してますので、数値は変更してもOKです。また、「header(左の箱)」の横幅を500pxにしてますが、ここは画像と並びを見ながら調整してみると良いかと思います。

    注意点は横に並べた2つの箱の横幅の合計つまり「width(間隔のmarginも含む)」が全体の幅よりも大きくならないようにしないとレイアウトが崩れると思います。

    一応上記のコードで保存し、サイトを表示させて「Ctrl」と「F5」を押してリロードして確認してみてください。

    もしこれで反映されない場合には再度コメント頂けると助かります。またその際にはURLも教えて頂けると原因が分かりやすいと思います。コメント公開時にはURLは削除しますので、よろしくお願い致します。

  41. あー

    大変わかりやすい記事をいつもありがとうございます!
    参考にさせていただいております。

    私はseesaaブログの初心者なのですが、新デザインシステムの「シンプルA.パステルピンク 右カラム」というテンプレを使用しております。ヘッダーで、左上にタイトル、右側に画像を貼りたく試しているのですが、うまくいきません。
    スタイルシートの一番下に以下記述を追加しております。
    (画像名部分は●に変更しております。)
    可能でしたら、ご教授をお願いすることはできますでしょうか?
    よろしくお願いいたします。
    ーーーーーーーーーーーーーーーーーーーー
    .header {
    text-align: left; /* タイトルの位置 */
    padding-top: 0; /* 上に●●pxの余白 */
    }

    .header h1 {
    font-size: 32px; /* 文字の大きさ */
    line-height: 1.4; /* 行間の高さ */
    font-weight: bold; /* 文字を太字に */
    }

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

    p.description {
    font-size: 15px; /* 文字の大きさ */
    color: #FACC2E; /* 文字の色 */
    line-height: 1.8; /* 行間の高さ */
    margin-bottom: 10px; /* 下のコンテンツとの余白 */
    }

    .header{
    height: 150px; /* 画像の高さ */
    background-image:url(“http://●●●.up.seesaa.net/image/●画像名●-thumbnail2.JPG” width=”200″ height=”150″); /* 背景画像 */
    background-repeat:no-repeat; /* 背景画像繰り返し */
    background-position:right; /* 画像の位置 */
    }
    ーーーーーーーーーーーーーーーーーーーー

  42. しげぞう 投稿作成者

    ガリゲー様

    コメントありがとうございます。「Time line Green」はおそらく最近追加されたテンプレートかな?と思うのですが、若干違う部分がありますね。スタイルシートの一番下に次のコードを入れて試して下さい。

    .header {
      height: 300px;  /* 画像の高さ */
      background-image:url("http://●●");   /* 背景画像 */  
      background-repeat:no-repeat;    /* 背景画像繰り返し */
    }

    背景画像の部分に画像のURLを入れて保存します。それでブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてみて下さい。もしそれで反映されない場合には再度コメント下さいませ!記事にも追記しておきます。

  43. ガリゲー

    大変分かりやすい記事でいつも参考にさせたいただいております。
    私はseesaaブログの初心者なのですが、新デザインシステムの「Time line Green」というテンプレを使用しております。ヘッダーに画像を貼りたいので、この記事どおりに試しているのですが、うまくいきません。以前使用していた「シンプルA.両カラム」ではうまくいってたんですが。ご回答いただければ幸いです。

  44. しげぞう 投稿作成者

    >はるき様

    コメントありがとうございます。おそらくキャッシュ(古いデータ)が残っているのが原因だと思います。一度自分のブログを表示させて「Ctrl」と「F5」を同時に押してリロードして確認してみて下さい。それで反映されない場合には別のブラウザで確認してみることをおすすめします。別のブラウザでヘッダー画像が消えていれば原因はブラウザのキャッシュだと思います。これはおそらく時間が経てば消えると思われます。

  45. はるき

    よければ回答お願いします。シーサーブログの新システムで、ヘッダー画像を入れれたのですが、元に戻したいと思い、スタイルシートを初期に戻したのですが、プレビューでは戻っているのに、設定変更後にトップページを確認すると、ヘッダー画像が消えてくれません。初期に戻すだけでは消えてくれないのでしょうか。それともブログの反映が遅いだけでしょうか。お願いします。