カテゴリー: Javascript

サイトの速度をワンクリックで測定　GTmetrixのブックマークレットの使い方

サイトの速度を測定するのに便利なGTmetrixのブックマークレットを紹介します。

GTmetrixではGoogle Page SpeedとYahoo YSlowを同時に測定できます。
サイトを高速化するのは最近ではSEOでも非常に重要ですし、何よりユーザビリティが向上します。
無理に高得点を狙う必要もないですが簡単な設定変更で格段に改善する場合もありますので一度測定してみてはいかがでしょうか？

ブックマークレットを利用すればわざわざGTmetrixのサイトへアクセスしてURLを入力しなくてもワンクリックで測定できます。

GTmetrix Bookmarklet

Firefox Safari Chrome：ブックマークツールバー上にボタンをドラッグしてツールバーに追加、GTmetrixで分析したいサイトにいるとき、それをクリックしてください。

Internet Explorer：右ボタンをクリックし、「お気に入りに追加」をクリックする。GTmetrixブックマークレットはJavaScriptを使用していますので、セキュリティ警告が表示されます。続行する場合は「はい」をクリックしてください。
簡単にアクセスするには、IEのお気に入りツールバーにブックマークレットを移動して、GTmetrixで分析したいサイトにいるときクリックしてください。

参考サイト:GTmetrix FAQ

9月 28, 2014

Gumbyを使ってPageTopに戻るボタンを作ってみる

最近よく見かける画面の右下に「PAGE TOP」に戻るボタンをGumbyを使って表示します。
WordPressのfunctions.phpに追加
簡単にできるようにCSS/Javascriptもインライン化していますが
別ファイルに記載しても良いと思います。

function gumby_page_top() { ?>
	<div id="return" class="pretty medium info btn">
		<a href="#header" class="skip" gumby-goto="#header" gumby-offset="-60">PAGE TOP</a>
	</div>
	<style>
		#return {
			position: fixed;
			bottom: 20px;
			right: 20px;
			opacity: 0.8;
		}
	</style>
	<script defer>
		jQuery(function() {
			var returnBtn = jQuery('#return');    
			returnBtn.hide();
			jQuery(window).scroll(function () {
		        if (jQuery(this).scrollTop() > 100) {
		            returnBtn.fadeIn();
		        } else {
		            returnBtn.fadeOut();
		        }
		    });
		});
	</script>
<?php
}

add_action('wp_footer','gumby_page_top');

こちらのサイトを参考にさせていただきました。
jQueryでスクロールすると表示する系いろいろ

9月 5, 2014

WordPressでGumbyをCDNから使う方法

GumbyFramework – cdnjs.com

cdnjs.comからGumbyのJavaScript/CSSライブラリを参照することができます。

functions.phpに追加

CSSとJavascriptを両方CDNから読み込む場合

function gumby_enqueue_stylesheet() {
	wp_enqueue_style('gumby-style', '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/css/gumby.min.css' );
}
function gumby_enqueue_scripts() {
	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
	}
}
add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

JavascriptはCDNからCSSは自分で編集した物を使いたい場合

function gumby_enqueue_stylesheet() {
	wp_enqueue_style('gumby-style', get_template_directory_uri().'/css/gumby.css' );
}
function gumby_enqueue_scripts() {
	wp_enqueue_script( 'modernizr' , '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js' );
	wp_enqueue_script( 'gumby'     , '//cdnjs.cloudflare.com/ajax/libs/gumby/2.6.0/js/libs/gumby.min.js' );
	}
}
add_action( 'wp_print_styles', 'gumby_enqueue_stylesheet');
add_action( 'wp_print_scripts', 'gumby_enqueue_scripts');

こんな感じですかね。