Pocket

藤田です^ ^

 

シーサーブログでブログを作ると

デフォルト(初期状態)でブログタイトルと説明文が書いてあるだけです

 

これだとちょっと寂しいですよね^_^;

 

そこで今回はシーサーブログで

ヘッダー画像を適用、変更する方法を解説していきます

 

 

ヘッダー画像を準備する

まずはヘッダー画像に設定する画像を準備します

 

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

 

大きい分なら問題はありませんが

横幅がブログの幅よりも小さい画像は

 

横のスペースが余っちゃうのでできれば

ちょうどのサイズか少し大きめの画像がいいです

 

高さに関しては後で調整できますが

おすすめは250px~300pxくらいです

 

ヘッダー画像の設置

Seesaaブログの管理画面から

「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリック

「カバー画像設定」というタブがあるのでこれをクリック

「クリックもしくはここにファイルをドロップ」の部分をクリックして

使いたいヘッダー画像のファイルをアップロードします

 

すでにアップロードされている場合には

下に画像が並んでいると思いますので使いたい画像をクリック

選択した画像が大きく表示されます。画像の上でドラッグすると枠が広がるのでこれをいっぱいに上下いっぱいに広げます

枠を広げたらその枠自体をドラッグして移動できるので、使いたい範囲に移動して「切り取りを実行」をクリックしてください

 

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

 

設定が終わったら保存をクリック

これでヘッダー画像が追加されているはずです

画像の中にブログタイトルが既に入っている場合

元からあったブログタイトルと説明文がダブってしまって

見栄えが最悪になります

 

後ほどブログタイトルと説明文を消す方法を

解説します

 

カバー画像設定というタブがない場合

カバー画像設定というタブがないことがあります

その場合は

事前にヘッダー画像をアップロードしておいて

画像のURLを調べておきます

 

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

シーサーブログの画像URLを調べるには

まず使いたい画像をアップロードします

 

シーサーブログの管理画面から「ファイルマネージャ」をクリック

「参照」をクリックして画像ファイルを選択し、「アップロード」をクリックします。

画像のURLを調べる

アップロードした画像が表示されているので画像をクリックするか

ファイル名をクリック。これはどちらでも同じ画面が開きます

開いた画面にアップロードした画像がありますよね

この下に書かれている「http」からはじまるURLが画像のURLです

画像のURLがわかったら

画像のURLが分かったらスタイルシート編集で

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

.l-header {
height: 300px;
background-image:url(画像のURL);
background-repeat:no-repeat;
margin-bottom:0px;
}

 

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

邪魔なブログタイトルと説明文を消す方法

既に画像の中にブログタイトルが含まれていると

元あったブログタイトルとダブってしまい見栄えが最悪になってしまいます

 

そこで元のブログタイトルを削除する方法を書いていきます

「デザイン」⇒「デザイン設定」⇒「スタイルシート編集」とクリック

 

 

シーサーブログの新デザインシステムのスタイルシートの一番最後へ
この一文 を加えて保存すれば、邪魔なブログタイトル、説明文が消えているはずです

h1 {
font-size: 2em;
margin: 0.67em 0;
display: none;
}

 

以上シーサーブログのヘッダー画像を適用、変更する方法でした

 

藤田でした

 

Pocket