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

Seesaaブログアフィリエイトとカスタマイズ

2020.07.29 2018.04.30

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

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

先にヘッダー画像の準備をしておく
Seesaaブログへのヘッダー画像の設置方法と手順
1. ナビメニューとの余白がある場合
2. カバー画像という設定がないデザインの場合
ブログタイトルや説明文を消す（非表示）にする場合
ブログを収益化するならWordPress利用がおすすめ

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

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

右サイドバーもしくは左サイドバー（2カラム）の場合：960px
両サイドバー（3カラム）の場合：1180px

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

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

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

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

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

⇒バナー工房

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

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

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

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

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

MEMO

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

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

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

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

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

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

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

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

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

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

.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と無料ブログの違いや必要な料金などは以下記事でまとめてます。

しげぞうより:
2015年9月10日 11:47 AM
S様
返信ありがとうございます。ブログを確認させて頂きましたが、画像の設定がされていないようですので、ヘッダー画像を設置してみてから再度コメント頂けると助かります。多分初期値に戻した関係でヘッダー画像が設定されていない状態だと思いますので、一度設定し、それで反映されていない状態でサイトを見せて頂けると原因の特定もできると思いますので、どうぞよろしくお願いします。
S より:
2015年9月9日 6:53 PM
昨日コメントしましたSです
やはりできません
初期値に戻してやってみたりもしたのですがむりでした
僕のブログ→
お願いします
しげぞうより:
2015年9月9日 9:10 AM
S様
コメントありがとうございます。１度確認をしてもらいたいのですが、画像のURLの部分を「 ” 」で囲っていますが、これが半角になっているか確認して下さい。それで反映されない場合には今度は画像のURLを囲む「 ” 」を削除してみて下さい。
それで保存し、ブログを表示させます。「Ctrl」と「F5」を押してリロードしてから確認して下さい。もしそれでも反映されない場合にはブログのURLを教えて頂けると原因の特定ができると思います。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。
S より:
2015年9月8日 11:45 PM
はじめまして、この前始めたばかりの者なのですが、
どうやっても画像が表示されません。
使っているデザインはシンプルa パステルイエロー左カラムです
しげぞうより:
2015年9月5日 11:57 AM
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だと思います。
akan より:
2015年9月5日 1:46 AM
それとheder画像をホームボタン（リンクボタン）にしたいのですが、どのようにすればいいのでしょうか？厚かましくて申し訳ありません。
akan より:
2015年9月5日 1:44 AM
教えて頂き有り難いのですが、タイトル、説明文が消えません。
見て頂きたいのですが、他に記事下にブログランキングを入れたいのですが、どこか分かりません。
しげぞうより:
2015年9月2日 9:55 AM
あや様
返信ありがとうございます。次の2点を試して見て下さい。
１．画像のURLの前後の「 ” 」「 ” 」が半角になっているか確かめる。
２．それでダメなら画像URL前後の「 ” 」「 ” 」を削除。
以上２点を試して見て下さい。また、ブログの表示を確認する場合には「Ctrl」と「F5」を一緒に押してリロードしてから試して見てください。
あやより:
2015年9月1日 9:52 PM
お返事ありがとうございます。
教えていただいたとうり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（半角）にも変えてみましたができませんでした、、、
しげぞうより:
2015年8月31日 9:19 AM
あや様
コメントありがとうございます。一度ファルマネージャーを開いて「画像」をクリックしてみてください。すると右側に画像、その下にURLがあると思います。「httpから始まるURLで、最後が「.jpg」とか「.png」で終わるURLになると思います。一度確認し、それを挿入してみて試してみて貰えますか？
もしそれでも表示されないのであれば再度コメント下さい。また、URLも教えて頂けると原因も特定しやすいので、もしよかったらURLも教えて頂けると助かります。コメント公開時にはURLは削除しますので、よろしくお願い致します。
あやより:
2015年8月30日 5:33 PM
はじめまして。seesaaブログに昨日登録したばかりの初心者です。
ヘッダーを変更したく調べたところこちらのサイトを見つけました。
デザインは「シンプルA.ホワイト.右カラム」というものにして、この記事のとおりスタイルシートの編集をしているつもりなのですがヘッダー画像が表示されません。
多分画像のURLをきちんと入力できていないからだと思うのですが
ファイルマネージャの画像一覧からヘッダーにしたい画像の挿入をひらくと
<a href="ttp://　（省略）　とありますが
これをすべてコピーするのでしょうか？
http//からコピーをするのかとも思ったのですがどこまでコピーするのかわかりません、、、
超ド素人な質問で申し訳ありませんが、よければお返事お願いします。
しげぞうより:
2015年8月26日 9:34 AM
akan様
コメントありがとうございます。タイトルと説明文を消すにはスタイルシートの一番下に次のコードを追加したら消せると思います。
```
#banner h1 {
    display: none;
}

#banner .description {
    display: none;
}
```
このコードでタイトルと説明文は非表示にできますがあまりおすすめはできません。心配な点としては「非表示」にする事で「隠しテキスト」と判断されないか？という点です。以前キーワードを詰め込んで非表示にするようなスパムが結構あって、これもやり過ぎると順位を落とされるかもしれません。これくらいは大丈夫かもしれませんが、その点だけはちょっと心配です。
akan より:
2015年8月25日 9:40 PM
いつも大変お世話になっております。
ヘッダーに画像は挿入出来ましたが、タイトル文字と説明文を消したいのですが、どのようにすればいいのでしょうか？
あーより:
2015年8月17日 2:31 PM
しげぞう様
大変丁寧に詳細を教えていただきありがとうございます！
無事希望通りのヘッダーにカスタマイズできました。
本当にありがとうございました！！
こちらのサイトのファンです。また色々参考にさせていただければと思います。
今後とも宜しくお願いいたします。
しげぞうより:
2015年8月3日 11:26 AM
あー様
コメントありがとうございます。あー様がどのように設置したいのかは理解できていると思いますが、もしイメージと違うという場合には改めてコメント下さい。
先にちょっと気になる点があるので、それについて書かせて下さい。後で解決策は書いてみます。「background-image:url」で画像のURLを囲む「 ” 」が全角になってますので、これを半角にする必要があります。それで、画像のURLに書いてある「width=”200″ height=”150″」という部分は削除して下さい。ここは画像のURLだけ入れないと反映はされません。
ただ、上記の部分を変更してもあー様の思うように設置はできないと思います。「タイトルと画像を横並びに」という事だと思いますので、それについて書いてみます。
まず、横並びにする時に使うのが「float:left」とか「float:right」というやつなんです。現時点でこのヘッダー部分には「header」という１つの箱があると思って下さい。この「header」の下にもう１つ新しい箱（画像用）を作成（HTML）して２つの箱を横に並べるという処理（スタイルシート）をする必要があると思います。
さらにこの２つの箱を入れる大きな箱をもう１つ作成する必要もあります。この大きな箱にはスタイルシートで２つの箱に適応する「float」を解除するコードをいれるだけの目的です。floatを解除しないとヘッダーの下のコンテンツのレイアウトが崩れたりするので必要になると思います。
以上の部分を実装していきますが、ちょっと数カ所処理が必要なので、現在のHTMLとスタイルシートはメモ帳などにコピーしておいて下さい。もし失敗した時に元に戻せるようにしておいて下さい（コレ重要です！）。
コピーができたら一度スタイルシートで自分で追加したコードの内、「.header」に記述した「background」系の記述は一度削除して保存しておいて下さい。後で改めて書きます。
まずは「HTML編集」のタブを選択して次の記述を探します（17行目くらい）。
```
<div class="l-wrapper">
<header role="banner" class="l-header">
```
これの直後に２つの箱を囲む大きな箱を作成します。次の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 alt="画像の説明文" src="画像のURL" width="200px" height="150px">
</div>
</div>
```
ここに直接画像を入れて高さと横幅を記述してしまいます。冒頭でも書いたように「 ” 」は全角ではなく「半角」です。これでHTMLの編集はOKです。
次にスタイルシートの編集タグに切り替えて次のコードを追加。
```
/* ヘッダー左（タイトルや説明文の箱） */
.header{
  width: 500px  /* タイトル・説明文の部分の横幅 */
  height: 150px; /* 同じく高さ */
  float:left;  /* 左にfloat */
  margin-right:20px; /* ２つの箱の間の距離 */
}

