Bonjour!

« [お知らせ]サイドバー折り畳み2の元記事に脱字等がありました | トップページ | 「最近のトラックバック」を別窓で開くようにする »

2006-03-04

サイドバー折り畳みボタンを画像に

もう一月ほど前になっちゃいましたが、サイドバー折り畳み2のボタンを画像にする方法を、文字書きわーるど♪のhiroさんがトラックバックしてくれました(^^)

文字書きわーるど♪: サイドバー折りたたみスイッチを画像に♪.

この方法だと、開閉状態によるボタンの色変え同様、開閉で別の画像が使えるのもいいですね。

なお、画像を使うだけなら、switchStyle = "..."; の中に、background-image:url('画像のURL') left top no-repeat; と書き足してやるだけでいけるはず。あ、いや、foldMarkとunfoldMarkを消す(""にする)(全角空白" "(*)にする)ことも必要ですね。

# (*)ボタンの開閉マークをなし("")にしてしまうと、エラーになって上手く動作しないようです。確認してませんでした~(^^; 半角空白" "でもIEで上手く動作しないみたいなので、全角空白" "でやってみてください。

みなさんも、hiroさんのところを参考にして、ボタンを画像にしてみてはいかがでしょうか。

----

私も、このテンプレだとリストタイトルの頭に元々画像があるのにさらにボタンがついてしまって鬱陶しく思っていたので、できれば頭の画像をボタンにしたいと思っていたのですが、ひろさんのアイデアをみて、これならいけそうだと思いました。トラックバックをいただいてからなかなか時間がとれなくて忘れてしまっていたのですが、ようやく今日思い出したので挑戦してみたら、上手くいきました(^^)

今回の私のやり方は、テンプレートにかなり依存した方法なので、直接コピペで使うのはこのテンプレートじゃないと使えないですが、応用すれば他のテンプレでも似たようなことができるはずです。

今回やった手順は、こんな感じ。

-テンプレのCSSのURLを調べる
-CSSから、元々のリストタイトル画像のURLを割り出す
-折り畳みボタンがついたところだけ元々ある画像を消し、大体同じ位置に画像化ボタンを配置するようなCSSを考える

結局マイリストだけにしたので、以下に現在のメモ欄の内容を載せておきます。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
</script>
<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/foldSidebar02c.js">
</script>
<script type="text/javascript">
<!--
foldMark = "-";
foldTitle = "close";
unfoldMark = "+";
unfoldTitle = "open";
switchStyle = "";
labelStyle = "letter-spacing:0.1em;";
counterPrefix = "(";
counterPostfix = ")";
counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";
foldBroadly = true;
//
pattern = "最近の|更新|blog|検索|スクリプト|バックナンバー|カテゴリ";
makeSwitchesBy(pattern);
//
pattern = "最近のコメント|最近のトラックバック|更新|blog|詳細検索|スクリプト|バックナンバー|カテゴリ";
foldContentsBy(pattern); 
//
pattern = "最近の記事|最近のコメント|最近のトラックバック|カテゴリ";
countItemsBy(pattern);
//-->
</script>
<style type="text/css">
<!--
/* 折り畳みボタンをつけた見出しだけ元画像を消す */
div.module h2.folded {
	padding: 0px;
	background: none;
}
div.module h2.unfolded {
	padding: 0px;
	background: none;
}
/* 折り畳みボタン */
div.module h2 button {
	float: left;
	margin: 0 2px 0 0;
	width: 29px;
	padding: 0;
	height: 29px;
	line-height: 1em;
	text-align: center;
	text-indent: 0;
	color: silver;
}
/* 開閉状態で別々の画像付き折り畳みボタン */
div.module h2.folded button {
	border: outset 1px silver;
	background: url("http://template.cocolog-nifty.com/000045/three_column/component/link-note.gif") left top no-repeat;
}
div.module h2.unfolded button {
	border: inset 1px silver;
	background: url("http://template.cocolog-nifty.com/000045/three_column/component/module-h2.gif") left top no-repeat;
}
-->
</style>

foldMarkとunforldMarkは残して白抜きにしてみました。

« [お知らせ]サイドバー折り畳み2の元記事に脱字等がありました | トップページ | 「最近のトラックバック」を別窓で開くようにする »

ウェブログ・ココログ関連」カテゴリの記事

コメント

