Blogger の「統計」のページビュー数が多くカウントされてしまうのを直したい場合は...
Materiapollo では「次の投稿」と「前の投稿」のページタイトルを表示するために、非同期通信で前後のページにアクセスして、その記事タイトルを取得するスクリプトを使用しています。
しかし、このスクリプトを使うと、1ページしか見ていないにも関わらず、前後の記事にもアクセスするため、ページビュー数が全体で「3」とカウントされてしまい、一つ一つの記事のページビュー数も正確に分かりません。これを直したい場合は、Materiapollo のテンプレート中の以下のスクリプト部分を
xml (書き換え前)
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<span>'+$(data).find('.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<span>'+$(data2).find('.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>以下のコードに書き換えてください。
コード中のhttps://materiapollo.blogspot.comとある2箇所は、ご自身のブログのURLで読み替えてください。
xml (書き換え後)
<script type='text/javascript'>
//<![CDATA[
(function($){
if($('a.newer-link').length){
var newerLink = $('a.newer-link');
var newerPath = document.createElement('a');
newerPath.href = newerLink.attr('href');
$.get('https://materiapollo.blogspot.com/feeds/posts/summary?alt=atom&max-results=1&path=' + newerPath.pathname + '&redirect=false', function (data) {
newerLink.html('<b><span>'+$(data).find('title').eq(1).text()+'</span></b>');
},"html");
}
if($('a.older-link').length){
var olderLink = $('a.older-link');
var olderPath = document.createElement('a');
olderPath.href = olderLink.attr('href');
$.get('https://materiapollo.blogspot.com/feeds/posts/summary?alt=atom&max-results=1&path=' + olderPath.pathname + '&redirect=false', function (data2) {
olderLink.html('<b><span>'+$(data2).find('title').eq(1).text()+'</span></b>');
},"html");
}
})(jQuery);
//]]>
</script>Materialize や jQuery を CDN から読み込む
Materiapollo では Materialize や jQuery をテンプレートに直貼りし、テンプレートがかなり冗長なものになってしまっていますが、これをすっきりとさせたい場合は、外部のホスティングサービスから、それらのスクリプトや CSS を読み込むという方法があります。
閲覧環境によっては CDN から読み込むことで、ページ描画速度の改善も期待できます。
一方、外部から Materialize の CSS・JSを読み込むため、CDNのサービスが万が一終了となってしまった場合には、ページが正しく表示されなくなってしまうリスクもありますのでご注意ください。
以下では、テンプレートの上から順番に、CDN から読み込むように書き換えていきます。
materialize.css と jQuery
テンプレートの最初の方にある、以下の長い長い文字列 (<b:skin>の手前まで) を
書き換え前
<!--Import materialize.css-->
<style type='text/css'>
/*!
* Materialize v0.100.2 (http://materializecss.com)
* Copyright 2014-2017 Materialize
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/
.materialize-red{background-color:#e51c23 !important}.materialize-red-text{color:#e51c23 !important}.materialize-red.lighten-5{background-color:#fdeaeb !important}.materialize-red-text.text-lighten-5{color:#fdeaeb !important}.materialize-red.lighten-4{background-color:#f8c1c3
・
・
(略)
・
・
.clockpicker-canvas-out{opacity:0.25}.clockpicker-canvas-bearing{stroke:none;fill:#26a69a}.clockpicker-canvas-bg{stroke:none;fill:#26a69a}.clockpicker-canvas-bg-trans{fill:#26a69a}.clockpicker-canvas line{stroke:#26a69a;stroke-width:4;stroke-linecap:round}
</style>
<!--Import jQuery-->
<script type='text/javascript'>
//<![CDATA[
/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=
・
・
(略)
・
・
r.isArray=Array.isArray,r.parseJSON=JSON.parse,r.nodeName=B,"function"==typeof define&&define.amd&&define("jquery",[],function(){return r});var Vb=a.jQuery,Wb=a.$;return r.noConflict=function(b){return a.$===r&&(a.$=Wb),b&&a.jQuery===r&&(a.jQuery=Vb),r},b||(a.jQuery=a.$=r),r});
//]]>
</script>こちらのコードで書き換えて下さい。
書き換え後
<!--Import materialize.css-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css' />
<!--Import jQuery-->
<script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=' crossorigin='anonymous'></script>materialize.js
テンプレートの最後の方にある、以下の長い長い文字列 (<!--Materialize JS Initialization-->の手前まで) を
書き換え前
<!--Import materialize.js-->
<script type='text/javascript'>
//<![CDATA[
/*!
* Materialize v0.100.2 (http://materializecss.com)
* Copyright 2014-2017 Materialize
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
*/
function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}
・
・
(略)
・
・
0))),"close"==e&&l()})},open:function(){},close:function(){}};t.fn.tapTarget=function(i){if(e[i]||"object"==typeof i)return e.init.apply(this,arguments);t.error("Method "+i+" does not exist on jQuery.tap-target")}}(jQuery);
//]]>
</script>こちらのコードで書き換えて下さい。
書き換え後
<!--Import materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>これで Materialize で使用するファイルが、CDNから読み込まれるようになります。
Related Posts
Blogger用テンプレート Materiapollo のカスタマイズに役立ちそうな情報をピックアップした記事です。
Blogger用テンプレート Materiapollo のカスタマイズの際の注意点や、CSSの記述位置についての記事です。
