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

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

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

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

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

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

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

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

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

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

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

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

バナー工房

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

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

Seesaaカバー画像の設定

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

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

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

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

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

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

MEMO

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

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

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

ヘッダー画像下の余白

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressの始め方
にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

ブログの更新はこちらから

Seesaaブログのヘッダーに画像を設置してブログのタイトルや説明文を消す方法”に46件のコメントがあります。

コメントの反映には時間がかかる場合があります。

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

CAPTCHA


  1. 風来坊

    しげぞう様でも無理なんですね・・・

    いろいろお手数おかけしました。
    ありがとうございました。

  2. しげぞう 投稿作成者

    風来坊様

    返信ありがとうございます。このデザインはサムネイル(小)が表示される方ですね、サムネイルの大きいデザインでのやり方でした。。。。

    このデザインの場合はもともと大きく表示させているものを位置を指定してはみ出す部分を非表示にするというCSSになってますので、ちょっと可能かどうかわかりません。専門家でもないのですみません。。しばらくトライしてみましたが私には無理っぽいです。

  3. 風来坊

    毎回、PCのCSS変更直後に「Ctrl」と「F5」を一緒に押してリロード(再読込み)するようにしています。

    今回は、それでもだめなので、下記コメントをいたいました。

    今もリロードしましたが、トップ画面はやはり欠けたサムネイルのまです。

    よろしくお願いします。

  4. しげぞう 投稿作成者

    風来坊様

    返信ありがとうございます。CSSでOKです。リロード(再読込み)して確認をお願いします。それでも反映されない場合にはURL教えてください。