聞いてくださ~い!!スイッチを画像に出来ました(*⌒ー⌒*)v hiroさんの所へ行ったり来たり…
珍しく!?つまずくことなく設置出来たので、自分でもビックリですが、とっても嬉しくて…(^-^;
 ただ、今まで開いたときにコメント欄は折り畳まない状態だったのが、全部折り畳んだ状態になってしまったのは、どこか間違っているところがあるのでしょうか?今のままでも、問題はないのですが、ちょっと気になって…お時間がある時、指南に来ていただければ嬉しいです。

 今日、早速記事で紹介させていただいたので、トラバさせていただきました。
 今、とりあえず設置できた状態ですが、+と-が画像に重なっているのはどこか間違っているからなのでしょうか?hiroさんのように、+と-を取ってみましたが、それでは上手く反映されませんでした。今、hiroさんにも尋ねていますが、先ほどのコメント同様、お手すきの折にでも、また覗いてやっていただければ嬉しいです。いつも厚かましいお願いですみません。

>今まで開いたときにコメント欄は折り畳まない状態だったのが、

最初から「最近の記事」だけ折り畳まない設定のままだったように思いますが…。

>全部折り畳んだ状態になってしまったのは、どこか間違っているところがあるのでしょうか?

いや、これは、「状態保持機能付き」だからです。

…という意味でなければ、またご質問ください。

----

>今、とりあえず設置できた状態ですが、+と-が画像に重なっているのはどこか間違っているからなのでしょうか?

そうですね。

>hiroさんのように、+と-を取ってみましたが、それでは上手く反映されませんでした。

取れてないようですが…。

>今、hiroさんにも尋ねていますが、

hiroさんは作者じゃないので、できるだけ先に私に質問してくださいね。

ごめんなさぃ!お詫び&訂正です><;

foldMarkとunfoldMarkなんですが、消す(""にする)とスクリプトエラーが出ます。
うちは消さずに、マークが目立たないよう"."って記述してるんです。
自分でやっててすっかり忘れてて(ぉいぉぃ)記事のほうにも、消すって書いてしまってました…(´Д⊂

今から記事のほうも訂正です。
うっかりしてまして・・
本当にすみませんでした(*- -)(*_ _)ペコリ

facetさん、こんにちは。
早速、ボタンを画像に変更してみました~
IE6(WinXP)とOpera8.5で、何とか見苦しくない程度に調整できたかと思います、たぶん。

私のブログの「サイドバー折り畳み」の記事で、追記して御紹介させていただきました。
facetさんのボタンはわかりやすいですねー。ボタンとして使うなら、私のブログも、もう少し大きな画像の方がわかりやすいだろうか、とも思ったのですが、とりあえず、このままいきます。
ありがとうございました。

→hiroさん

ありゃま(^^;

半角空白でもダメですね。
全角空白だと大丈夫っぽいので、とりあえずそれでいくことにします。

ご連絡、ありがとうございました~

→秋津羽さん

>私のブログの「サイドバー折り畳み」の記事で、追記して御紹介させていただきました。

どうもです(^^)

>facetさんのボタンはわかりやすいですねー。ボタンとして使うなら、私のブログも、もう少し大きな画像の方がわかりやすいだろうか、とも思ったのですが、とりあえず、このままいきます。

大きさというより、色相とかの問題かもしれませんね。

ウチのは、たまたま片方が黒だったことで影っぽく見えることや、これまたたまたま黒が右に1dotずれていて開閉に対応して動くように見えることなんかが偶然作用して、より分かりやすくなっているのかもしれないなあと思いました。

あと、気づいてらっしゃったかなと思いますが、fold/unfoldMark、""や" "(半角空白)はダメでした(^^; スミマセン。
(記事を修正しましたのでご覧下さい)

大変失礼しましたm(__)m
hiroさんの追加部に何か設定があるのかな?と思って、そちらにも尋ねてみたんですが、作者のfacetさんに質問するのが道理ですね。本当にすみませんでした。以後、気をつけます。
 hiroさんから、こちらにも連絡があったようですね。初め[ , ]にしたんですが、[ , ]が出てしまうので、私もfacetさんがされたように、全角空白にしてみたら、きれいに表示されました。ありがとうございました。これからもよろしくお願いします。
追伸:状態保持機能付き…そうだ!そのとおりでした。なんて質問を…バカなヤツと笑ってください。重ね重ね失礼しましたm(*__*)mペコ

シナモンさん、

前回の私のコメントですが、何となく掲示板のマルチポストみたいで気になったのと、作者としては他の人にご迷惑がかかるのを極力抑えたいという気持ちだったんですが、今回はシナモンさんがhiroさんに連絡してくださったお陰で早期に解決することができました。そういう意味ではとてもありがたかったです。シナモンさんの方もこれで問題解決ということのようで、良かったです(^^)

状態保持の件の方は、まあご愛嬌ということで(^^;

実際、今回の例でも分かるように、こうやっていろいろとコメントしていただけることは本当にありがたいことなので、また是非なんでも気軽に書き込みいただければ幸いです。またよろしくお願いします(^^)

こんばんわ!!
以前「サイドバー折り畳み2」でお世話になりました、のんのんです。
facetさんの記事を見て・・・・やりたい!!
と思い、またまたチャレンジさせていただきました。
私も、シナモンさんと同じで、hiroさんの所を行ったり来たり・・・してしまいました。
無事(たぶん)設置が出来ました。
ありがとうございました。
トラックバックを送らせていただきます。

のんのんさん、こんにちは。
画像化、上手くいったようですね(^^)
また何かあったらご連絡ください~

この記事へのコメントは終了しました。

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1941/8947594

この記事へのトラックバック一覧です: サイドバー折り畳みボタンを画像に:

» サイドバー折り畳みボタンを画像に・追記 [文字書きわーるど♪]
「サイドバー折り畳みボタンを画像に」の追記です(o^-^o) 元記事「サイドバーの折り畳みボタンを画像に」 http://hironyan.txt-nifty.com/text/2006/02/post_f3aa.html 私のブログは、元のテンプレのサイドメニューのタイトル部分(カテゴリ・アーカイブ・バックナンバー、などの表記)に何も装飾がありませんでした。現在貼られているストライプの壁紙は私がスタイルシートを改変して付け加えたものです。 けれど、テンプレによっては、元々、サイドバータイトルにアイ... [続きを読む]

» サイドバー折り畳みボタンを画像に♪ [おやつの時間]
 ようやくサイドバー折り畳みが設置出来て、 次はボタンの色を変えたいなと思って [続きを読む]

» サイドバー折り畳みボタンを画像に [のぶたんぽぽ]
私が初めてチャレンジしたのが・・・。 facetさんのサイドバー折り畳み2でした [続きを読む]

« [お知らせ]サイドバー折り畳み2の元記事に脱字等がありました | トップページ | 「最近のトラックバック」を別窓で開くようにする »

contact

検索

無料ブログはココログ
2017年4月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

BANNERS