スポンサーサイト

--年--月--日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイドバーの折りたたみ

2007年03月14日
私のブログは2カラムですので、どうしてもサイドが長くなってしまいます。(^^;;
そこでいろいろ悩んだのですが、サイドバーの折りたたみを導入することにしました。
こちらのカスタマイズは「小粋空間」のyujiroさんの
小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)
「yozoの気が向いたと記2.0」yozoさん
サイドメニューの折りたたみの設定(こちらはHTML編集が出来るブログ用)、
FC2ブログ用サイドメニューの折りたたみの設定(こちらはFC2ブログのプラグインを利用)を
参考にさせていただきました。
ありがとうございました♪(*- -)(*_ _)ペコリ

ちなみにこのサイドバーの折りたたみはCookieを使用しておりますので
開いたところは次回来たときも開いたままになっています。
(Cookieを削除してしまうとまたもとに戻りますが。)
なので自分の必要な部分を開けてお楽しみくださいね♪(=´ー`)ノ

さて私の手順を書いていきます。
私はFC2ブログのプラグインをそのまま使う形をとりましたのでyozoさんの
FC2ブログ用サイドメニューの折りたたみの設定の記事の順に従って
カスタマイズさせていただきました。
その際の手順だけ書かせていただきます。
細かいソースはyujiroさん、yozoさんの記事のソースをご覧ください。分かりやすいです!!
(1)menufolder.jsをダウンロードし、FC2ブログにアップロードします。
(2)<head></head>の部分にインクルード文を追加します。
(3)次にプラグイン部分のhtmlを変更します。
折りたたみする部分としない部分で記述が違いますので注意!!
うちのブログはBlogPetうさびと一心同体ですので
こちらは折りたたみできません。(笑)
(4)CSSを追加します。
折りたたみする部分のCSSの追加です。
私のテンプレートの場合は
折りたたみする部分は.sidetitle2
折りたたみしない部分は.sidetitleとなっています。

さてこのCSSを自分なりに変更して見た目を改良してみることにしました。
基本はyozoさんのサイドメニューの折りたたみの設定 yozoの気が向いたと記2.0
CSSを使わせていただいています♪
私が変更したり追加した部分は赤字の部分です。

●折りたたみ部分
/*サイドバーの折りたたみ用の設定*/
.sidetitle2 {
width: auto;
background:#ffffff;
margin:3px 0px 0px 0px;
padding: 0px;
text-align: center; /* テキスト配置 */
}
.sidetitle2 a {
width: auto;
}
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
display: block;
padding: 2px;
font-family: Verdana, Arial, sans-serif;
font-size:12px;
letter-spacing:1px;

text-decoration: none;
margin-top: 3px;
margin-bottom:0;
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
height:22px;
_height:30px;
border:1px solid #ff7ba6;
text-align: center;
color: #444444;
line-height: 140%;
background-image:url(http://画像1のURL);
background-position: 5px 2px;
background-repeat: no-repeat!important;

}
/* マウスポイント時 */
.sidetitle2 a:hover {
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
margin-bottom:0;

font-family: Verdana, Arial, sans-serif;
font-size:12px;
letter-spacing:1px;
color: #ffca2b;

text-decoration: none;
background-image:url(http://画像2のURL);
background-position: 5px 2px;

}

070314oritatami.jpg

画像をタイトル部分に配置してみました。
画像1が何もしないときの画像、
画像2がマウスをタイトルの上に置いたときの画像です。
左のキャプのようにマウスを上に置いたときは
別の画像が出るようにしています♪
通常の部分とマウスポイント時の部分の記述をそろえておかないと、
マウスを置いたときに画像や文字がずれてしまい、
気持ち悪くなるのでご注意ください。


●折りたたみしない部分
/* サイドメニュータイトル */
.sidetitle {
margin-top: 3px;
margin-bottom:0;
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
height:22px;
_height:30px;
border:1px solid #ff7ba6;
text-align: center;
letter-spacing:1px;
color: #444444;
background: #ffffff;
font-size: 12px;
line-height: 140%;
background-image:url(http://画像1のURL);
background-position: 5px 2px;
background-repeat: no-repeat!important;
}

今の段階でこんな感じのCSSになっています。
少しだけソースについてまとめてみました。

background-image:url(http://画像のURL);
background-position: 5px 2px;

プラグインのタイトル部分の画像の設置です。
赤字部分は画像のURLを記入してください。
background-position: ○px ☆px; は
画像を左から○px、上から☆pxの位置に配置する記述です。

height:22px;
_height:30px;

heightはタイトル部分の高さの調節です。
画像の大きさにより調節が必要になります。
「_」アンダーバーが付いている記述に関しては
IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック)をご覧ください。

今の段階で折りたたみの設定をしていないのは
「BlogPetうさび」「アクセス解析♪」「Appendix」の部分。
そして今までは折りたたみにしていたブログパーツのリラックマですが、
足跡機能が増えたようなのでデフォルトで開く設定に変更しました。
他の部分はデフォルトで閉じる設定になっています。
先ほども書きましたがCookieを使っているのでCookieを削除しないかぎり、
開いた部分、閉じた部分はブラウザが記憶してくれますので
皆様の使う部分のみを開いて楽しんでいただけると嬉しいです♪

↓ぽちっとよろしくお願いします♪ペコリ(o_ _)o))
banner_02.gif

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

トラックバックURL


トラックバック

FC2ブログ用サイドメニューの折りたたみの設定 from yozoの気が向いたと記2.0
 07/01/19の記事にあるように、ここのブログのサイドメニューに折りたたみ機能を設定しました。これは、訪問してくださった方が、文字通りサイドメニューを必要に応じて開閉することができるのはもちろんのこと、その方が [Read More]

コメント

こんばんはー。まゆびさん♪
わーー。折りたたみですねー☆
キレイにまとまっていいですよねー☆
タイトル部分にマウスを持っていくとコーヒーカップの色が変わるのですねー♪
わーー。手が込んでて楽しい♪
楽しいのでいっぱい遊んでしまいました♪
素敵ですねー♪
なんかすっきりしてとってもいいですねー♪
yozoちゃんのところで、見たときも、とっても見やすいなぁと思った記憶があります☆
これからもいろんなウィンドー開いて楽しみたいと思います♪
まゆびさん、こんばんはー♪
ついにサイドバーの折りたたみ記事の登場ですね♪yozoはこっしょり楽しみにしていましたよ。そもそもサイドバーに雪兎ちゃんがいたときに、たくさん遊ばせていただきましたからね。(ΦωΦ)ふふふ・・・もちろん、今のカップでも、遊ばせていただいてまっす。( ̄∇ ̄+) キラキラキラ~♪

CSS編集については、yozoの記事はyujiroさんのコードそのままでの紹介ですからね、まゆびさんらしいこだわりの設定の解説があってとてもナイスな記事ですね。(゚-゚*)(。。*)ウンウン クッキーで開閉の状態が保持されることにも、ちゃんと説明されていますね。
yozoもちゃんとしなきゃっ! (; ̄ー ̄A アセアセ・・・

追伸:記事でのyozoの紹介及びトラバありがとーございまっす♪
こちらからもお返しのトラバ入れさせていただきました。m(_ _)m
enuさん、こんばんは♪(o・ω・)ノ
>キレイにまとまっていいですよねー☆
ヾ(@⌒▽⌒@)ノワーイ!ありがとうございますー!!
私の場合記事も長いのですが(苦笑)、
サイドが長いのがずっと気になっていて。。。
折りたたみは導入するかどうかすっごく悩んだのですが、
yujiroさん、yozoさんの分かりやすい記事があったので
挑戦することにしました♪('-'*)エヘ
>タイトル部分にマウスを持っていくとコーヒーカップの色が変わるのですねー♪
そうなんです♪同じ大きさの画像ならいろいろ楽しめちゃうのですよ♪
またこれからもテンプレートのデザインを変えるときは
こんな風にしていこうと思っていますのでマウスを置いてみてくださいね♪
>yozoちゃんのところで、見たときも、とっても見やすいなぁと思った記憶があります☆
うんうん。やっぱりすっきりしますものね♪
enuさんがこちらのブログを見るために必要な部分だけ
開いて楽しんでもらえたら嬉しいです♪(*^-^)ニコ
yozoさん、こんばんは♪(o^∇^o)ノ
すいません、記事を書くのが遅くなってしまって。(*- -)(*_ _)ペコリ
>サイドバーに雪兎ちゃんがいたときに、たくさん遊ばせていただきましたからね。
兎ダンスはなかなか面白かったですよね~♪
本当はあの兎ちゃんのダンスを皆様にも見ていただきたかったのですが。
なかなか記事がまとまらなかったんですよねぇ。。。(^^;;
カップでも遊んでいただいているなんて嬉しいです♪《《《《♪♪(*´▽`*)ノ゛うふふ~

