ブログの利点は「HTMLやCSSを知らなくても誰でも自分のサイトが持てる事」です。
しかし続けているうちに「自分だけのデザインにしたい！」と思う事も出て来ます。
ブログを訪問した際に１番目につくのは「ヘッダー（サイトタイトル）」部分です。
ここを変えるだけでサイト全体の雰囲気が変わると言っても過言ではありません。
そこで今回は「Seesaaブログでヘッダーを変える方法」をご紹介します＾＾
―――――――――――――――――――――――――――――――――
【画像を使用する場合】
※画像をご自分で作成、または無料素材屋さん等からお借り出来る事を前提とします。
（素材屋さんを利用される場合は「バナー」というタイトル部分に使える大きな素材を
配布されていらっしゃる所もたくさんありますので、色々探しまわってみて下さい＾＾
使用規定など、必ず確認されて下さい。 参考⇒WEBリング：素材屋さんリング）
１：管理画面で「コンテンツ」を開いて下さい。
２：「新しいコンテンツの追加」の「種類」から「ブログロゴ画像」を選択。
「追加先ページ」は全部、「配置」はヘッダーにし、「コンテンツの追加」をクリック。
３：開いた画面の「画像アルバム」をクリック。
４：「アップロード」の所の「Brows...」ボタンをクリックし、ご自分のPCに
保存してある画像を選択し、「アップロード」ボタンをクリック。
５：同画面すぐ下にある「ブログロゴ設定に戻る」から手順３の画面に戻りますので
「保存」をします。
６：「再構築」→全部をかけて下さい。
これでヘッダーの部分にご自分が用意した画像が表示されるようになります＾＾
また、画像自体をクリックする事で各ページからブログトップページに戻ります。
その後、高さや表示位置など微調整する場合はCSSのこの部分をいじります。
○○の部分を変更していく事で表示が変わっていきます。
（「トップ」「記事ページ」「カテゴリページ」「過去ログページ」のそれぞれを同じように
変更していく必要があります。）
#banner{
font-family:arial, Helvetica;
height:○○px; ←ヘッダーの高さを指定します
margin:○○px; ←ヘッダーの表示位置を指定します
padding:○○px; ←文字の始まる位置を微調整します
text-align:left; ←文字の配置位置を設定します。（centerにすると真ん中に表示されます）
background-image:url(ここに用意した画像のURL);
background-repeat:no-repeat; 画像を繰り返し表示させる場合は赤の所をrepeatに変更します
}
【画像を使わない場合】
当サイトのように画像を使用せず、色のみで表示させたい場合は上記のピンクで
書かれた部分を削除して、その替わりに以下のソースを同じ部分に追加します。
background-color:ここに背景色に使用したい色;
CSSを変更した場合は、変更後「保存」→「再構築」で「スタイルシート」を。
―――――――――――――――――――――――――――――――――
始めに選んだ既存テンプレートの種類や、用意した画像のサイズによって、
また、どういう風に表示させたいかなど、ご本人様の希望などもありますので、
それによって変更内容が違ってくるため、この記事内で具体的な数値や細かい
変更方法は表記する事が出来ませんがご了承頂ければ幸いですｍ（＿ ＿）ｍ
当サイト内関連カテゴリ⇒Seesaaをカスタマイズ
⇒HTMLとCSS
情報を色々集めるなら↓
★人気ブログランキング
|
|
|
|
日刊カタログ
2005-05-13 12:10
2005-05-13 12:10
お元気ですか？
結構、お邪魔はしていたのですが、コメント投稿は久しぶりです。
以前からそうでしたけど、より一層洗練されたサイト（店構え）に
なられましたね。
凄いです・・・やっぱりセンスがモノをいいますね。
「日々、お勉強させていただきます」（笑）
では、またお邪魔させていただきます。失礼しました。
＞お元気ですか？ 結構、お邪魔はしていたのですが、コメント投稿は久しぶりです。
いらっしゃいませ～＾＾ 私は元気ですよ～♪
実は私も珊太郎。さんのところにちょくちょくお邪魔させて頂いてます★
GWお疲れ様でした！ 特にホテルは忙しい時期ですもんね（＞＜）
これからゆっくりされて下さいね～！
＞以前からそうでしたけど、より一層洗練されたサイト（店構え）に
なられましたね。
＞凄いです・・・やっぱりセンスがモノをいいますね。
そう言って頂けるとすごくうれしいです！ ありがとうございます＾＾
でもでも珊太郎。さんのサイトには全く及びません（＾＾；
珊太郎。さんのようなおしゃれ感を出せるように私もいつかなりたいです！
日々お勉強させていただいています。
この記事に付けるコメントではないのですが、ちょっと気になってしまって。。。
こちらのサイドバーのリンクなのですが、これはCSSでされているのですか？
私も試しに四苦八苦してやってみたのですが、う～む。
テーブル組みで放り込んで見ると何とか見られるようにはできるのですが。
いまいち？？？なんです。
PS.CSSについては、とんと疎いのですが、わかりやすくて、おすすめのCSS書籍などありましたら教えてくださいませんか？
いらっしゃいませ＾＾
＞こちらのサイドバーのリンクなのですが、これはCSSでされているのですか？
カテゴリのところは「自由形式」の追記部分にHTMLでテーブルを埋め込んで、
その他は「お気に入りリンク」の追記部分にアフィのタグや説明を書いています＾＾
カテゴリのHTMLテーブル以外は全部CSSの方で設定してあります。
この辺は時間のある時に記事にして行きますね＾＾
多分、最近の本ならもっと詳しいのがたくさん出ていると思うのですが
私がCSSを勉強したのはインプレスさんが発行している「スタイルシート大辞典」という緑色のカバーの本です。
ちょっと古い＆少し難しいんですが、殆どの基本的表記法が載っているので良いですよ＾＾
自分でやってみて理解できました。
右サイドバー落ち＆センタリングに件は、記事「カスタマイズその2」で返コメントさせていただきました。
そうなんです、カテゴリの所はテーブルで作ってます＾＾
「右サイドバー落ち＆センタリング」はその２にお返事しますね～。
ブログを作成する際に活用させていただいています。
早速ヘッダーのカスタマイズをしてみたですが、
ヘッダーを囲む線の色の変更の仕方がわかりません。
今は紫色でどうもしっくりこなく変更したいのですが、、、
どの部分を変えればよいのでしょうか？
自分でもあれこれやってみたのですが、やはりわからなくて。
お忙しいとは思いますが、教えていただければ幸いです。
はじめまして＆コメントありがとうございます＾＾
＞早速ヘッダーのカスタマイズをしてみたですが、ヘッダーを囲む線の色の変更の仕方がわかりません。
その線は画像にリンク先が指定してある場合に必ず表示される線の色です＾＾
（ヘッダーで言うと、クリックするとトップに戻れるように設定されています）
これを変更する場合はこの記事の手順で追加した後にまずこの線を消します。
１：「デザイン」→「コンテンツ」の順に開くと、コンテンツ一覧に「ブログロゴ画像」が
追加されていると思います。これをクリックすると右側に「コンテンツHTML編集」という
リンクがあるので、それを開いて下さい。
２：開くと「コンテンツＨＴＭＬ」画面になりますので、そこに表示されているＨＴＭＬソースの
<a href="<% blog.page_url %>" accesskey="1"><img src="<% content_image.page_url %>" alt="<% blog.title %>"></a>
という部分を見つけて下さい。
３：その中のalt="<% blog.title %>"のすぐあとに「border="0"」を追加して下さい。
そうするとこんな感じになります
<a href="<% blog.page_url %>" accesskey="1"><img src="<% content_image.page_url %>" alt="<% blog.title %>" border="0" ></a>
これで一旦保存をして下さい。
４：今度はＣＳＳのページに移動します。
５：この記事の中でも書いている#banner の部分を探して下さい。
ここの、 最後の } の部分の手前に border:○○px solid ここにご希望の線の色;
というのを追加して下さい。○○の部分は線の太さを現します。ご希望の数字を
入れて下さい。数字が増えるほど線の太さが太くなります。
６：これで「保存」して、最後に「再構築→全部」をかけて貰えればお好きな色の線になります＾＾
もし、線を必要としないのであれば、手順４～５のＣＳＳの部分はいじらずに、手順３の後、
「再構築→全部」をかけて下さい＾＾
大変親切なアドバイスありがとうございました。
無事解決することができました！
記事もわかりやすく初心者の僕には学ぶ事が多々あります♪
また参考にさせていただきます。
本当にありがとうございました。
いらっしゃいませ＾＾
＞無事解決することができました！
良かったです～(*´▽｀*)丿 私、本当に説明下手なのでお役に立てたか心配していたんです（＾＾；
また何かありましたら、是非いらして下さい！ これからもどうぞよろしくお願いします＾＾
いろいろ調べて何度もやり直し、やり直し今日で早三日．．．
最初よりは希望に近いものになりつつありますが納得できなくて．．．
そうだ！berryさんに聞いてみようと思いコメントしている次第です。
理想はもう少しブログ名を左に寄せ、説明文の頭を揃えてブログ名よりは右に表示させたいと思っています。
お時間のあるときで構いませんのでよろしくアドバイスお願いいたします。
いらっしゃいませ＾＾
サイト拝見させて頂きました＆キレイでうっとりしてます♪
＞理想はもう少しブログ名を左に寄せ、説明文の頭を揃えてブログ名よりは右に表示させたいと思っています。
スタイルシート（CSS）を開いてください。
【ブログ名】
１：CSSの中からｈ１で始まる所を見つけて下さい。
２：そこに padding-left:○px; という記述を追加して下さい。
この○の中に数値を入れます。この数値が大きくなればなるほど、タイトルが
右に寄って行きます。
【説明文】
１：CSSの中から.description で始まる所を見つけて下さい。
２：以下、↑上記ブログ名と同じようにpadding-left:○px; という記述を追加し、
ブログ名よりも大きい数値を設置する事で、さらに右に寄っていきます。
これで再構築「スタイルシート（CSS）」をかけて様子を見てみて下さい＾＾
もし、それでも思うように行かなかったらまた来て頂けますか？
まあるいお月様のCSSを直接私が見れないので、お手数ですがよろしくお願い致しますｍ（＿ ＿）ｍ
Berryさんに教えていただいたようにCSSを書き換えてみました。
padding-left:○px；を追加する事により文字の位置が変わることは確認できましたが、なんだか思うように表示が出来ません。
私なりに考えたのですが．．．ブログ名とブログの説明はコンテンツという場所でも設定ができますよね？
私はコンテンツのところに同じようにブログ名と説明を設定してあります。
でもそのコンテンツで設定してあるものは色を白にしているので見えないのです。
というのも、最初コンテンツでの設定のものとcssでの設定のものが両方とも表示されていたので、知識のない私はコンテンツの方を白に色指定して消す事を考えました。
さっき書き換えた時もコンテンツの説明文が邪魔をしてどうしても右に寄り過ぎるので（多分見えない説明文があるためそこに表示できない？）その説明を削除してみたところ現在のようになりました。
初歩的な質問かも知れませんが、このコンテンツのところ（ブログ名と説明）を削除してもいいのでしょうか？一応配置がヘッターとなっているので消してしまうとだめかと思い、取り合えずブログ名のほうは残してありますが．．．
参考になればとSCCを書きます。
まずはブログ名のところ
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:30px;/*タイトルの文字の大きさ*/
font-weight:bolder;
}
h1 a{
color:#FF3300
;/*色をつけるとコンテンツタイトルの下にタイトルがでる。*/
padding-left:1px;/*ココ追加しました*/
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h2 {
}
h3 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
あと、説明文のところ
.description {
color:#33CCFF
;/*色を入れるとコンテンツの説明の下に説明がでる*/
padding-left:30px;/*ココ追加しました*/
margin:0px 10px 10px 0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
.navi {
font-size:12px;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:500px;
text-align:center;
margin-top:10px;
margin-left:4px;
テンプレはガーベーラを使用しています。
このガーベラの画像と今の画像の入れ替えもsccでしたのではなく、コンテンツにブログロゴというのを追加して行いました。（どこかでそうして替えるやり方があったので）
まずここから間違っているのでしょうか？
理想を言えば表示している説明のところの二段目、「し。」の所くらいの位置からはじまり、画像にかかった感じになってもいいかなと思ってます。
やっぱりSCCをしっかり勉強しないと思うようにはならないものですね。
またお時間ある時にアドバイスお願いいたします。
いらっしゃいませ＾＾
コンテンツで用意されているブログタイトル＆ブログ説明は非表示にしてしまっても大丈夫です＾＾
ただ、今のままだとｈ１が２つある事になるので、ちょっと試して欲しいのですが。。。
【パターン１】
まあるいお月様の作ったブログロゴ画像をクリックし、そこの右上にあるHTMLを開いてみて下さい。
そのソースから＜ｈ１＞と、＜／ｈ１＞という２つの文字を削除して下さい。
それで、色指定で白にしてしまったものを元に戻してみて下さい。
【パターン２】
もしパターン１でもダメならコンテンツの【ブログ名】を削除するのではなく、
非表示にして見て下さい。
―――――――――――――――――――――――――――――――――
ちょっとHTMLソースを拝見させて頂いたのですが、ブログロゴ画像で指定した画像は
ヘッダー全部ではなくて、右側の写真部分のみを右に表示するように
設定されているのでしょうか？
ブログロゴ画像で画像を設定する場合はヘッダー全体（右から左まで）をカバーする
サイズのものを用意しないと今回のように２重に表示されてしまったりするようなんです（＾＾；
また、ブログロゴ画像で設定すると背景としてでなく、そこに画像を置いたという認識になるので
文字を画像の上に重ねることは出来なかったりします。
なので、画像に文字を重ねて表示させる場合はロゴ画像を使わずに、HTMLを直接いじって
背景指定で画像を表示させるか、CSSで設定しないといけなくなります。
もしご希望でしたらお時間頂ければそのソースを考えてみますので、またコメント下さい＾＾
よろしくお願い致しますｍ（＿ ＿）ｍ
今日は朝から仕事が入っていてせっかく教えていただいたのにゆっくり試す事が出来ません。
取り合えずパターン①、②を今試しましたがブログ名が2つ同時に表示になったり、ブログ名が二つとも消えてしまったりと言う感じでした。
時間がなくて詳しく説明が書けずスミマセン。
帰ってきたらもう一度やってみます。ありがとうございます。
まずはお礼が言いたくてコメント書かせていただきました。ありがとうございます。
【パターン1の場合】
＜ｈ１＞と、＜／ｈ１＞という２つの文字のみを削除した場合、二つのブログ名が同時に表示になりました。
また＜ｈ１＞から＜／ｈ１＞までの間全部を消した場合は、ブログ名が２つ表示されていて、隣の葉っぱの画像が消えてしまいました。
【パターン２の場合】
ブログ名２つとも消えて、説明文と画像になりました。
＞ブログロゴ画像で指定した画像は
ヘッダー全部ではなくて、右側の写真部分のみを右に表示するように
設定されているのでしょうか？
これはコンテンツのところで見ると右のみに表示するを設定なのかどうかわかりませんが、ヘッターという設定になってます。
でもBreeyさんがおっしゃるように、ヘッダー全体をカバーするサイズではありません。だからこんな事になるのでしょうか？
画像をアップロードすると
というＨＴＭＬになりますよね。
ＣＳＳの元の画像のところは background-image:url(https://blog.seesaa.jp/img/bg/gerbera/title.gif);ですよね。
この場合入れ替えるのはどこを変えればいいのでしょうか？
img src= を消した残りを（ ）の中に入れればいいのでしょうか？
今後もたびだび画像は変えたいと思っているので、なにかアドバイスいただけないでしょうか？
①画像はヘッターいっぱいのものは用意できないと思うので、小さい画像を自分の好きな位置に貼れる。
②デザインによっては説明文を上に載せたい。
この２つをどうしても出来るようになりたいです。
私も色々調べてみます。また時間がある時にアドバイスしていただければ嬉しいです。
よろしくお願いいたします。
画像に文字を重ねたり、毎回画像サイズが違う可能性があるのであれば、
スタイルシートでいじる方が良いですね＾＾
では、少し面倒になりますがまずロゴ画像を削除して下さい。
そして、コンテンツのブログ名とブログ説明をヘッダーに表示させて変更ボタンを押して下さい。
１：スタイルシートページに行き、ソースの中から#banner で始まる部分を見つけて下さい。
そこに、まず以下のソースを追加して保存しておいて下さい。
background-image:url();
background-repeat:no-repeat;
background-position:right;
２：次に「ツール」という所に行くと、アップした画像の一覧ページがあります。
ここから、ヘッダーに使いたい画像部分のHTMLという所のソースをコピーして下さい。
<img src="https://○○.up.seesaa.net/image/画像の名前" alt="" width="320" height="245" />
↑こういうやつです。
３：スタイルシートにまた戻って、手順１で追加したソースの１行目
（）の間に手順２でコピーしたソースの中から
https://○○.up.seesaa.net/image/画像の名前 という部分だけを貼りつけます。
そうすると↓こんな感じになります。
background-image:url(https://○○.up.seesaa.net/image/画像の名前);
background-repeat:no-repeat;
background-position:right;
４：次に文字を表示させたい位置を考えます。以下のようにして下さい。
大変お手数ですが前回追加したpadding-leftの部分は一旦削除下さい。
h1 {
margin:0px;
padding: 30px 10px 10px ○○px;
font-size:30px;
font-weight:bolder;
}
↑上記○○の部分の数値をどんどん増やすとタイトルが右によります。
.description {
color:#33CCFF;
margin:0px 10px 10px ○○px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
↑上記○○の部分の数値をどんどん増やすと説明が右によります。
画像にかぶせたいのであれば数値をかなり大きくしてみて下さい。
（例えば100px以上の数値など）
様子を見ながら数値を変更してみて下さい。
手順１のソースの（）内の画像URLをその都度、ご希望のものに変え、
それに合わせて以降の手順の○○の数値を変えていく事で文字位置を
画像に合わせて良い位置にしていく事が出来ますので、
こんな感じで試して頂けますか？よろしくお願い致します＾＾
早速試してみたところ画像に文字も重なって、かなり理想に近いものになりました。
あとはブログ名と説明までの距離をもう少し広げたい(説明文をもっと下の位置に表示したい)のと、ブログ説明の一行目と二行目の頭が揃っているといいのですが。
下記はコンテンツのブログ説明のＨＴＭＬです。ここで変更するのかと思い取り合えず書いてみました。
<% content.header -%>
<% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %>
<% content.footer -%>
また画像のデザインによっては説明文を四段(今は二段ですが)くらいにしたいとも思っていて、その場合はどこかに改行＜ｂｒ＞を入れたりすればいいのでしょうか？
昨日の夜もいろいろいじっていましたが、やっぱり出来ず諦めかけていました。
でもBreeyさんに教えていただき、こんなにも早く実現できて本当に嬉しく感謝しています。
またお時間ある時にアドバスしていただけると嬉しいです。よろしく御願いいたします。
お返事遅くなってしまい申し訳ありません（＞＜）
■ブログ名と説明文の間を空ける
スタイルシートの↓この部分をまた見て下さい。
h1 {
margin:0px;
padding: 0px 10px ○○px 30px;
font-size:18px;
font-weight:bolder;
color:#FF3300;
}
↑上記○○の部分の数値を増やして行くと、ブログ名と説明の間が開きます。
■説明文の行数を変更する
管理画面の「設定」という所でブログ説明文を変更出来るのですが、
この際にｂｒタグを入れなくても改行しながら書いていけば行数を増やす事が出来ます。
■説明文の頭を揃える
コンテンツのブログ説明文のHTMLを以下のように書き換えて下さい。
<% content.header -%>
<div class="description" align="left"><% content.blog_desc.text | nl2br | __or__ | blog.description | nl2br %></div>
<% content.footer -%>
こんな感じで試してみて下さい＾＾ よろしくお願い致します。
本当に本当にありがとうございました。もう嬉しくて感謝です。
昨日もいろいろ書き換えては試してみましたがやっぱりダメ。このレイアウトで妥協しなくちゃ。と思ってたところなんです。
本当に親切丁寧に教えていただきありがとうございました。
こんなすばらしいサイトを作られているBreeyさんはすごい！尊敬します。
これからも私のように初心者で困っている人の「救世主」としてご活躍ください☆
またお世話になる事も多々あると思いますがその時はよろしくお願いいたします。ありがとうございました。
希望どおりになりましたかっ！！
良かったです～、私もめちゃくちゃうれしいです(*ノ´∇｀*)ノ
私自身、こういうご質問を頂く事ですごく勉強になっています＾＾
こちらこそ本当にありがとうございました♪
また、何かありましたらいつでもいらして下さい～。
すばらしい内容ですね。いつも参考にさせていただいています。
ヘッダーのカスタマイズと言えるかどうか微妙なのですが、記事ページ表示時のみ、ヘッダーのブログタイトルを ブログタイトル：記事タイトル にしたいのですが、いろいろやってもなかなかうまくいきません。
お忙しいところ恐縮ですが、どのようにすればよいかヒントでも教えていただければありがたいです。
よろしくお願いします。
つい最近、新しいブログを立ち上げたばかりのBodyDesignerです。
カスタマイズに挑戦しているのですが、これがまたなかなか上手くいきません・・・。
現在はブログタイトルの画像を変更しているのですが、画像が右にズレてしまいます。
それと、アクセス解析をTOPページ、記事ページ、カテゴリーページに貼るために、ブログロゴ画像（コンテンツ）を３枚にしています。ですが、TOPに使用するコンテンツ（ブログロゴ画像）は右に寄り・・・、記事ページ、カテゴリページに使用するコンテンツ（ブログロゴ画像）には画像がアップロードできません。同じ画像を使うのですが・・・。
タイトル文字とサブタイトル文字は画像に直接書いてしまったので表示しません。ブログロゴ画像だけを貼り画像リンクさせたいです。
どこをどのように変更すれば、上記のことが解決できるのでしょうか？
詳しく教えて頂けませんでしょうか、宜しくお願いいたします。
まだブログロゴ画像の変更で止まっていますが、今後は全体のCSSも変更してゆきたいと思っています。
これからも宜しくお願いいたします。