スポンサード リンク
2006年11月15日

テンプレート「ブルー」のbannerの高さを高くする

シーサーブログのカスタマイズ、がんばってますかぁ?

 きょうは、テンプレート「ブルー」の banner の高さを高くする方法を紹介するよ。

 でも、banner って見慣れない言葉でしょ!?

 わかりやすく言うと、banner って「ヘッダー領域」のことなんだ。でも、スタイルシートの中では banner って名前で呼んで区別してるから、ここでも banner って呼ぶことにするよ。


【問題点】


 ヘッダー領域で、「ブログ説明」の下に高さが高い「自由形式」を表示させようとすると、IE(Internet Explorer) ではうまく表示されるけど、FireFox では表示がおかしくなるんだよ。

 この「自由形式」に何を表示させるかは、もうわかってるよね!?

 で、シーサーブログのデフォルトのまま、「ブログ説明」の下に高さが高い「自由形式」を配置すると、FireFox では links-left や contents、links の上に「自由形式」がかぶさるように表示されて、肝心のページ内容が読めなくなるんだ。


【解決策】


 #banner セクションの高さを高くすると解決できるよ。


【手順】


 この方法では、スタイルシートを編集するんだ。だから、失敗したときに備えて、編集前の「スタイルシート」をメモ帳とかのエディタを使って、保存することを忘れないでね。

 まず、「デザイン」→「スタイルシート」でスタイルシートを開くんだ。

 次に、#banner っていう単語を見つけてね。

 #banner が見つかったら、そのセクション内の height の値を大きくするんだ。

 どのくらいの値にすれば良いかって言うと、もう現物で確認するしか無いんだけど、基本は

  デフォルトの高さ+「自由形式」の高さ

だよ。これを基本にして、もう少し大き目の値を指定すれば、たいていは使えると思うよ。

 でも、最後はヤッパリ実際に表示させてみて確認することが必要だよ。


以上で、今日のシーサーブログのカスタマイズを終了するよ。

 どうかな? 参考になったぁ?



もしこの記事があなたの参考になりましたらランキングの応援お願い致します。
seesaaカスタマイズ職人の元気の源・人気ブログランキング





シーサーブログのカスタマイズの注意事項

 上記シーサーブログのカスタマイズは各自の責任において実行するようお願いします。

 また、もし、間違いなどにお気づきの方は、気軽にコメントに書いてやってください。もちろん、普通のコメントは大歓迎です。ぜひ、コメントをお願いします。コメントが励みになりますので。


by seesaaカスタマイズ職人 | Comment(9) | TrackBack(0) | スタイルシート
この記事へのコメント
こんにちは、初めまして。
最近になってseesaaに引っ越してきて、
テンプレートのカスタマイズが上手く行かず
検索していたらこちらに辿り付いたものです。
とってもためになるページですねー!
私は記事部分の一番上と一番下に、過去記事へのリンクを作りたいのですが、HTMLの編集が以前のものよりも難しくってさっぱりわからないんです。
もし宜しければ方法を教えていただけないでしょうか。
それから、コメントを書くときにどうしてもページ全体が崩れてしまうんですが、それもどこをいじればよいのかさっぱりわからなくて・・・。
それ以外でも、今後もカスタマイズ方法、いろいろ参考にさせていただきたいです。
よろしくお願いいたします!
Posted by hanako at 2006年11月16日 19:04
訪問ありがとうございます。

hanakoさんのサイト、ものすごく綺麗ですね。私の方が参考にしたいですよ、ホント。

ところで、記事の上下に過去記事へのリンクを、とのことですが、具体的にはどのように過去記事へのリンクをはりたいのでしょうか?

もう少し具体的に書いていただけると、何かお役に立てるかもしれません。

Posted by 管理人 at 2006年11月17日 02:35
管理人さま、
コメントありがとうございます。
わかりにくいですよね・・・スイマセン
あの、普通ブログって、日記の一番上と一番下に、
【<<前へ|TOP|次へ>>】等のような表示で
過去の記事や最新の記事が見れるようになっていると思うんですが、私のテンプレートでは表示されていなくって・・・
管理人様のは【<< 【未解決】テンプレート「ダイアリー」のコンテンツ、 Powered by がおかしい | TOP | Adsense の表示位置を固定する >> 】と表示されているので、カスタマイズされているのかと思ったんです。

それから私のテンプレートは最近のもので「落ち葉」のheaderの画像を入れ替えて、文字の色を少し変えたただけです。キレイだなんて・・・ありがとうございます(*^-^*)。

また覗きにきます。よろしくお願いいたします。
Posted by hanako at 2006年11月17日 05:28
hanakoさんへ

例えばこの記事だけを表示すると、おっしゃるとおり前後の記事と TOP へのナビゲーションが表示されますが、これは何もカスタマイズしていません。オリジナルの seesaa の設定で表示されますよ。

ちなみに hanakoさんのブログも確認しましたが、個々の記事ページではちゃんと表示されていましたよ、ご安心を。

で、多分hanakoさんが気になさっているのは、ブログのトップページにナビゲーションが表示されないことではないかと思います。

