前の関連記事：Blogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？
忍者おまとめボタンに「お気に入りに登録」ボタンがありますが動作しないブラウザがあるので動作するブラウザにだけ表示するようにします。
カウンタ付ボタンの設置はやめました
これまでカウンタ付ボタンを設置してきましたが、これがとても読み込み速度が遅いのです。
とくにSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法でページを描画後にSyntaxHighlighterのtableの高さをjQueryで設定してからスクロールバーをfleXcrollで置き換えるようにしたので、描画が遅い部分があるとスクロールバーの置き換えが終わるまで非常に時間がかかってしまいます。
またBlogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？でみたようにカウンタ付ボタンを設置しても一向にカウンタが増えませんでした。
ということでカウンタ付ボタンの設定はやめてカウンタなしのボタンのみにしました。
これで読み込み時間が非常に改善されました。
これを機会に「お気に入りに登録」ボタン
を設置することにしました。動かなくてもボタンをクリックすればアクセス解析のカウントは増える
ボタンをクリックしてみた動作を確認してみました。iOS Safari 何も起こらず。
Chrome、Sleipnir4 「ブックマークするにはCTRL+Dを押してください」と言われます。
IE8、IE10、FireFox ブックマーク登録ダイアログがでてきます。
ちなみに何も起こらないiOS Safariであっても、ボタンをクリックされれば忍者おまとめボタンのアクセス解析は、クリックした回数だけカウントが増えます。
こういう理由でカウンタ付ボタンのカウントとアクセス解析のカウントの違いがでてくるのですね。
ということでブックマークに登録できないブラウザではこのボタンは表示させないようにします。
動かないブラウザでは「お気に入りに登録」ボタンは表示させないようにする
まず「お気に入りに登録」ボタンでブックマーク登録ダイアログがでないブラウザの判定方法を考えます。
全てのブラウザ向けにJavaScriptでブックマークリンクを設定する方法 - [JavaScript + JavaScript] ぺんたん infoによると
(document.all||(window.sidebar&&window.sidebar.addPanel)||window.opera)の真偽判定で判定できそうです。
次に「お気に入りに登録」ボタンだけを消す方法を考えます。
1 2 3 |
<div class="favorite_button_l" data-url="投稿のURL" data-title="投稿タイトル" data-onetagbutton="true"> <a href="Javascript:void(0);"><img src="http://omt.shinobi.jp/images/favorite_button_l.png" title="ブラウザのブックマークに保存します" alt="favorite" style="border:none;"></a></div> |
「お気に入りに登録」ボタンの部分のHTMLソースはこのようにfavorite_button_lというクラス名がついています。
jQueryでこのclassがついたdivをdisplay noneにしてしまいます。
1 2 3 4 5 |
<script type="text/javascript"> $(window).load(function () { $("div.favorite_button_l").css("display", "none"); });</script> |
$(window).loadを$(document).readyにすると動きませんでした。
このままだと一旦ボタンが表示されてしまいます。
対策として、まずは「忍者おまとめボタン」全体を非表示にしておいて、「お気に入りに登録」ボタンを消してから「忍者おまとめボタン」を表示させることにします。
対策として、まずは「忍者おまとめボタン」全体を非表示にしておいて、「お気に入りに登録」ボタンを消してから「忍者おまとめボタン」を表示させることにします。
Blogger：ソーシャル(SNS)ボタンをつける(忍者おまとめボタンを利用)でBloggerのテンプレートHTMLで<div class='ninja_onebutton' style='width:340px;margin:0 auto;display:none'> というようにdisplay:noneを追加しておいて、div.favorite_button_lをdisplay:noneにしてから、div.ninja_onebuttonのdisplay:noneを消します。
1 2 3 4 5 6 |
<script type="text/javascript"> $(window).load(function () { $("div.favorite_button_l").css("display", "none"); $("div.ninja_onebutton").css("display", ""); });</script> |
これで「お気に入りに登録」ボタンが表示されなくなりました。
これらを組み合わせて「お気に入りに登録」ボタンの表示を制御します。
これらを組み合わせて「お気に入りに登録」ボタンの表示を制御します。
「お気に入りに登録」ボタンを対応ブラウザだけで表示させる方法まとめ
BloggerのテンプレートのHTMLでninja_onebuttonクラスのdivをdisplay:noneをつけて非表示にしておく。
1 |
<div class='ninja_onebutton' style='width:340px;margin:0 auto;display:none'> |
1 2 3 4 5 6 7 8 9 |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><!--jQueryのロード。既に済んでいるなら不要。--><script type="text/javascript"> $(window).load(function () {//ページが完全に読み込まれたら実行 if(!(document.all||(window.sidebar&&window.sidebar.addPanel)||window.opera)){//IEでもなくFireFoxでもなくOperaでもないなら $("div.favorite_button_l").css("display", "none");//favorite_button_lクラスのdivを非表示にする } $("div.ninja_onebutton").css("display", "");//非表示にしていた「忍者おまとめボタン」を表示させる });</script> |
テンプレートのHTMLに直接書き込む場合はHTML EnCoder | Widget GeneratorsなどでHTMLエンコードしてから書き込まないととエラーがでて保存ができません。
私はSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で導入したSyntaxHighlighterのtableの高さを設定するjQueryの後に入れました。
参考にしたサイト
jQuery：jQueryを使用して<div>要素の表示・非表示 | raining
最近なにかとjQuery頼りになっています。
display－スタイルシートリファレンス
要素の表示を制御するdisplayプロパティ。
全てのブラウザ向けにJavaScriptでブックマークリンクを設定する方法 - [JavaScript + JavaScript] ぺんたん info
ブラウザ判定方法について参考にさせていただきました。
HTML EnCoder | Widget Generators
BloggerのテンプレートにJavaScriptを直接書き込むときはこのエンコーダが便利です。
0 件のコメント:
コメントを投稿