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

Seesaaブログのヘッダーに画像を設置する方法

今回はSeesaaブログのヘッダーに画像を設置する方法を紹介していきます。ヘッダー画像が変わるとサイトへの印象もグッと変わります。

先にヘッダー画像の準備をしておく

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

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

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

高さに関しては後で調整できますが、おすすめは250px~300pxくらい。あまりに高さがあるとメインコンテンツまで遠くなります。

フリーの画像サイトなどから素材となる画像を見つけておいて下さい。この記事も参考になるかも?

アイキャッチ画像に使える無料の写真素材サイト【クレジット表記不要】

画像の用意ができたらヘッダー画像を設定していきます。画像加工(文字入れなど)が必要なら先に加工を。バナー工房が無料で使えて便利です。

バナー工房

Seesaaブログへのヘッダー画像の設置方法と手順

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

Seesaaブログのヘッダーに画像を設置する方法-1

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

Seesaaブログのヘッダーに画像を設置する方法-2

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

Seesaaブログのヘッダーに画像を設置する方法-3

選択した画像が大きく表示されます。画像の上でドラッグすると枠が広がるのでこれをいっぱいに上下いっぱいに広げ、使いたい範囲を指定して「切り取りを実行」をクリック。

Seesaaブログのヘッダーに画像を設置する方法-4

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

Seesaaブログのヘッダーに画像を設置する方法-5

MEMO

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

カバー画像という設定がないデザインの場合

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

シーサーブログの画像URLを調べる方法

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

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

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

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

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

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

以上Seesaaブログのヘッダー画像をリンクにする方法でした。

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

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

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

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

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

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

CAPTCHA


  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ブログでは従来のシステム(旧システム)と新デザインシステムがあります。こちらの記事は「新デザインシステム用」の記事ですので、旧デザインシステム版の記事で試してみて下さい。

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