FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

便利ナビに枠をつける (lightframe)

当サイトのテンプレートには、全てmyhurtさんの便利ナビ機能を搭載しています。

便利ナビとは、カテゴリ、検索、月別アーカイブのページで、ページ上部に表示されるナビゲーションです。

当サイトのテンプレート、lightframeシリーズの便利ナビに枠を表示するカスタマイズを紹介します。

スタイルシートの末尾に以下を加えてください。

/* 便利ナビ（カテゴリ・検索・月別ナビゲーション）の外枠 */
.various_outline {
border:#e0e0e0 2px solid; /* 外枠の色/太さ/実線 */
}

これで便利ナビに外枠が表示できます。
各設定はお好みにあわせて調整してください。

関連記事

[ 2009/06/14 17:45 ] カスタマイズ lightframe 専用 | TB(0) | CM(13)

[ 7728 ] 下枠（border-bottom）が表示されない

早速スタイルシートの末尾に加えてみたのですが下枠が出ません。スタイルシートの［▼ カテゴリ・検索・月別ナビゲーション ▼ ］内にある.various_outline { border:#000000 2px solid;｝にしても下枠が表示されませんでした。

なぜか.various_body {border-bottom:#000000 1px solid;}を加えると下枠が2pxになって表示されます。お忙しいところ恐縮ですが分かる方がいらっしゃったらご教授下さい。

[ 2010/01/06 18:04 ] [ 編集 ]

[ 7734 ] > 名無しさん

スタイルシートに全角文字は使えません。
全角である行末の｝を半角の}にしてください。

[ 2010/01/06 22:53 ] [ 編集 ]

[ 7742 ] >いたおさん

やはり下枠のみが出ません。
（コメント欄でのでの｝と}の書き間違いすいません…）

再度テンプレートをダウンロード後、
枠の設定のみをしましたが下枠のみが出ません。
テンプレートはlightframe_monotoneです。
宜しくお願い致します。

[ 2010/01/07 11:37 ] [ 編集 ]

[ 7759 ] > 名無しさん

他に何か原因があるのかもしれません。
現状確認のためURLを教えてください。

[ 2010/01/07 23:20 ] [ 編集 ]

[ 7766 ] ＞いたおさん

下記にアクセスするとカテゴリー[ 未分類 ]の下枠がないのが分かると思います。
http://tests1.blog12.fc2.com/blog-category-0.html

新規にテンプレダウンロード後、変更したのは下記のみです。

