ページTOPへ

Seesaaブログ【新システム】のヘッダー画像を設置する方法

Seesaaブログ【新システム】のヘッダー画像を設置する方法



当サイトからご購入の方に豪華特典付き!






Seesaaブログ【新システム】のヘッダー画像を設置する方法

 

2015年5月12日にSeesaaブログに新システムが導入されました。

 

デザインは今のところ「シンプル〜」と名の付いたもののみです。デフォルト状態も旧デザインの「シンプル」よりもすっきりしていて、カスタマイズしやすそうです。

 

10月頃、Seesaaブログはカバー画像を設定・表示する機能を導入することによって、ヘッダー画像への設置は簡単になりました、この機能は新デザインシステムで作成されたブログでのみ利用できます、それ以外のブログでは利用できません。

 

 

ここではこの機能を利用して、ヘッダー画像を設置する方法を説明したいと思います。

 

 

Seesaaブログ【新システム】のヘッダー画像を設置する手順

 

 

ステップ1、画像の準備

 

デフォルト状態では横幅はこんな感じです:

 

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

 

ですので、画像はそれぞれブログの幅に合わせたサイズを準備しましょう。

 

高さに関しては後でスタイルシートで調整できます、おすすめは250px〜300pxくらいです。

 

 

ステップ2、ヘッダー画像の設置

 

まず、Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したいデザインテンプレートのタイトル」をクリックします。

 

 

 

 

カバー画像が設定できるテンプレートの場合、ここで「カバー画像設定」というタブが表示されますので、それをクリックします。(注:デザインテンプレートによってはカバー画像が設定できないものもあります。その場合にはタブが表示されません。

 

 

 

 

それで「クリックもしくはここにファイルをドロップ」の部分をクリックして使いたいヘッダー画像のファイルをアップロードします。

 

すでにアップロードされている場合には下に画像が並んでいると思いますので使いたい画像をクリックします。

 

 

 

 

ここでは初期値【画像を切り取る】【元画像は使用しない】にチェックが入った状態です。

 

【画像を切り取る】にチェックを入れた状態で画像を選択したので、切り取りを行う画面が表示されます。

 

画像の上でドラッグすると枠が広がるので、これをいっぱいに広げます。最後に「切り取りを実行」ボタンをクリックします。

 

すると、カバー画像の詳細設定を行う画面が表示されます。ここではブログタイトルやブログ説明文の文字色を変えることができます。

 

 

 

 

背景画像を「そのままのサイズで表示」に変更して、最後に「保存」ボタンをクリックすると、ヘッダー画像が設定されます。

 

 

確認すると、下のようになっています、これだとタイトルや説明文が邪魔ですね。ですので、続いてタイトルや説明文を消します。

 

 

 

 

 

ステップ3、タイトルや説明分は消す方法

 

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「設定したいデザインテンプレートのタイトル」⇒「スタイルシート編集」をクリックします。

 

 

 

 

「スタイルシート編集」CSSの最後に以下のコードを追加して下さい。

 

 

/* ブログタイトルとブログ説明文を消す */
.header h1{
display:none;
}
.header .description{
display:none;
}

 

確認したら、綺麗に消しました。

 

 

 

 

以上Seesaaブログ【新システム】のヘッダー画像を設置する方法でした。

 

 

関連ページ

Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法
Seesaaブログ【新システム】のヘッダー画像の下にメニューバーを設置する方法について解説します。
Seesaaブログ新デザインシステムのパンくずリストを設置する方法
Seesaaブログ新デザインシステムのパンくずリストを設置する方法について解説します。
Seesaaブログ【新システム】の背景や文字を自由に変更する方法
Seesaaブログ【新システム】の背景や文字を自由に変更する方法について解説します。
Seesaaブログ【新システム】をSearch Consoleと連携させる方法
Seesaaブログ【新システム】をSearch Consoleと連携させる方法について解説します。
Seesaaブログにファビコンの作成と設置方法【新システム】
Seesaaブログにファビコンの作成と設置方法について解説します。

初心者でも月10万円

カテゴリー


ホーム 初心者のための講座 お小遣いサイト攻略法 お役立ち情報 初心者のための教材