今回はSeesaaブログのヘッダーに画像を設置する方法と、ブログのタイトルや説明文を削除（非表示に）する方法を紹介していきます。
ヘッダー画像が変わるとサイトへの印象もグッと変わります。
先にヘッダー画像の準備をしておく
ヘッダーの画像は準備しておく必要がありますが、ブログの幅を知っておかないとちょうどいいサイズになりません。全部のデザインを調べた訳ではないですが、大体初期状態ではこんな感じの横幅になっている場合が多いです。
- 右サイドバーもしくは左サイドバー（2カラム）の場合：960px
- 両サイドバー（3カラム）の場合：1180px
という訳なので画像はそれぞれブログの幅に合わせたサイズを準備。大きい分なら問題はありませんが、横幅がブログの幅よりも小さい画像は横のスペースが余っちゃうのでできればちょうどのサイズか少し大きめの画像がいいかなと思います。
高さに関しては後で調整できますが、おすすめは250px～300pxくらい。あまりに高さがあるとメインコンテンツまで遠くなります。
フリーの画像サイトなどから素材となる画像を見つけておいて下さい。この記事も参考になるかも？
⇒アイキャッチ画像に使える無料の写真素材サイト【クレジット表記不要】
画像の用意ができたらヘッダー画像を設定していきます。画像加工（文字入れなど）が必要なら先に加工を。バナー工房が無料で使えて便利です。
Seesaaブログへのヘッダー画像の設置方法と手順
まず、Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックし、「カバー画像設定」というタブがあるのでこれをクリック（このタブがない場合は後述します）。
それで「クリックもしくはここにファイルをドロップ」の部分をクリックして使いたいヘッダー画像のファイルをアップロード。すでにアップロードされている場合には下に画像が並んでいると思いますので使いたい画像をクリック。
選択した画像が大きく表示されます。画像の上でドラッグすると枠が広がるのでこれをいっぱいに上下いっぱいに広げ、使いたい範囲を指定して「切り取りを実行」をクリック。
すると設定画面になって、ブログタイトルの文字色や説明文の色なども調整できます。
これだとタイトルや説明文がちょっと邪魔ですね。なので、これはブログタイトルや説明文の色を変更するよりも「タイトルの位置を移動する」か「タイトルや説明分は消す」ほうが見た目はいいかも。これの対処方法も後半紹介します。
ナビメニューとの余白がある場合
グローバルナビ（ナビメニュー）を設置している方はヘッダー画像も設定するとナビメニューとヘッダー画像の間に余白ができている場合があります。
その場合はスタイルシートに以下を追加して余白をなくす事ができます。
.l-header {margin-bottom: 0 !important;}カバー画像という設定がないデザインの場合
カバー画像設定というタブがない場合には事前にヘッダー画像をアップロードしておいて、画像の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ブログのヘッダー画像をリンクにする方法でした。
コメント
しげぞう様でも無理なんですね・・・
いろいろお手数おかけしました。
ありがとうございました。
風来坊様
返信ありがとうございます。このデザインはサムネイル（小）が表示される方ですね、サムネイルの大きいデザインでのやり方でした。。。。
このデザインの場合はもともと大きく表示させているものを位置を指定してはみ出す部分を非表示にするというCSSになってますので、ちょっと可能かどうかわかりません。専門家でもないのですみません。。しばらくトライしてみましたが私には無理っぽいです。
毎回、ＰＣのＣＳＳ変更直後に「Ctrl」と「F5」を一緒に押してリロード（再読込み）するようにしています。
今回は、それでもだめなので、下記コメントをいたいました。
今もリロードしましたが、トップ画面はやはり欠けたサムネイルのまです。
よろしくお願いします。
風来坊様
返信ありがとうございます。CSSでOKです。リロード（再読込み）して確認をお願いします。それでも反映されない場合にはURL教えてください。
ご教示ありがとうございます。
下記のソースコードをＰＣのＣＳＳに追加しましたが、トップ画面のサムネイルは変わらず欠けたままです。
CSSでなく、HTML編集に追加するのでしょうか？
風来坊様
返信ありがとうございます。あ、ホントですね、PCは全体が入っているかと思っていたら個別ページだけなんですね。トップページは確かに全体が入ってませんね。
アイキャッチ画像のサイズが統一されていると仮定して、以下のコードを追加して表示させる画像の高さを調整したら良いと思います。
トップページが大きなサムネイル画像のデザインで試したコードです。
[css]
.entry__thumbnail a {
height: 350px;
}
[/css]
一応350pxにしてますが、400pxとかでも試してみて下さい。