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

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

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

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2020.04.21

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

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

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

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

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

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

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

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

⇒バナー工房

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

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

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

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

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

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

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

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

.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を始めるのに必要な物や料金
• ⇒シーサーブログカスタマイズまとめ【新システム版】
• ⇒無料ブログを続ける事のデメリットと危険性
• ⇒アフィリエイトの始め方と稼ぐ方法のまとめページに戻る