Primary Planet


スポンサーサイト

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

投稿日時 : --年--月--日(--) --:--


丸裸になってみる

丸裸になって見つめなおしてみることも必要なのでは?とか。

こういうボタンを流行らせることで、CSS の認知度が上がらないかなあとか思うのですが、いかがなものでしょうか。(^^ゞ

ちなみに、私が愛用している Opera では全く動作しないボタンです。念のため。

強引に Opera にも対応させてみるテスト(Mac の方はわかりましぇん)。(^^ゞ

さらに改変しました。やっぱりボタン1つのほうがわかりやすいですもんね。素人スクリプターによるがらくたスクリプト…orz 以下、ボタンの導入方法を書いておきます。

CSS ON/OFF ボタンの導入方法

function cssOnOff(){

    var targetEL = document.getElementsByTagName("link");
    for(i = 0; i < targetEL.length; i++){
        if(targetEL[i].rel == "stylesheet"){
            if(targetEL[i].disabled == false){
                targetEL[i].disabled = true;
            }
            else if(targetEL[i].disabled == true){
                targetEL[i].disabled = false;
            }
        }
    }

}

というスクリプトを適当な名前(拡張子 .js)で保存してアップロード。</head> の直前に

<script type="text/javascript" src="スクリプトのURL"></script>

を追加。そしてボタンを設置したい場所に

<button type="button" onclick="cssOnOff(); return false" onkeypress="cssOnOff(); return false">CSS ON/OFF</button>

と書けば OK。Windows 及び Mac において IE, Firefox, Opera で動作するはずです。Safari では動作しないようです。

Safari でも動作する CSS ON/OFF ボタンの導入方法

(X)HTMLテンプレートで、rel 属性に "stylesheet" が指定されている link 要素に、CSS という名前の id 属性を追加。例えば、

<link href="<%css_link>" type="text/css" rel="stylesheet" media="all" id="CSS" />

という感じ。そして、

var targetEL = document.getElementById("CSS");

function css_off(){
    targetEL.disabled = true;
}

function css_on(){
    targetEL.disabled = false; 
}

というスクリプトを適当な名前(拡張子 .js)で作成しアップロードし、</head> の直前に

<script type="text/javascript" src="スクリプトのURL"></script>

を追加。そしてボタンを設置したい場所に例えば、

<dl>
<dt>CSS</dt>
<dd><button type="button" onclick="css_off(); return false" onkeypress="css_off(); return false">OFF</button>
⇔<button type="button" onclick="css_on(); return false" onkeypress="css_on(); return false">ON</button></dd>
</dl>

と書けば OK。

CSS

投稿日時 : 2005年08月11日(木) 00:37


コメント

sugar
Safariでも動作せずなのはちと残念ですが、いただいてまいります。

==========
えーと
新しい方は,NoriyaさんのページではSafariでも動いたのですが、私のページでは動きません。
前回のは私のページでもFirefoxでは動いたのに……。どっかで設置が間違ってるのでしょうか。すべてコピーペーストなのに。もし心当たりがありましたらご教示願えますか?&前回のボタンの記述を教えてください(^^; jsは残してたんですが……
2005年08月11日 (木) 23:19
URL
編集
Noriya
sugar さん、おはようございます(どこで書いている?笑

もう設置されている方がいらっしゃるとは露知らず、勝手に更新してしまってごめんなさい。新しいほうは、実はテンプレート側も1箇所だけ触らないといけないんです。うちのスクリプトを「そのまま編集せずに」使っていただいている前提で、sugar さんのところなら、

<link rel="stylesheet" type="text/css" href="http://blog9.fc2.com/b/bittersweetdreams/template/sweet_summer/style.css" media="screen,tv" title="デフォルト">

の部分を、

<link rel="stylesheet" type="text/css" href="http://blog9.fc2.com/b/bittersweetdreams/template/sweet_summer/style.css" media="screen,tv" title="デフォルト" id="CSS">

とします。link 要素に CSS という名前を持った id 属性を追加しています。これで動作するはずです。JavaScript を利用して、CSS という名前を持った id 属性が指定されている要素を探し出し、その要素を無効にしたり有効にしたりする仕組みです。

前回のボタンの記述ですが、

<button type="button" onclick="css_on_off(); return false" onkeypress="css_on_off(); return false">CSS ON/OFF</button>

です(たぶん 汗)。帰ってから再度確認しますw。
(この場所からは http://blog*.fc2.com/~ にはアクセスできないのです…orz)
2005年08月12日 (金) 08:35
URL
編集
sugar
丁寧なご説明ありがとうございました。
今回はその部分だけではなく、その上まで見なければならなかったんですね。私はそこまで思い至らず、なぜなんだろうと頭をかしげるばかりでした。JavaScriptの仕組みが分かれば、簡単に目処がついたんでしょうけど。

でも、おかげさまで無事、Safariでも動きました。オフにしてはorz,気を取り直してはオンにし、ちょこちょこと調べて学んでは直しているところです(^^;
ありがとうございました。
2005年08月12日 (金) 12:10
URL
編集
Noriya
スクリプトを改変しています。(^^ゞ
Safari でも動くといいんですが…(Opera, Firefox, IE では動きました)
2005年08月13日 (土) 10:35
URL
編集
sugar
ソースを覗き見でしたが、新たに設置方法まで記していただいて……

それが、また動かなくなりました(^^;
FirefoxではOKなのですが、Safariの何かがひっかかってるんでしょうね。バージョン2は動いたんですが。どこがどう違うのか私にはちんぷんかんぷん(^^;

で、バージョン2を置きたいと思うのですが、バックアップファイルを上書きするというぶらぼーな真似をおかしてしまいまして……以前のバージョンの詳細を教えていただけないでしょうか(^^;
2005年08月13日 (土) 10:45
URL
編集
Noriya
> それが、また動かなくなりました

…そうですかぁ。手元に Mac がないもので確認のしようがないんです m(__)m (Mac には数回しか触ったことがありません 汗) 今の私の知識では対処できそうにありませんが、研究してみます。

バージョン2についても記事内に追記しておきました。
2005年08月14日 (日) 09:31
URL
編集
sugar
お手数かけました。
CSSへのリンクをする/しないを切り替えているスクリプトだということは分かったんですが(当たり前ですね^^;)、私には何が何やらで、ただ「動きません」「動きます」というしかできず、申しわけありませんでした。
せっせとボタンを貼り付けておきます(^^
2005年08月14日 (日) 10:41
URL
編集

コメントの投稿

(N)
… サイトを持っている人は是非
(C)
… 半角英数4文字以上。編集するかもしれない時は必須。

トラックバック

脱いだらすごいんです
……になりたい。Primary PlanetのNoriyaさんのところから頂戴してきました。CSSのオン/オフを1クリックで。(「丸裸になってみる」)CSS ON/OFFボタン貼付けるのも恥ずかしい裸なんですが……。トップページの「イロイロ」のところに常備します。個別にも置くか?(汗)CS
2005年08月12日 (金) 00:39
sugar pot
自分用テンプレできました~
「へちま」が問題なく稼動しているようなので、自分用にカスタマイズしました~Google AdSenseとStyle ChangerはHTML内に直接書き直しました。プラグインに入れてもいいのですが、今回は広告の幅が広いタイプなので、他のテンプレをプレビューしたときにはみ出してしまうので
2005年08月15日 (月) 23:15
ウェビンブログ
本記事へのトラックバック URL
http://primaryplanet.blog5.fc2.com/tb.php/87-1de87495


Search Form

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