Seesaaブログのヘッダーに画像を設置してブログのタイトルや説明文を消す方法

Seesaaブログのヘッダーに画像を設置する方法Seesaaブログアフィリエイトとカスタマイズ

今回はSeesaaブログのヘッダーに画像を設置する方法と、ブログのタイトルや説明文を削除(非表示に)する方法を紹介していきます。

ヘッダー画像が変わるとサイトへの印象もグッと変わります。

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

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

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

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

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

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

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

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

バナー工房

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

まず、Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックし、「カバー画像設定」というタブがあるのでこれをクリック(このタブがない場合は後述します)。

Seesaaカバー画像の設定

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

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

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

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

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

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

MEMO

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

ナビメニューとの余白がある場合

グローバルナビ(ナビメニュー)を設置している方はヘッダー画像も設定するとナビメニューとヘッダー画像の間に余白ができている場合があります。

ヘッダー画像下の余白

その場合はスタイルシートに以下を追加して余白をなくす事ができます。

.l-header {margin-bottom: 0 !important;}

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

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

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

画像のURLが分かったらスタイルシート編集へ移動。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加してヘッダー画像を設置できます。

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

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

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

ブログタイトルや説明文を消す(非表示)にする場合

ブログのタイトルを削除(非表示)にしたいという場合もあると思いますが、ブログのタイトルって非常に重要なので単純に削除する訳にはいかないので、通常は画面の外(見えない位置)に移動する場合が多いです。要は非表示です。

ブログタイトルを見えなくするようにする場合にはスタイルシートの一番下に次のコードを入れます。

.header h1 a {
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 }

スコットケラムメソッドという手法。これで保存してブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認。ブログのタイトルが見えなくなっていればOKです。

それと説明文を非表示にする場合にはスタイルシートに次のコードを追加。

.description {
    display: none;
}

これでタイトルと説明文は非表示になります。

次回はヘッダー画像をトップページへのリンクにする方法を紹介していきます。

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

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

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

コメント

  1. 風来坊 より:

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

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

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

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

    よろしくお願いします。

  2. しげぞう より:

    風来坊様

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

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

  3. 風来坊 より:

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

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

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

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

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

  4. しげぞう より:

    匿名様

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

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

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

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

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

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

  5. 匿名 より:

    カバー画像設定というタブが出ない。なぜ?

  6. しげぞう より:

    みむ様

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

  7. みむ より:

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

  8. しげぞう より:

    電車猫様

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

  9. 電車猫 より:

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

  10. しげぞう より:

    ユース様

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

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

  11. ユース より:

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

  12. しげぞう より:

    みぃ様

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

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

  13. みぃ より:

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

  14. みぃ より:

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

  15. しげぞう より:

    リヴァイアス様

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

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

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

  16. リヴァイアス より:

    お世話になります。

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

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

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

  17. しげぞう より:

    S様

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

  18. S より:

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

  19. しげぞう より:

    S様

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

  20. S より:

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

タイトルとURLをコピーしました