■変更前
/******************* ▼ カテゴリ・検索・月別ナビゲーション ▼ */
.various_outline { border:#000000 0px solid; }

■変更後
/******************* ▼ カテゴリ・検索・月別ナビゲーション ▼ */
.various_outline { border:#000000 2px solid; }

上記のpxの箇所以外はテンプレダウン後一切変更していません。
宜しくお願い致します。

[ 2010/01/08 00:36 ] [ 編集 ]

[ 7779 ] > 名無しさん

元々枠が無かった「便利ナビ」に外枠を付けた状態ですね。
名無しさんの言う下枠というものがどういうものかちょっと理解できないのですが・・・このようにしたいという見本となるサイトを教えてくれると助かります。
理解が悪く申しわけありません。

[ 2010/01/08 22:56 ] [ 編集 ]

[ 7788 ] ＞いたおさん

＞元々枠が無かった「便利ナビ」に外枠を付けた状態ですね
そうです。でも、.various_outline { border:#000000 2px solid; }と外枠を2pxの黒線で指定しているにもかかわらず、URLにアクセスすると、外枠でいうとborder-bottomのみが表示されていません。つまり、border-top,right,leftは表示されているがbottomのみ表示されていないといった状態です。

URL先に分かりやすい画像を掲載しましたので画像をクリックしてご覧下さい。
画像を見て頂けると下枠がないという意味が分かると思います。

[ 2010/01/09 01:03 ] [ 編集 ]

[ 7789 ]

> 名無しさん

Firefoxでは下枠は表示されていますが、IEでは表示されていませんね。
IE環境のみ、下枠が表示がされないという現象のようです。
（いたおさんは、IEが起ち上がらなくなった現状とのことですので、実サイトでの確認は難しいかもしれません。）

原因がわかるまで下枠を表示させる小細工としては、
「.various_body」に「border-bottom:（色はvarious_bodyのbackground-colorと同じ色を指定）」を追加してやると、outlineで指定したはずの下枠がFirefox、IE共に問題なく表示されるようです。

/******************* ▼ カテゴリ・検索・月別ナビゲーション ▼ */
.various_outline { border:#000000 2px solid; }

.various_body {
font-size:10pt; /* 文字サイズ(本体) */
color:#000000; /* 文字色 (本体) */
background-color:#FFFFFF; /* 背景色 (本体) */
border-bottom:#FFFFFF 1px solid;
}

[ 2010/01/09 08:07 ] [ 編集 ]

[ 7793 ] ＞通りすがりさん

暫定的措置の方法を教えて頂き有難う御座いました。

＞「.various_body」に「border-bottom:（色はvarious_bodyのbackground-colorと同じ色を指定）」を追加してやると、outlineで指定したはずの下枠がFirefox、IE共に問題なく表示される。

なぜ上記の措置をしてFirefox、IE共に問題なく表示されるかお分かりでしたらご教授下さい。宜しくお願い致します。

[ 2010/01/09 16:16 ] [ 編集 ]

[ 7797 ]

> 名無しさん

IE環境において、various_body{border-bottom～}を追加することにより、
various_outline { border～}（外枠）の下枠部分が表示される理由は私にはわかりませんが、今回の小細工は、名無しさんのコメントをヒントにさせていただいたものです。

http://10plate.blog44.fc2.com/blog-entry-224.html#comment7728
＞.various_outline { border:#000000 2px solid;｝にしても下枠が表示されない
＞なぜか.various_body {border-bottom:#000000 1px solid;}を加えると下枠が2pxになって表示される

IEで閲覧時において、.various_body {border-bottom:#000000 1px solid;}を追加してやることにより、なぜかvarious_outline { border:#000000 2px solid;｝の下枠が表示されるということならば、various_body{border-bottom～}をvarious_body{background-color～}と同じ色に指定すれば、various_outline { border:#000000 2px solid;｝だけが下枠として表示されて見える。

Firefoxで閲覧時において、IEで下枠を表示させるためのborder-bottom:#FFFFFF 1px solid;は、background-color:#FFFFFF; と同じ色に指定すれば、various_outline { border:#000000 2px solid;｝だけが下枠として見える。

あくまでも原因がわかるまでの小細工にと思って試してみたところ、私の環境からは（Firefox、IE共に）、下枠が表示されて見えたというだけです。「問題なく表示される」というのは語弊がありましたね。申し訳ないです。

[ 2010/01/09 20:42 ] [ 編集 ]

[ 7800 ] > 名無しさん、通りすがりさん

> 名無しさん
画像を載せてくれてありがとうございます。ちょうど今IE環境がなくて解らなかったのですが、IEだと下が表示されていなかったんですね。

なぜ表示されないかは謎です。IEは他のブラウザほどWeb標準に準拠できていないしバグも多いので・・・＾＾；
通りすがりさんが教えてくれた回避策で対応してください。

> 通りすがりさん
こんなに丁寧に詳細に答えてくれて本当にありがとうございます。
m(__)m

[ 2010/01/09 22:55 ] [ 編集 ]

[ 7808 ] ＞いたおさん、通りすがりさん

ご協力して下さり有難う御座いました。
スタイルシート状は正しくてもIE環境でバグが発生するということもはじめて知りましたし、暫定的措置を教えて下さり不安が取れて助かりました。

[ 2010/01/10 00:25 ] [ 編集 ]

[ 7817 ] > 名無しさん

暫定処置を教えてくれた通りすがりさんのおかげですね＾＾

[ 2010/01/10 22:01 ] [ 編集 ]

コメントの投稿