[topicpath]
seesaaブログテンプレート改造計画 > ヘッダー部分のカスタマイズ
2014年05月22日

シーサーブログのヘッダー部分に背景色をつける・変更する

 ヘッダー部分の背景色を指定してみよう。

 ブログネームや説明文が表示されるのがヘッダーの部分。

 この、ヘッダーの部分のバック(背景)に色をつけてみよう。

 テンプレートによっては、すでに画像が指定されていたりする場合もあるけど。

 スタイルシートをカスタマイズすると思い通りのヘッダー背景を表示することができる。

 

シーサーブログのヘッダー部分に背景色をつける・変更する

1、デザイン⇒デザイン設定⇒適応しているスタイルシートをクリック。

2、body{、#container{、#banner{に画像が指定されている場合はURLをコピーしてアドレスバーに貼り付け、ヘッダー部分の画像の場合は削除。

3、#banner{にカラーコードを指定する。

例)#banner{
 padding:0px 0px 0px 0px;
 margin-bottom:20px;BACKGROUND-COLOR: #808000;
}

4、保存ボタンをクリック。




2014年05月08日

シーザーブログの説明文の表示を各ページごとに変える

 シーサーブログの説明文を各ページごとに変えてみよう。

シーザーブログの説明文を各ページごとに変えた例

・カテゴリー『SEOカスタマイズのページの説明文』

seesaaブログのテンプレートをカスタマイズしてみます。
 無料で使うことのできるseesaaブログ。でもFC2ブログなどと比べると、カスタマイズの幅がいまいち。どこまでシーサーブログをカスタマイズできるのか試して見ます。

このページは SEOカスタマイズカテゴリーのページです。

 

 

・記事ページ『シーサーブログで、descriptionをページごとに変える 』

 seesaaブログのテンプレートをカスタマイズしてみます。
 無料で使うことのできるseesaaブログ。でもFC2ブログなどと比べると、カスタマイズの幅がいまいち。どこまでシーサーブログをカスタマイズできるのか試して見ます。

このページは シーサーブログで、descriptionをページごとに変えるについてのページです

 

 

・過去ログのページ

seesaaブログのテンプレートをカスタマイズしてみます。
 無料で使うことのできるseesaaブログ。でもFC2ブログなどと比べると、カスタマイズの幅がいまいち。どこまでシーサーブログをカスタマイズできるのか試して見ます。

このページは seesaaブログテンプレート改造計画の過去ログページです。

 

 

 とまあ、こんな感じに説明文をカスタマイズしてみよう。

 『seesaaブログのテンプレートをカスタマイズしてみます。
 無料で使うことのできるseesaaブログ。でもFC2ブログなどと比べると、カスタマイズの幅がいまいち。どこまでシーサーブログをカスタマイズできるのか試して見ます。』の部分は、シーザーブログの記事設定のブログの説明に記載している部分。

 

 その部分の下に、それぞれのページの説明文が入り、かつ、トップページのリンクが左に寄せて入っている構成。

 

シーザーブログの説明文を各ページごとに変える

1、デザイン⇒HTML⇒適応しているHTMLのタイトルをクリック。
*初めてHTMLのカスタマイズをするときには、デザイン⇒HTML⇒HTMLの追加⇒HTMLの名前を付ける。

2、HTMLの中身をコピーしテキストエディタに貼り付ける。

3、<% content_header %>を検索。

4、<% content_header %>の下に、以下のHTMLを貼り付ける。

<div style="text-align:center;">
<p><% if:page_name eq 'category' %> このページは
<strong><span style="font-size:large;"><span style="color:#c4913c;">
<% extra_title %>
</span></span></strong>カテゴリーのページです。
<% /if %>
<% if:page_name eq 'article' %> このページは
<span style="font-size:large;"><strong><span style="color:#c4913c;">
<% extra_title %>
</span></strong></span>についてのページです
<% /if %>
<% if:page_name eq 'archive' %> このページは

<strong><span style="font-size:large;"><span style="color:#c4913c;">
<% blog.title %>の過去ログページ
</span></span></strong>
です。<% /if %>
<% if:page_name eq 'tag' %> このページは <strong><span style="font-size:large;">  <% extra_title %>タグページ</span></span></strong><% /if %>
</p></div><div style="text-align:right;">
<a href="<% blog.page_url %>"><% blog.title %>のトップページへ戻る</a>
</div>

 大事なのは赤い太字で記載した部分。

 他は、装飾です。

5、保存をクリック。

 初めてHTMLをカスタマイズしたときは、保存したHTMLを適応。

*タグページ用のも追加しました。


最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。