/* ヘッダー右（画像の箱） */
.gazou{  
  float:left; /* 画像をfloat */
}

/* float解除の記述 */
.oya:after{content:"";
  display:block;
  clear:both;
}
```
横に並べた２つの箱はどちらも「float:left」を使い、２つの箱の間隔を「margin-right」で調整してますので、数値は変更してもOKです。また、「header（左の箱）」の横幅を500pxにしてますが、ここは画像と並びを見ながら調整してみると良いかと思います。
注意点は横に並べた2つの箱の横幅の合計つまり「width（間隔のmarginも含む）」が全体の幅よりも大きくならないようにしないとレイアウトが崩れると思います。
一応上記のコードで保存し、サイトを表示させて「Ctrl」と「F5」を押してリロードして確認してみてください。
もしこれで反映されない場合には再度コメント頂けると助かります。またその際にはURLも教えて頂けると原因が分かりやすいと思います。コメント公開時にはURLは削除しますので、よろしくお願い致します。
あーより:
2015年8月2日 10:23 AM
大変わかりやすい記事をいつもありがとうございます！
参考にさせていただいております。
私は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; /* 画像の位置 */
}
ーーーーーーーーーーーーーーーーーーーー
しげぞうより:
2015年7月30日 12:51 PM
ガリゲー様
コメントありがとうございます。「Time line Green」はおそらく最近追加されたテンプレートかな？と思うのですが、若干違う部分がありますね。スタイルシートの一番下に次のコードを入れて試して下さい。
```
.header {
  height: 300px;  /* 画像の高さ */
  background-image:url("http://●●");   /* 背景画像 */  
  background-repeat:no-repeat;    /* 背景画像繰り返し */
}
```
背景画像の部分に画像のURLを入れて保存します。それでブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてみて下さい。もしそれで反映されない場合には再度コメント下さいませ！記事にも追記しておきます。
ガリゲーより:
2015年7月30日 11:56 AM
大変分かりやすい記事でいつも参考にさせたいただいております。
私はseesaaブログの初心者なのですが、新デザインシステムの「Time line Green」というテンプレを使用しております。ヘッダーに画像を貼りたいので、この記事どおりに試しているのですが、うまくいきません。以前使用していた「シンプルＡ.両カラム」ではうまくいってたんですが。ご回答いただければ幸いです。
しげぞうより:
2015年7月9日 10:03 AM
＞はるき様
コメントありがとうございます。おそらくキャッシュ（古いデータ）が残っているのが原因だと思います。一度自分のブログを表示させて「Ctrl」と「F5」を同時に押してリロードして確認してみて下さい。それで反映されない場合には別のブラウザで確認してみることをおすすめします。別のブラウザでヘッダー画像が消えていれば原因はブラウザのキャッシュだと思います。これはおそらく時間が経てば消えると思われます。
はるきより:
2015年7月9日 6:56 AM
よければ回答お願いします。シーサーブログの新システムで、ヘッダー画像を入れれたのですが、元に戻したいと思い、スタイルシートを初期に戻したのですが、プレビューでは戻っているのに、設定変更後にトップページを確認すると、ヘッダー画像が消えてくれません。初期に戻すだけでは消えてくれないのでしょうか。それともブログの反映が遅いだけでしょうか。お願いします。

12 3 次へ »