上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 ヘッダー画像を着せ替え・カスタマイズしたとき、タイトルが背景色と同化して見えにくくなる場合があります。
 そのとき、考えられる3種類の対処法をご紹介。

一、ヘッダータイトルを外す。
二、ヘッダータイトルカラーを変える。
三、画像ロゴに置き換える。


ヘッダータイトルを外す。


 これは、一番簡単です。SEO上も問題ありません。実は、すでにヘッダーの上の一番上の帯にある小さめのタイトルが<h1>要素となっています。そのため、二番目のタイトル表示には特に「強調」の意味は持たせてありません。
 重複表示なので、細かいSEO対策を施したい方は逆に消した方がいい結果がでる可能性もあります。

消し方

 テンプレート設定「HTMLの編集」ボックス部分の、以下の赤字の部分を消去します。

<div id="conteinar">
<div id="banner">
<table class="tb_header" width="960px" height="80px">
<tr><td class="tb_banner_left">
<a href="<%url>" title="<%blog_name>">
<!--▼▼▼▼ヘッダー画像▼▼▼▼-->

<%blog_name>

<!--▲▲▲▲ヘッダー画像▲▲▲▲-->
</a>

<td class="tb_banner_right" width="468px">
<!--▼▼▼▼ヘッダーアド&ブログパーツ(最大468px)▼▼▼▼-->


<!--▲▲▲▲ヘッダーアド&ブログパーツ(最大468px)▲▲▲▲-->
</table>
</div>



タイトルカラー(文字色)を変える

 文字色を変え、コントラストを出す場合は、「スタイルシートの編集」ボックスの赤字の部分を修正します。

/* ------------------------------------▼▼▼ヘッダーバナー(タイトル)のフォント制御 */
.tb_banner_left{
padding:0 5px;
text-align:center;
}
.tb_banner_left a{
font-family:MS 明朝,selif;
font-size:24px;
font-weight:bold;
letter-spacing:-4px;
text-align:left;
color:#fff;
}
/* ------------------------------------▲▲▲ヘッダーバナー(タイトル)のフォント制御 */


 この「fff」は、RGBカラーコードで、「数字の1~9、英字のa~f」で指定します。基本色は以下にあります。

fffccc999666333000

 カラーコードの詳しい説明はコチラ。
RGBカラー・色の基本


タイトルロゴを変える

 この場合は、背景画像に直接「画像編集ソフト」などで、ロゴを書き加える方法があります。
 背景画像の変え方は、コチラでの方法と同様になります。
ヘッダー素材とカスタマイズ
*ヘッダーエリアのサイズは、デフォルトで「960 x 80px」となっています。

■ロゴに「トップページ」へのリンクを施したい場合は?

 ウェブページでは、訪問者様は殆どの場合「タイトルロゴをクリックすると、トップページに戻れる」と思う方がほとんど。
 しかし、今回の方法は少々邪道なので、あまりお勧めできないかも…

以下の方法で、ヘッダータイトル付近をリンクに出来ます。

 テンプレート設定「HTMLの編集」ボックス部分の、以下の赤字の部分を変更します。

<div id="conteinar">
<div id="banner">
<table class="tb_header" width="960px" height="80px">
<tr><td class="tb_banner_left">
<a href="<%url>" title="<%blog_name>">
<!--▼▼▼▼ヘッダー画像▼▼▼▼-->

<div style="width:400px;height:80px;"> </div>

<!--▲▲▲▲ヘッダー画像▲▲▲▲-->
</a>
<td class="tb_banner_right" width="468px">
<!--▼▼▼▼ヘッダーアド&ブログパーツ(最大468px)▼▼▼▼-->


<!--▲▲▲▲ヘッダーアド&ブログパーツ(最大468px)▲▲▲▲-->
</table>
</div>

 この「<%blog_name>」を以下のタグに置換えます。

<div style="width:400px;height:80px;"> </div>




■どうしても分からない場合は?
 以下のコメント欄からご質問ください。どんなに重複質問になっても、どんなに簡単な質問でも、どんなに初歩的な問題でも大丈夫☆
このエントリーをはてなブックマークに追加
Sun.04.04.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。