MoonNote

はてなブログテーマ / CSS / jQuery

はてなブログで jQuery プラグインを使うなら jsDelivr から読み込もう

f:id:waitingmoon:20151209133620p:plain

はてなブログjQuery プラグインを使うとなると、ファイルをどこに置くか?という問題に直面します。外部ファイルの呼び出し(ファイル置き場として利用すること)を許可しているサーバーは少ないですし、DropboxGithub を使うのもなんだかなあという感じ。そんな時は jsDelivr から読み込むのがおすすめです。

jsDelivr

f:id:waitingmoon:20151209135758j:plain

https://www.jsdelivr.com/

jsDelivrjQuery 本体など著名なライブラリをはじめ、個人が制作した jQuery プラグインCSS、Webフォントなど合計で1650種類以上ものライブラリを配信する CDN です。

CDN とはコンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。

つまり、使いたい jQuery プラグインが jsDelivr で配信されていれば「アップロードする必要がなくなり」、かつ「高速に読み込める」というわけです。

jsDelivr の使い方

f:id:waitingmoon:20151209135758j:plain

まずは画面中央の検索フォームからライブラリを検索します。

f:id:waitingmoon:20151209153742p:plain

使いたいライブラリが配信されていれば、ライブラリの中から読み込みたいファイルを Add し、右上の IN COLLECTION をクリックします。

f:id:waitingmoon:20151209154411p:plain

<script> タグを追加するか、プロトコルhttps にするかなど、オプションを選んでから COPY をクリックします。あとはブログのヘッダやフッタに貼り付けて利用するだけです。

実際に使ってみた

追従型コンテンツを簡単に実装できる jQuery プラグイン「Sticky-Kit」を読み込んで、サイドバーの最後のモジュールを固定してみました。右側に表示されている人気の記事がそのデモになります。

addClassremoveClass で実装するよりもコードが簡潔でいいですね。

<script src="https://cdn.jsdelivr.net/jquery.sticky-kit/1.1.2/jquery.sticky-kit.min.js"></script>
<script>
(function($) {
    $(function() {
        $(".hatena-module:last-child").stick_in_parent({
            offset_top: 48,
            parent: '#content-inner',
        });
    });
})(jQuery);
</script>

Sticky-Kit | jQuery plugin for sticky elements