トップページに関しては、オリジナルの設定では表示されません。表示されないのが正常です。というか、seesaa の設定ではそうなっています。

 あと、個々の記事を表示するとレイアウトが崩れるようですね。こちらの方が問題ですよね。

 ただ、この問題は Internet Explorer では発生しますが、FireFox でウィンドウ幅をそこそこの大きさにすると発生しません。

 seesaa のコードでは、よくあるんですよね。IE と FireFox の表示が異なることが。

 でも、このままではいけないので、ちょっと考えてみますね。


Posted by 管理人 at 2006年11月17日 18:51
hanakoさんへ

 実際にhanakoさんの設定の全てを診てみないことには正確なことは解りませんが、多分これじゃないかという原因を見つけました。

 hanako さんは、「デザイン」→「HTML」で HTML を編集していますか?多分、編集したと思います。

 この HTML のデフォルトでは190行あたりに、

<% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ・・・・

という記述があります。

 「前へ」というキーワードで検索すると見つけられると思います。

 この行の前の行に、オリジナルでは

<div class="tag-navi">

という行があったと思いますが、この行がなくなっているようです。これが原因ではないでしょうか?

 表示が乱れていた原因は、<div ・・・・> タグと </div> タグの対応が取れていなかったことです。

 で、タグの対応が崩れた原因が上記の1行の削除だったと思われます。

 従って、上記の「前へ」の行の次行の

</div>

を削除しても同じです。ただし、この行を削除した場合は、上の1行を追加した場合と比べると、フォント等の設定が異なるかもしれません。異なるかどうかは、スタイルシートの tag-navi の設定によりますが。

 以上、長くなりましたが、一度確認&お試しください。
Posted by 管理人 at 2006年11月17日 20:10
管理人様、
すすすすすごーい!
もしかしてわざわざ私のソースを調べてくださったんですか???
本当に本当にありがとうございます!!!m(_ _"m)ペコリ


は、これを挿入することによって過去記事へのリンクが表示されるものかと思い、何度かコピペした気がします。その際に誤って削除してしまったのでしょうか・・・オハズカシイ。。。(;´Д`A
早速試してみます。本当にありがとうございました!

今後もこちらのサイトを参考にさせていただきたいので、私のページからリンクを貼らせて頂いても宜しいでしょうか???
どうぞよろしくお願いいたします。
Posted by hanako at 2006年11月18日 03:27
管理人様、
今、【デザイン→HTML】からHTMLを編集しようと、指摘箇所を確認したのですが、

は、削除されていませんでした。
私が変更したのはサムネイルの幅だけでした。

でも、確かに個別ページのソースを見ると

がなくなっていますね。
これは、デフォルトのHTMLでも起きてしまう現象のようです。(>_<)

cssに問題があるのでしょうか・・・・・?
私はcssは殆んどわからないので、
リンク時の文字の色を変えただけのつもりだったのですが。

なんどもお手数おかけしては申し訳ないので、
ご回答は本当にお時間のあるときで結構です。
この度は本当にありがとうございました。
今後もちょくちょく遊びに来ますので、どうぞよろしくお願いいたします。
Posted by hanako at 2006年11月18日 03:48
こんばんは、hanakoさん。

デフォルトの HTML を使用しても現象がでるということは、ひょっとして、「デザイン」→「コンテンツ」→「記事」の「コンテンツHTML編集」で表示されるコードに、

前へ

を含む行を追加していませんか?

そうだとすると、その行が怪しいですね。

また、「前へ」の行は正常に機能していないようですね。できれば削除したほうがよいのですが、安易に削除するとますますわからなくなるので、まずは上記 HTML を調べてみて下さい。

ここで見つかれば、それが犯人ですね。

P.S.
コメントでも本文でも、< や > を含むタグを書き込む時は、

http://seesaacustomize2002.seesaa.net/article/26674530.html

を参照して、タグの不等号を記号に変換して書き込むとよいですよ。
Posted by seesaaカスタマイズ職人 at 2006年11月18日 18:18
管理人様、
ありがとうございます!!!
問題解決いたしましたーーー!
私、コンテンツ記事のHTMLを編集したことをすっかり忘れておりました(^^;)。
seesaaは初期値との差分が出るのが良いですね。
この度は本当にお世話になりました!
リンクも貼らせて頂きました。
今後ともどうぞよろしくお願いいたします。

それから、最初の希望のナビゲーションの表示なのですが、
確かに記事ページに移ったときは表示されますね。
でも私の母など初心者の場合は、個々のページは見ずに、「前の記事を見るにはどうしたら良いの?」って質問したりする人なんです。ですから、トップページにナビゲーションが表示されるようにしたかったんです。
ずうずうしくて申し訳ありませんが、ここまで甘えたついでにお願いできるようでしたら、設定方法を教えていただけますでしょうか。。。
もちろん、お時間のあるときで結構ですので。
気長に待っています。よろしくお願いいたします。

Crescent Eve、すごいソフトですね。
早速ダウンロードしてみようと思います!
Posted by hanako at 2006年11月18日 19:27
コメントを書いて励ましてやる
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/27445880

この記事へのトラックバック