忍者ブログ
*ADMIN*

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

≪ 2024.04│ 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 ≫
2024-04-19(Fri)

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

author:あるふぁ [06:26:29]│ Comment(-) │ Trackback(-) │〆

│▲

2006-07-15(Sat)

スクロールバーの表示・非表示の切り替え

久しぶりにカスタマイズの小技ネタ。
今回はプラグインにスクロールバーを表示したあと、そのスクロールバーの表示・非表示を切り替えられるようにしようというもの。
(スクロールバーをただ表示させるだけなら｢プラグインにスクロールバーを表示する｣という記事を見てみてください。)

実際の表示はこんな感じになります。

←左がスクロールバーが出てるとき、右が出ていないときです。

切り替えボタンは｢Scrollbar ONorOFF｣というところです。
とりあえずテキストリンクになってますが画像にしても問題ないです。
それでは設置方法です。

まずスクリプトを設置します。
スクリプトはプラグインHTMLに書き込んでも良いし、テンプレートHTMLに書き込んでもどちらでも良いです。
テンプレートHTMLに書き込む場合は<body>の直後がいいと思います。
(私の場合はプラグインHTMLに書き込んでしまってます)

設置するjavascriptはこれです▽
<script type="text/javascript">
<!--
size = 1;
sizeHeight = new Array("100%","200px");
function scrollbox(c) {
boxID = document.getElementById('scrollbarbox'+c)
size = ( size == 1) ? 0 : 1;
boxID.style.height = sizeHeight[size];
}
//-->
</script>
オレンジ色で示してあるのがスクロールバーを表示する長さ(ボックスの高さ)になります。

それから今度は実際にスクロールバーを表示させる部分を変更します。
こちらも簡単です。
<div id="scrollbarbox1" style="height: 200px; overflow:auto;">
スクロールバーが表示される中身の部分
</div>
上のようにdivタグで挟み込んでください。
このとき200pxの部分はスクリプトで指定した値と同じにしてください。

最後にスクロールバーのON/OFFの切り替えボタンを設置します。
設置場所は上でも下でもお好きなところにどうぞ♪
<a href="#scrollbarbox1" onclick="scrollbox(1)" title="スクロールバーの表示・非表示の切り替えをします">Scrollbar ONorOFF</a>


このスクロールバーのOn/Offの切り替えはこのままでは複数設置することはできません。
複数設置したい場合はjavascriptはそのままひとつだけでかまいませんので、赤い文字で表示してある数字を二個目なら｢2｣、三個目なら｢3｣などど他の数字変えてください。その際青で示した部分は変更しないでください。

確認は今のところWinXP+IEでしか行ってません。その点、ご了承ください。
PR

author:あるふぁ [23:55:33]│ Comment(4) │Trackback() │〆

[カスタマイズ]プラグイン

│▲