>CSS編集については、yozoの記事はyujiroさんのコードそのままでの紹介ですからね、
>まゆびさんらしいこだわりの設定の解説があってとてもナイスな記事ですね。
ありがとうございます!!細かい部分はyujiroさん、yozoさんの記事がとっても分かりやすいので
CSSの方に力を入れたほうがいいかな?と思ってこんな記事になりました。
>クッキーで開閉の状態が保持されることにも、ちゃんと説明されていますね。
クッキーを使っていない折りたたみもありますものね。
なので一応アナウンスさせていただいたのです♪(*'ー'*)ふふっ♪

今回の折りたたみカスタマイズでも本当にお世話になりました。
いつも分かりやすい記事をありがとうございます♪ペコリ(o_ _)o))
お返しのトラバもありがとうございました!!d(*⌒▽⌒*)b ニコニコッ
こんばんはー。
折りたたみのサイドバー、とってもすっきりですね!
ポインターを当てるとアイコンの色が変わるのも目を引きますよね。
お友達が増えてリンクが長くなってきたりすると
折りたたみメニューはほんとに便利ですね。
まゆび殿の所に遊びに来た時は活用させていただこうと思います!
ばばるさん、こんばんは♪(o^∇^o)ノ
すっきりしましたか!!ありがとうございます!!
カスタマイズした甲斐がありましたー♪(*'ー'*)ふふっ♪
>ポインターを当てるとアイコンの色が変わるのも目を引きますよね。
そうそう、面白いでしょ~♪
この画像を探すのが大変なのですが、
(同じ種類または同じサイズで色が違うものを探さないといけないので。)
それも楽しい時間です。(笑)
確かにリンクはどんどん長くなりますからね~。(笑)
ばばるさんもいらない部分は折りたたんで楽しんでくださいね♪

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。