今回は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ブログのヘッダー画像をリンクにする方法でした。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
しげぞう様でも無理なんですね・・・
いろいろお手数おかけしました。
ありがとうございました。
風来坊様
返信ありがとうございます。このデザインはサムネイル（小）が表示される方ですね、サムネイルの大きいデザインでのやり方でした。。。。
このデザインの場合はもともと大きく表示させているものを位置を指定してはみ出す部分を非表示にするというCSSになってますので、ちょっと可能かどうかわかりません。専門家でもないのですみません。。しばらくトライしてみましたが私には無理っぽいです。
毎回、ＰＣのＣＳＳ変更直後に「Ctrl」と「F5」を一緒に押してリロード（再読込み）するようにしています。
今回は、それでもだめなので、下記コメントをいたいました。
今もリロードしましたが、トップ画面はやはり欠けたサムネイルのまです。
よろしくお願いします。
風来坊様
返信ありがとうございます。CSSでOKです。リロード（再読込み）して確認をお願いします。それでも反映されない場合にはURL教えてください。
ご教示ありがとうございます。
下記のソースコードをＰＣのＣＳＳに追加しましたが、トップ画面のサムネイルは変わらず欠けたままです。
CSSでなく、HTML編集に追加するのでしょうか？
風来坊様
返信ありがとうございます。あ、ホントですね、PCは全体が入っているかと思っていたら個別ページだけなんですね。トップページは確かに全体が入ってませんね。
アイキャッチ画像のサイズが統一されていると仮定して、以下のコードを追加して表示させる画像の高さを調整したら良いと思います。
トップページが大きなサムネイル画像のデザインで試したコードです。
[css]
.entry__thumbnail a {
height: 350px;
}
[/css]
一応350pxにしてますが、400pxとかでも試してみて下さい。
早速の返信ありがとうございます。
スマホページだけでなく、PCページでもサムネイル画像が欠けてしまうので、
PCページのHTML編集だけでも教えていただけると幸いです。
ちなみに、PCページのサムネイルが欠けてしまうのは、トップページで新着順の記事の各個別のアイキャッチ画像をもとにしたサムネイルです。表示倍率設定の問題だと思います。
サイドバーの記事一覧のサムネイルは縮小して全表示になるように、下記のとおり修正してうまく表示されています。
よろしくお願いします。
風来坊様
コメントありがとうございます。Seesaaブログのスマホページのサムネイル画像だと思うのですが、これはちょっと私もわかりません。可能かどうかもちょっと微妙です。
HTMLを編集できればかんたんなんですが、HTMLが編集できないため、CSSで無理やりって感じになります。ちょっと色々試してみたんですが私にはできませんでした。参考にならずすみません。
「サムネイル画像」の表示倍率の設定方法についてお伺いします。
ヘッダー画像とは話がそれるかもしれませんが、サムネイル画像関連の記事がないので、ここに投稿します。
デフォルト設定だと、トップ画面の記事一覧のサムネイル画像の倍率が大きすぎて、表示が画像全体に収まらず欠けてしまいます。
関連サイトを読み漁り、PC、スマホ画面ともに「サイドバー」の記事一覧のサムネイル画像はCSSに
.recent-entry__thumbnail img {
max-width: 100%;
height: auto;
}
を追加して何とか画像が欠けずに収まっています。
でも、トップ画像記事サムネイルの全表示設定方法がわからないので、よろしくご教示ください。
匿名様
コメントありがとうございます。選んだデザインによってカバー画像設定タブが無いものがあるみたいですね。ご指摘ありがとうございます。
今ちょっと追記したのですが、以下の方法で試してみて下さい。
カバー画像設定というタブがない場合には事前にヘッダー画像をアップロードしておいて、画像のURLを調べておきます。
⇒シーサーブログの画像URLを調べる方法
画像のURLが分かったらスタイルシート編集で一番下に次のコードを追加してヘッダー画像を設置できます。
.l-header { height: 300px; background-image:url(画像のURL); background-repeat:no-repeat; margin-bottom:0px; }※hieghtの数値で画像の高さを調整できます。
これもデザインによって若干違う部分があるかもしれませんのでもし反映されない場合にはお手数ですが、再度コメント頂けると助かります。
カバー画像設定というタブが出ない。なぜ？
みむ様
わざわざありがとうございます。リンクフリーなので全く問題ありませんし、むしろありがたいです。ありがとうございます、今後ともどうぞよろしく御願い致します。
はじめまして、みむ、と言います。こちらの記事のリンクを貼らせていただきましたので、ご報告いたします。私の認識違いや不愉快な点等、何かありましたら、訂正、削除させていただきますので、お手数をおかけしますが、ご連絡を頂けたらと思います。
電車猫様
わざわざ情報ありがとうございます。新旧が交じるとややこしいですね（笑）またしばらく様子をみて追記してみたいと思います。
はじめまして。
私もこの記事を読んで、「新システムに更新したのにカバー画像タブだけ見つからない」自体に陥っています。
私の調べでは、新デザインシステムでも「カバー画像タブ」があるものとないものが分かれているようで、どうやら旧デザインシステム風のデザインを選ぶと「カバー画像タブ」が表示されないようです（新デザインシステムであっても）。
2017年4月現在の情報で今度対応する可能性もありますがご参考までに。
ユース様
コメントありがとうございます。カバー画像の設定が見当たらないという事はお使いのデザインは旧デザインシステムではないかと思います。Seesaaブログでは従来のシステム（旧システム）と新デザインシステムがあります。こちらの記事は「新デザインシステム用」の記事ですので、旧デザインシステム版の記事で試してみて下さい。
旧システムでヘッダー画像を設置する方法はこちらの記事です。
⇒シーサーブログのヘッダーに画像を設定する方法