夏休み♪← HOME →ありがとうございます♪
＊COMMENT-コメント-
▽はじめまして。
こんばんわ。はじめまして。
blog TK*Plus1さんのＬＩＮＫから遊びにきました。
早速、こちらのスクリプトを使わせて頂きました。
ありがとうございます。
ＴＢさせて頂きました。
posted by mico URL ::2006-10-19-Thu 18:54:03 ::EDIT
△Re:はじめまして。
micoさん、はじめまして(^-^*）

>blog TK*Plus1さんのＬＩＮＫから遊びにきました。
>早速、こちらのスクリプトを使わせて頂きました。

こちらこそありがとうございます。
しかもわざわざTB。頭が下がります。
あるふぁ│2006-10-20-Fri 11:58
▽今こそ出番が・・・(笑)
ＴＢ Ｐｅｏｐｌｅに参加してみたり、リンクリストがやや長くなってきたので、いよいよスクロールバーを設置してみるコトにしました。
で、いまこそ出番とばかりに、スクロールバーの表示をＯＮ/ＯＦＦにする策を拝借させていただきました♪(ﾟ▽ﾟ*)
切り替えボタンは画像に・・とか思っていたのですが、思いつきで設置に至ったってコトで、これからメンテが入るっていうのに「時間がナイっっ！！」って事態に陥り・・・
あるふぁサンの記事からそのままを貼り付けて使用してしまいました(・∀・；)
何も、こんな時にムリやり作業しなくたっていいのに・・というハナシもありますが、ともあれ無事に設置です。
いつもありがとうございます！！

毎度毎度ですが、ＴＢさせていただきますｍ(＿ ＿)ｍ

Ｐ．Ｓ.
今回もキレイなテンプレですね(・∀・)
私もがんばらねば
posted by Ｐａｖｌｏｂａ URL ::2006-08-21-Mon 01:37:33 ::EDIT
△Re:今こそ出番が・・・(笑)
返事が遅くなりました

ブログを続けていくといろんなことをやりたくなったり、いろんなものをサイドバーに入れたくなりますよね～
そして、スペースがなくなる・・・

少しでも役立ててもらえたらうれしいです。

追伸：
最近、カスタマイズのネタを出してないので、少しはUPしないと。
カスタマイズがメインなハズなのに、油断するとテンプレ愚痴ブログになってる
（もうおそいかも知れないけど・・・orz）

あるふぁ│2006-08-22-Tue 22:59
▽無題
どもです。トラバさせていただきました。
今までスクロールバーすら設置できなくて四苦八苦してたんですけど、納得です（全然判ってなかった（笑））。
がしがし使わせていただくことになると思いますです。

そうそう、ＮＩＮＪＡブログお勧めブログのトップに掲載されてますね。なんか自分のことのようにうれしかったり（笑）。

ところで、ＰＣ壊れてる間は本家のほう観れなかったんですけど、もう引越しされちゃったんですか？。

それでは。
posted by まーくん＠３６番 URL ::2006-07-31-Mon 20:25:40 ::EDIT
△Re:無題
まーくん＠３６番、こんばんわ

>ところで、ＰＣ壊れてる間は本家のほう観れなかったんですけど、もう引越しされちゃったんですか？。

うっ　(>_<") イター
引越し、したんですけれどどーもうまくいかなくて(^^;)
また忍者にもどることにしようかなぁと。
ただどうせならURLを変えてもう一回心機一転しようかなと
あるふぁ│2006-07-31-Mon 20:51
▽これはっっ！！
すばらしいですね！！
ぜひとも使いたいと自分のトコを眺めてみたのですが、今んトコ必要がナイからスクロールバーすら設置してない状況なので出番がナイようです（´・ω・`）
なんか「使いたいな～・・イジりたいな～・・」って気分なんですけどね(笑)
posted by Ｐａｖｌｏｂａ URL ::2006-07-16-Sun 00:39:39 ::EDIT
△Re:これはっっ！！
>すばらしいですね！！
>ぜひとも使いたいと自分のトコを眺めてみたのですが、今んトコ必要がナイからスクロールバーすら設置してない状況なので出番がナイようです（´・ω・`）
そーですね。設置してないと意味ないですね。
応用するとテンプレート本体のコメント欄なんかに使えるのですけれど。
一回使って、微妙なことになったので保留してるのです。

>なんか「使いたいな～・・イジりたいな～・・」って気分なんですけどね(笑)
ふふふ。いじりたいときはいじりませう(笑
きっとイイコトがあります(嘘です。保証できないです。

なんか使うときあったら思い出してみてください♪
あるふぁ│2006-07-16-Sun 00:57
＊COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
　
Name：
Title：
Mail：
Url：
Color：
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆
Decoration： Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message：
Pass： ※編集時に必要です。
Secret： 　※チェックすると管理者へのみの表示となります。
＊TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
←No.122No.120No.119No.118No.117No.116No.115No.114No.113No.112No.111→
■Category
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
　徒然倶楽部 →こちらは記事の内容を下に移転＆閉鎖しました。
　現在は十六夜's Blogがメインブログになってます。
 　Alphaの小部屋･･･BOOKLOGで作った本棚
　Mixi･･･参加中のSNS
　十六夜-the sixteeth night-･･･現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況：Windows XP SP2
ブラウザ：主にFirefox　他IE、Opera等
解像度：1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ１件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
03

05
日 月 火 水 木 金 土
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
■CM&TB
●コメント

●トラックバック
    Scrollbar ONorOFF
    ■NinjaLink
    ■Thanks
    テンプレートを作成するに当たってよく利用させていただいているサイト様です。
    ■QRcode
    QRコードをクリックするとメールフォームが開きます。
    メールフォームでPCから携帯にこのブログのURLを送ることができます

    もし、携帯電話で表示されきれない～とご不満の方はこちらのアプリを導入してみることをお勧めします。

    無料体験できるのでぜひお試しください♪
    ■EntryNavigation
    ≪ *122*120*119*118*117*116*115*114*113*112*111* ≫
    ■Template
    ○公開したテンプレのプレビュー

    ブルーチャイナ
    詳細     		ブルーチャイナ
    詳細
    Gray2block
    詳細     		China
    詳細     		Gray
    詳細
    JapanBlue
    詳細     		碧
    詳細     		蒼
    詳細
    ○公開された携帯用テンプレのプレビュー

    The Leaf
    詳細
    ○忍者ブログで共有化中のテンプレ

    ●Alternation-緑×白-
    記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
    パンくずナビも付いてます♪

    ●The Leaf
    初の携帯用テンプレート。さわやかな感じに仕上げてみました
    絵文字使用。トップページにカテゴリー表示アリ。

    ●ブルーチャイナ
    涼しげなチャイナ風左右メニューテンプレ。
    ｢China｣の色違いのような感じですが、配置は違いますのでご注意ください。
    ※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
    ⇒ピンクチャイナ

    ●Gray2block
    ノート風テンプレ｢Gray｣の２カラム版です。
    ●China
    かわいい系の３カラムテンプレート。イメージはチャイナ風♪
    同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
    ⇒China-BlueVer-

    ●Gray
    灰色のノート風罫線テンプレ。追記開閉式の３カラムです。

    ●JapnBlue
    サッカー日本代表ユニフォームなテンプレ。追記開閉式
    ※このテンプレには２カラムバージョンもあります。
    ⇒JapanBlueの２カラム版

    ●碧-midori-
    淡いパステルグリーンのテンプレ。追記開閉式

    ●蒼
    画像使用なしの５ブロックテンプレ。

    Scrollbar ONorOFF

    ○広告




    ■Recommend
    ○ルナエンバシージャパン

    ストレイシープがなんだかかわいくて好き(^-^*）

    ■Visiter