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

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

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

スポンサーリンク

ヘッダー画像の準備

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

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

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

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

ヘッダー画像の設置

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

新デザインパンくず-1

それで「カバー画像設定」というタブがあるのでこれをクリック。

ヘッダー画像設定-2

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

ヘッダー画像設定-3

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

ヘッダー画像設定-4

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

ヘッダー画像設定-5

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

ヘッダー画像設定-6

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

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

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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    ユース様

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

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

  2. ユース

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

  3. しげぞう 投稿作成者

    みぃ様

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

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

  4. みぃ

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

  5. みぃ

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

  6. しげぞう 投稿作成者

    リヴァイアス様

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

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

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

  7. リヴァイアス

    お世話になります。

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

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

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

  8. しげぞう 投稿作成者

    S様

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

  9. S

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

  10. しげぞう 投稿作成者

    S様

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

  11. S

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