はてなブログでは、本日までに以下の改善および機能追加を行いました。
- ページ表示の高速化
- はてなフォトライフの利用量を編集サイドバーに表示
- 楽天の広告を最適化させるHTMLタグに対応
ページ表示の高速化
ページに読み込まれるスクリプトの配置など、ブログの表示に関する複数の改善を行いました。これにより、ブログを表示する速度が、平均で2倍程度高速化されています。
なお、JavaScriptやCSSの読み込み方法を変更したため、自作のスクリプトやデザインCSSが想定通りに動作しなくなることがあるかもしれません。このうちスクリプトについては記事末の付記をお読みください。不明点については 問い合わせフォーム よりお問い合わせください。
はてなフォトライフの利用量を編集サイドバーに表示
編集サイドバーの「写真を投稿」タブに、画像の投稿先となるウェブアルバムサービス はてなフォトライフ のファイル利用量が表示されるようにしました。
はてなブログでは、デフォルトではてなフォトライフの「Hatena Blog」フォルダに写真をアップロードします。はてなフォトライフは、無料で毎月30メガバイトまで新規の画像を保存でき、当月の利用量はアップロード画面で確認できますが、今回の修正でより確認しやすくなりました。
なお、ひと月に30メガバイト以上の写真をアップロードしたい場合には、「はてなブログPro」などの有料オプションをご利用ください。100倍の3ギガバイトまで毎月保存できます。
編集サイドバーに関するその他の修正
- YouTube検索で、ブラウザによって動作しないことがある不具合を修正しました
- Instagram貼り付けで、貼り付けた写真とキャプションの間で改行されないことがある不具合を修正しました
楽天の広告を最適化させるHTMLタグに対応しました
ブログのページ内で、広告やサイドバーなどを除く記事コンテンツ部分の前後に、rakuten_ad_target_beginタグおよびrakuten_ad_target_endタグを追加しました。これにより、楽天アフィリエイトを利用しているユーザー様がモーションウィジェットなどの「掲載したページの内容にマッチした商品」の広告を掲載する際に、コンテンツマッチングの精度が向上することが期待されます（楽天アフィリエイト ヘルプページ 参照）。
また同様に、はてなダイアリーでもrakuten_ad_target_*に対応いたしました。
なお、Google Adsenseでコンテンツマッチの精度を高めるHTMLタグ（google_ad_section_startおよび_end）については、以前よりはてなブログ、はてなダイアリーともに対応しています。はてなブログでは、はてなの「アフィリエイトガイドライン」および「はてなブログ ガイドライン」に反しない限り、無料・有料のプランに関わらず各種アフィリエイトをご利用いただけます。
付記 - Webサイトの表示速度の向上とはてなブログにおけるスクリプトの読み込みに関して
一般にWebページでは、1つのページを表示する際に、HTMLドキュメントだけでなく画像やスクリプト、レイアウト用のCSSなど、複数のファイルが必要です。この読み込み順などを最適化することで、Webページの表示速度を向上させることができます。
このうちスクリプト（JavaScript）に関しては、HTML上のコンテンツやCSSファイルなどより先に読み込もうとすると、スクリプトのロードと実行が完了するまでの待ち時間が発生してしまうため、表示速度が低下します。今回の改善でも、JavaScriptの読み込みをページ下部に移動しています。
ブログ全体で動作するブログパーツは「フッタ」に
サイドバーや記事下などに配置するものではなく、ブログ全体で動作するブログパーツやスクリプトは、なるべくページの下部で読み込まれるように、デザイン設定画面の「カスタマイズ」タブの「フッタ」に記述することをおすすめします。
自作スクリプト等でjQueryを利用している際の注意点
今回の改善で、これまでページ上部で呼び出していたjQueryをページ下部に移動しました。これにより、jQueryがロードされていることを前提としたスクリプトは動作しなくなっています。
jQueryなどのライブラリを利用される際には，以下のようにライブラリを明示的に読み込み、さらにスクリプト全体を関数で囲ってjQueryオブジェクトを引数に呼び出すようにしてください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function($) {
$(function() { ... });
})(jQuery);
</script>これは、jQueryプラグインを確実に読み込んだり、はてなブログが利用しているものと異なるバージョンのjQueryを読み込んだときに、スクリプト内で使用するjQueryのバージョンを固定させるために必要です。
