タイトルバナーのブログ名・説明文を非表示にしよう！ [実践編：ヘッダー]
説 明
予めブログ名の入ったタイトルバナー用の画像を作成し、ブログ名およびブログ説明文を非表示（消す）にします。
完成形
※ 本記事では「サイン」スキンをベースに使用しています。
準 備
サンプルでは次の画像を使います。（768×248pixel）
編 集
１画像をタイトルバナー部に挿入する
#containerを変更します。
注）スキンによっては#bannarの場合もあります。
ソースコード：
#container {
：
：
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat;
}
：
：
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat;
}
※ 背景色（ソースコードの「#FFFFFF」部）は必ず指定してください。
画像の下が表示されていないため、#bannar内のheightを調整します。
私が用意した画像は768×248ピクセルなので、次のように変更します。
ソースコード：
#banner {
height:248px;
：
：
}
height:248px;
：
：
}
※ 単位の[px]を書き忘れないように！
２ブログ名およびブログ説明文を消す
#banner h1、#leadを変更します。
まず、ブログ名を非表示にします。
ソースコード：
#banner h1 {
：
：
visibility:hidden;
}
：
：
visibility:hidden;
}
次にブログ説明文を非表示にします。
ソースコード：
#lead {
：
：
visibility:hidden;
}
：
：
visibility:hidden;
}
以上。
画像について
タイトルバナーに使用する画像を作る場合のバナーの幅は、ベーススキンのタイトルバナーと同じ幅か、もしくはスキン編集で#container内に書かれているwidthの値と同じ幅にすることをオススメします。作成した画像の幅に合わせてスキンの幅を変えるのは、レイアウトが崩れる原因となります。
尚、タイトルバナーの作り方については、私の力量の関係上お教えすることは出来ませんのでご了承ください。
関連項目
■ 【背景】background [リファレンス]
■ 【配置】visibility [リファレンス]
■ タイトルバナーに写真を入れよう！ [実践編：ヘッダー]
■ タイトルバナー全体に写真を貼り付けよう！ [実践編：ヘッダー]
はじめまして！！
こちらを参考に、ブログ名・説明文を非表示にしてかっちょイイバナーに仕上げることができました（＾＾
ありがとうございます（＾＾
by teru (2008-12-10 18:49)
＊ teruさん ＊
はじめまして。ようこそ♪
ブログ、拝見させていただきました！
ホント、カッチョイー♪
あまりのカッチョ良さに、niceポチッと押させていただきました。
押し逃げ、お許しくださいね。(^^;;
少しでもお役に立てたみたいで、良かったです。(^^)
by かほりん (2008-12-10 19:24)
初めまして、ムーと申します。
二、三年前にお世話になっていたブログには、この方法が載っていたのですが、突然閉鎖してしまって・・・
いつも見ているところにも載っていなかったので、本当に助かりました(そのいつも見ているところの方から教えていただきました
これからも、たまに見に来ると思います(´ω`)
by ムーちゃん (2009-03-24 19:01)
＊ ムーちゃんさん ＊
初めまして♪ようこそ〜！
ちょっとでもお役に立てたようで、私も嬉しいです。(^^)
見ていたところが閉鎖って悲しいですよね。
また新しいところを探すのも大変ですものね。
ここはしばらく閉鎖する予定はないですから（というか、まだ始まったばかりだし！）、良かったらまたいらしてくださいね♪
by かほりん (2009-03-24 19:10)
初めましてっ
ずいぶん前の記事にコメントを入れるのも迷惑かな・・・？
と思ったのですが記事にあったコメントを入れたほうがいいと思ったのでこちらに書きます・・・。
迷惑だったら、すみません；；
自分のブログの質問なんですがタイトルバナーの幅が９００だったので、きちんと作ったタイトルバナーも幅９００にしたんです。
しかし画像が縮小されてしまっていて大きくタイトルいっぱいに表示できません；；
どうしたらいいんでしょうか・・・？
初めてなのに質問ですみません
ps,いつも参考にさせていただいてます
by まかの (2009-04-10 20:41)
＊ まかのさん ＊
はじめまして♪(^^)
気になった記事にコメントいただいた方が私としてもわかりやすいので、全然迷惑じゃないですよ！
同じことで悩んでいる方の参考にもなりますしね。(^^)b
質問の件ですが、サイズが合わない場合、切れてしまうことはあっても縮小されることはないと思うんですが・・・？
ブログを拝見しましたが、現在使用している背景画像がおっしゃっているタイトルバナーでしょうか？
だとしたら、画像の幅が350pxしかないので縮小されているように見えるのかもしれません。
作成するときに「900px」で作成せず、例えば「900mm」とか、単位が異なっている可能性がありますので、確認してみてください。(^^)b
これからもよろしくお願いしますね！
by かほりん (2009-04-10 21:28)
まかのです。たびたびすみません；；
画像を確認したらきちんと900×215ピクセルとなっていました・・・。
タグが変なのでしょうか？？
とりあえずご報告だけなのですが何かわかったらお願いしたいです。
がぞうの大きさを変えても同じ大きさで縮小されたように見えます。
本当にたびたびすみませんorz
by まかの (2009-04-13 19:38)
＊ まかのさん ＊
まかのさんのブログの方に書かせていただきましたが、一応、こちらにも整理して書いておきますね。
原因はファイルの一覧を表示している領域にある「サムネイル画像表示」のチェックボックスにチェックが入っていることです。
ここにチェックが入っていると、スキン編集画面にファイルを挿入すると、ファイル名の先頭に「m_***」とついたファイル名のものが表示されます。
これが付いているファイル名の画像はサムネイル画像なので、小さく表示されるので注意が必要です。
尚、チェックが入った状態でアップロードされた画像そのものは縮小してアップロードされているわけではない（元の大きさのまま）ようなので、再アップロードの必要はありません。
【対処法】
「サムネイル画像表示」のチェックボックスのチェックを外し、スキン編集画面にファイルを挿入し直してください。
このとき、ファイル名の先頭に「m_」が付いてないことを確認しましょう。
以上で解決されると思われます。
もう少し詳しく検証し、後日、本ブログ内にも注意事項として掲載したいと思います。
まかのさんの問題、これで解決しますように♪
by かほりん (2009-04-16 22:59)
こんにちは、まかのです。
画像の件、本当に有難うございました！！
無事解決しました！！！！
ご迷惑おかけしてすみません。それにお返事が大変遅くなってしまってすみませんでした。
学校や塾などいろいろあってしばらくＰＣが出来ない状態だったんです・・・。
ここまでかほりんさんがしてくださったのにお返事が遅くなるなんて、本当にすみません；；
それでやっぱりチェックボックスを解除したら無事縮小されずに表示されました＾＾
ソネブロは前々からやっていてタグでオリジナルスキンを作ってたりしていたんですが、新しくなって(？)から使い慣れていなくて・・・。
こんな単純なミスですみませんでした・・・。
しかもわざわざまかののブログにコメント書いてくださったりもして・・・・。
本当に有難うございました！
これからも利用させていただきたいので、お願いします。
by まかの (2009-05-02 13:22)
＊ まかのさん ＊
無事解決して良かったですぅ。(^^)
私も良い勉強になりました。
こういう簡単なところにもワナ？が潜んでいるんですね。(^^;;
まかのさんはいろいろご存じそうなのでココ（初心者用）で参考になることはあまりないんじゃないかと思いますが、また遊びに来てくださ〜い！(^^)/
by かほりん (2009-05-02 21:37)
はじめまして！秋沙と申しますっ
他のブログを参考にしながらやってたんですけど、
なかなか出来なかったので検索してたらここが出てきたので
参考にさせていただきました！
ありがとうございました！！
by 秋沙 (2011-09-03 21:45)
＊ 秋沙さん ＊
ハジメマシテ☆
お役に立てたようで嬉しいです〜♪
これからもヨロシクお願いしますね！(^^)/
by かほりん (2011-09-03 22:24)
はじめまして。
ブログを少し変えたいな、と思っていたらこのブログにたどり着きました！
おかげでいろいろ参考になりました！！
ありがとうございました(*^▽^*)
by アールティー。 (2011-10-21 21:25)
＊ アールティー。さん ＊
ハジメマシテ♪
参考になったようで嬉しいです！
最近は全然更新していませんが、
これからもよろしくお願いしますね〜♪(^^)/
by かほりん (2011-10-21 23:05)