テンプレート、「カスタム・全部のせ」のヘッダー画像カスタマイズ解説ページです。
デフォルトではブログタイトルの部分に帯が入る仕様になっています。しかし、ヘッダー画像を差し替えたとき帯が邪魔になることもあろうかと思います。
これの消し方の解説をしています。
まずは、FC2ブログ管理画面にログインし、「テンプレートの設定」ページを開きます。
すると、以下のような画面に切り替わります。
このハイライト部分「castam_all のスタイルシート編集」に注目してください。
ここで、以下の文章で画面内検索（Ctrl + F）を行います。
検索すると、上図のような文章が出てきます。
まず、赤字部分を削除します。
そして、太字の「FFF」の部分を、「000」や「000000」など、好きなカラーコードに変えます。これは、タイトルの文字色になっています。「#」を忘れないようにしてください。
カラーコードがよく分からない方は、こちらも参照してください。
RGBカラー・色の基本
デフォルトではブログタイトルの部分に帯が入る仕様になっています。しかし、ヘッダー画像を差し替えたとき帯が邪魔になることもあろうかと思います。
これの消し方の解説をしています。
CSSの編集
まずは、FC2ブログ管理画面にログインし、「テンプレートの設定」ページを開きます。
すると、以下のような画面に切り替わります。
このハイライト部分「castam_all のスタイルシート編集」に注目してください。
ここで、以下の文章で画面内検索（Ctrl + F）を行います。
/* ヘッダー
---------------------------------------------------------*/
/* ヘッダータイトル */
.title{
padding:0 20px;
background:#73695d;
border-top:2px solid #000;
border-bottom:2px solid #000;
}
.title h1{
font-size:20px;
letter-spacing:-1px;
}
.title a{
color:#fff;
}
---------------------------------------------------------*/
/* ヘッダータイトル */
.title{
padding:0 20px;
border-top:2px solid #000;
border-bottom:2px solid #000;
}
.title h1{
font-size:20px;
letter-spacing:-1px;
}
.title a{
color:#fff;
}
検索すると、上図のような文章が出てきます。
まず、赤字部分を削除します。
そして、太字の「FFF」の部分を、「000」や「000000」など、好きなカラーコードに変えます。これは、タイトルの文字色になっています。「#」を忘れないようにしてください。
カラーコードがよく分からない方は、こちらも参照してください。
RGBカラー・色の基本
スポンサーリンク
Sun.03.20.2011
Comment
206
ヘッダータイトルの帯を消したい
Cute-chokolateのカスタマイズです。タイトルの帯を消したいのです。スタイルシートの検索に「ヘッダータイトル」が見当たりません。どの部分を削除すればいいのでしょうか。初心者です。
207
Re: ヘッダータイトルの帯を消したい
Cute-chokolateのの場合、HTMLとCSSの一部を削除します。
HTML
//////////////////////////////////////
<!--●一番上のヘッダー●-->
<div id="header">
<div class="header_inner">
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
</div>
<div class="line-middle"></div>
<div class="intro_inner">
<p class="intro"><%introduction></p>
</div>
</div>
<div class="line-bottom"></div>
//////////////////////////////////////
CSS
//////////////////////////////////////
/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
color:#333;
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro","メイリオ";
}
#header{
background:#877;←（好きなカラーコードに。削除すれば透明になります）
}
:
:
:
:
#header h1 a{
color:#dcc; ←（タイトルのリンク色）
}
#header h1 a:hover{
color:#ccf; ←（マウスホバー時のリンク色）
}
.intro_inner{
background:#dcc; ←（削除で透明に。）
}
.intro{
width:820px;
font-size:12px;
padding:5px 0;
margin:0 auto;
text-align:left;
}
//////////////////////////////////////
ちょっと大変ですが、健闘をお祈りします。
HTML
//////////////////////////////////////
<!--●一番上のヘッダー●-->
<div id="header">
<div class="header_inner">
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
</div>
<div class="intro_inner">
<p class="intro"><%introduction></p>
</div>
</div>
//////////////////////////////////////
CSS
//////////////////////////////////////
/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
color:#333;
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro","メイリオ";
}
#header{
background:#877;←（好きなカラーコードに。削除すれば透明になります）
}
:
:
:
:
#header h1 a{
color:#dcc; ←（タイトルのリンク色）
}
#header h1 a:hover{
color:#ccf; ←（マウスホバー時のリンク色）
}
.intro_inner{
background:#dcc; ←（削除で透明に。）
}
.intro{
width:820px;
font-size:12px;
padding:5px 0;
margin:0 auto;
text-align:left;
}
//////////////////////////////////////
ちょっと大変ですが、健闘をお祈りします。
Trackback
Trackback URL
Comment Form
質問するときは？
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
- 不具合が出ているページのURLを書き込む。
- 使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
- 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
