テンプレートマニュアル

※クリックすると該当箇所に移動します

 

 

 

 

はじめに

 

ヘッダー画像の横幅は次のようになります。

• 2カラム：横幅 980 px
• 3カラム：横幅 980 px

 

画像はSeesaaにアップロードが必要です。

 

アップロードした画像は次のようなURLになります。

※URLはアップロード後に画像をクリックすると確認できます。

 

 

 

 

1．CSSでヘッダー画像を入れる

 

【1】書き替えした CSS で設定します。次の記述を見つけてください

 

■デザイン設定 のところにあります。

 

/*ヘッダー内側*/
#header-in {
width:980px;
height:150px;
}

 

 

【2】次の記述に変更してください

●ソースをダブルクリックしてその状態でコピーしてください

●Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。

 

/*ヘッダー内側*/
#header-in {
background:url(画像URL)no-repeat;
width:980px;
height:150px;
}

 

※画像URLは実際の画像のURLに変更してください。

※上記は画像サイズが横980px・縦150pxの場合の入力例です。

※ no-repeat は画像を繰り返さないの指定です。
　画像を繰り返すときは no-repeat を削除ください。

 

 

【3】元々のヘッダー画像を削除する

 

次の記述を削除してください。

■デザイン設定 のところにあります。

 

/*ヘッダー外側*/
#header {
background:url(http://officehidezo.up.seesaa.net/image/3blue_hederbanner.png) bottom repeat-x;
}

 

 

【4】タイトル・説明文の位置を調整する（必要に応じて）

 

ヘッダー画像によってはタイトル・説明文の位置の変更が必要になります。

 

書き替えした CSS で設定します。次の記述を見つけてください。

■デザイン設定 のところにあります。

 

/*ブログタイトルの文字位置*/
.blog_title {
padding:55px 10px 0 10px;
text-align:left;
}
/*ブログ説明文の文字位置*/
.blog_introduction {
padding:0 10px 0 10px;
text-align:left;
}

 

padding の記述を変更します。

数値は左から 上余白 右余白 下余白 左余白 となります。

（例）padding:15px 10px 5px 10px;

 

 

【5】文字色を調整する（必要に応じて）

 

ヘッダー画像によってはタイトル・説明文の文字色の変更が必要になります。

 

書き替えした CSS で設定します。次の記述を見つけてください。

■デザイン設定 のところにあります。

 

/*ヘッダーの文字色*/
.blog_title a,.blog_introduction {
color:#fff;
}
/*ヘッダーの文字色(ホバー時)*/
.blog_title a:hover {
color:#ffff00;
}

 

color の記述を変更します。

例えば「黒」にするなら color:#111; に変更してください。

※参考：カラーコード表　http://www.colordic.org/

 

 

 

 

2．HTMLでリンクありヘッダー画像を入れる

 

ブログタイトルや説明文の表示があるヘッダー画像を入れて、さらに、
画像にトップページのリンクを貼るときは HTML を変更します。

 

 

【1】書き替えした HTML で設定します。次の記述を見つけてください

 

<!-- ▼ブログタイトル▼ -->
<div id="header"><div id="header-in">
<p class="blog_title"><a href="<% blog.page_url -%>" title="<% blog.title -%>"><% blog.title -%></a></p>
<p class="blog_introduction"><% blog.description -%></p>
</div></div>
<!-- ▲ブログタイトル▲ -->

 

 

【2】次の記述に変更してください

●ソースをダブルクリックしてその状態でコピーしてください

●Google Chromeは ドラッグ でコピーしてください。ダブルクリックしてコピーすると文字化けします。

 

<!-- ▼ブログタイトル▼ -->
<div id="header" style="background:none;">
<div id="header-in" style="padding:0 0 15px 0;width:auto;height:auto;">
<a href="<% blog.page_url -%>" title="<% blog.title -%>">
<img src="画像URL" alt="<% blog.title -%>" />
</a>
</div></div>
<!-- ▲ブログタイトル▲ -->

 

※画像のURLは実際の画像のURLに変更してください。

 

 

画像サイズを調整するとき

 

この記述を、

<img src="画像のURL" alt="<% blog.title -%>" />

 

　↓　次の記述に変更してください。

 

<img src="画像URL" alt="<% blog.title -%>" width="900" height="100" />

 

※ width="900"が横幅、height="100"が縦幅です。pxを付けない数値だけを入力します。