クリア系左右テンプレは可変タイプなのですが、ブラウザの表示幅を760px以下にしてしまうと記事部の投稿ボタンが消えてしまいます。
CSSを編集する前の状態でも投稿ボタンが隠れてしまいますので、コチラの件とともに是非修正していただきたいですね。
他の可変タイプのテンプレートだと、コメントエリアが引っかかるように処理されるのですが、クリア系テンプレは右メニューの下に隠れるように処理されてしまいます。
CSSをカスタマイズすれば調整できそうな気がするのですが、私の知識では可変を維持したままその処理を実現するのは無理でした…。
どなたか、どうしたらよいのか教えてください…。
それが、わかれば逆にクリア系左メニューや右メニューでも可変バージョンが可能になるのかな?
一応、クリア系左右メニューで固定幅にしてあげると、投稿ボタンが隠れることはなくなりましたのでその処理方法をお教えしますね。
処理をしたBLOGはコチラ。(テンプレやCSSを変更しているかもしれませんが…)
左右のpaddingを0pxに変更。
margin: 0px auto;で「ページ全体の囲み」を中央配置
width:760px;「ページ全体の囲み」の幅を760pxに固定。
記事部の幅を400pxに固定。
以上です。
両サイドのメニューが180pxに固定されていますので
180px×2=360pxあるんです。
それで、記事部分の幅を400pxにすると
360px+400px=760pxとなり
ページ全体幅760pxと一致するという訳です。
760pxはクリア系左メニュー版と同じ幅ですね。
これならばブラウザの幅を変更しても、記事部の幅が狭くなることはありませんので投稿ボタンは隠れません。
760px以下に幅を狭めれば、ブラウザ下にスライダーバーが出てきます。
gooブログ スタッフブログ:シンプルテンプレート公開しました!
CSSを編集する前の状態でも投稿ボタンが隠れてしまいますので、コチラの件とともに是非修正していただきたいですね。
他の可変タイプのテンプレートだと、コメントエリアが引っかかるように処理されるのですが、クリア系テンプレは右メニューの下に隠れるように処理されてしまいます。
CSSをカスタマイズすれば調整できそうな気がするのですが、私の知識では可変を維持したままその処理を実現するのは無理でした…。
どなたか、どうしたらよいのか教えてください…。
それが、わかれば逆にクリア系左メニューや右メニューでも可変バージョンが可能になるのかな?
一応、クリア系左右メニューで固定幅にしてあげると、投稿ボタンが隠れることはなくなりましたのでその処理方法をお教えしますね。
処理をしたBLOGはコチラ。(テンプレやCSSを変更しているかもしれませんが…)
変更点
/* ページ全体の背景と余白 */ body { background-image: url(); background-repeat: ; background-position: ; margin:0px; padding:0px; background-color:#e6dfd1; } |
/* ページ全体の囲み */ #content{ margin: 0px auto; color: #333; width:760px; border-right: 1px solid #FFD57D; border-left: 1px solid #FFD57D; background-color:; background-image:url(/user_image/01/7a/cbdcca8dda4329e19e81d443aca4d5dd.png); _height: 100%; } |
margin: 0px auto;で「ページ全体の囲み」を中央配置
width:760px;「ページ全体の囲み」の幅を760pxに固定。
/* 記事部分レイアウト用 */ #center{ width:400px ; overflow:hidden; height: 100%; } |
記事部の幅を400pxに固定。
以上です。
両サイドのメニューが180pxに固定されていますので
180px×2=360pxあるんです。
それで、記事部分の幅を400pxにすると
360px+400px=760pxとなり
ページ全体幅760pxと一致するという訳です。
760pxはクリア系左メニュー版と同じ幅ですね。
これならばブラウザの幅を変更しても、記事部の幅が狭くなることはありませんので投稿ボタンは隠れません。
760px以下に幅を狭めれば、ブラウザ下にスライダーバーが出てきます。
トラックバック
gooブログ スタッフブログ:シンプルテンプレート公開しました!
古いマック使いの中には、それが原因でうまく表示されないことがあるみたいです。
CSSの知識が全くなかったのだけど、いろいろ参考にさせて頂き、ずいぶん勉強になりました。
クリアのテンプレも、CSSが表示されているのを知りませんでした。「カスタム」というのだけ、CSSがいじれるのかと思っていました。
練習用のBlogでは、クリアので試しています。
CSSは、思った通りになると(たまにしかないけど・・)面白いですね。
これからも、よろしくお願いしますね。
奥が深いよね。勉強しなくっちゃ。
http://blog.goo.ne.jp/rd-xs40user/e/de2394ee4c662ee5eff97c1837ac91e4
いじってみましたが、ピンク色を変更するのは
どうしたらいいのでしょうか。
・・・わからん・・・
■えっけんさん
あ、そうなんですか?
大体わかってきたので、不要なのは消してみます。
■紅蓮さん
> CSSは、思った通りになると(たまにしかないけど・・)面白いですね。
そうそう、やり始めたら止まらない要因ですね(笑)
これが楽しいと思える方はプログラマーの素質あり?!
■じゃすみんさん
奥が深いですぅ~ブクブクブク…。
でもじゃすみんさんはすっかり慣れられましたねぇ。
カスタムブルーもバッチリじゃないですか!
■テドさん
どうやら上手く出来たみたいですね。
アイコンが切れてしまってるのでパディングを上手く設定してあげた方がよさそうです。
時間がある時にCSSパクッて遊ばせてください(爆)
タイトル部分を画像に変えたのですが、画像クリックでTOPに戻るようリンクを張る事が出来ないものかと徘徊中です
もし宜しければお知恵を拝借できないものでしょうか?
厚かましくってm(__)m
残念ながら、無料のgooブログでは画像にリンクを貼ることは無理だと思われます。
アドバンスならばHTMLを加工できますので画像にリンクを貼ることはできると思います。
苦肉の策ですが…。
#headerに配置している画像から
「つれづれなる奥様」
を削除して、
.bTitle
でタイトルを書く以外は難しいかと思います。
フォントを上手く変更すれば近い感じには出来そうな気がします。
早速やってみましたが上手く出来ているでしょうか?
本当に助かりました!!
今日の日記にありました広島風お好み焼きですが、
大阪生まれで、広島人歴15年の私の
広島風お好み焼きは『かっぱえびせん』をテンカスの代わりに一握り!!
是非お試しあれ(=^0^=)
IEをお持ちで、HG丸ゴシックM-PROフォントがPCに入っていれば大丈夫ですね。
まあ、気にすることはないとは思いますが
IE以外のブラウザだと表示が崩れています。
(Firefox、Operaで確認しました)
Netscapeは未確認ですが…。
対策がわかれば、また考えてみますね。
そうですか~他のブラウザだと崩れてますか~(^┰^;)ゞ
ま見てくださる方が増えたら考えますね~
ありえんけど・・・(-д-")
又何かあったら相談させてくださいね♪