アメブロでGoogle Analyticsを外部ファイル化
アメブロをカスタマイズしていて最も悩ましいのがフリープラグインの文字制限。
色々詰め込んでいるとすぐに3800文字の限界に達してしまいます。
そんな場合には、使用するフリープラグインを厳選しなければなりませんが、どうしようもなければ外部ファイル化しています。
ちなみに外部ファイル化とは、別のサーバーに本来フリープラグインに記述するスクリプトを置き、アメブロでそれを読み込ませるという方法。
これを行えばフリープラグインの文字数制限に引っかかる事なく、ほぼ無限にブログパーツなどを増やす事が可能となります。
フリープラグインの種類によっては外部ファイル化出来るものと出来ないものがありますが、このブログでは出来るものに関しては可能な限り別サーバーから読み込ませるようにしています。
今回行うのもその中の１つ。
外部ファイルへ移行してみたのは、アクセス解析Google Analyticsのコードです。
今までやっていなかったのは、アクセス解析のタグはなんとなく外部サーバーに置かない方がいいのかなと思っていたから。
しかし別のアクセス解析であるQLOOKの設置タグを見てみると、明らかに外部にjsファイルを置いてそれを読み込んでいます。
ならばGoogle Analyticsも外部サーバーに置いて読み込む形でもいいのではないかと考え、色々検索してみました。
参考にしたサイト：記事
DEPTH CODE
→Google Analyticsの解析コードを外部化したい
徒然日記
→『Google Analytics』の解析コードを外部JSファイル化する方法を紹介。
Insecure -Project IE-
→Google Analytics の 解析コードを外部化する
HiGash.Net
→Google Analyticsのトラッキングコードを見直してみる
どうやら何通りもやり方があるようです。
そこで、一番簡単そうな上２つの記事で紹介されていた方法を実践。
■手順
まずGoogle Analyticsのコードを準備
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-********-*']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>↑こんな感じのやつです。
「UA-********-*」の部分はそれぞれ個別のIDなので人によって違います。
今現在フリープラグインに入れているのならそれをそのまま抜き出せばOK。
もし自分のコードがわからない時はこちらの方法で調べる事が出来ます。
→Google Analiticsアナリティクスのトラッキングコード再確認
（コードをすでに取得している場合）
上記のコードの中から「<script type="text/javascript">」と「</script>」以外の部分をjsファイルとして外部サーバーにアップロード。
読み込む為のタグをフリープラグイン内に記述。
↓↓
<script type="text/javascript" src="jsファイルを置いた場所のURL"></script >外部ファイル化と読み込みについてはこちらの記事で細かく書いています。
このブログの場合は、上述の記事↑で作成した外部ファイルへ放り込み（追記し）ました。
Google Analyticsはコードだけで460文字以上あったので、外部ファイル化することによりフリープラグインに少し余裕が出来ます。
それに加え、外部ファイルをうまく活用するとブログの表示が若干ですが早くなります。
問題は、Google Analyticsを外部のサーバーに置いて、ちゃんと解析が出来るのかという点。
実はこの記事を書いている時点で、外部ファイル化してから１週間ほど時間が経過しています。
今のところ問題なし。
無事稼働しているようです。
アメブロで個別記事にのみZenbackを表示する方法
このブログはトップページへアクセスすると、一度に５記事表示されるようにしてあります。
その為画像の多い記事などが続くと、表示されるのに時間がかかってしまいます。
それに加えてブログパーツでZenbackを設置している為、こちらの読み込みも少し待たなければなりません。
詳細は→アメブロにzenbackを導入して記事下に表示させる方法
結果的に、ブログを開けてから読めるようになるまでに変なタイムラグが発生し、読みやすいブログとは言えない状態になっていました。
そこで改善策を検討。
Zenbackを外してしまうという選択肢もありますが、共有ボタンの設置などなかなか便利な機能も捨てがたく少し迷います。
要は「複数記事を一覧表示している時にはZenbackが表示されず」、「個別記事にのみZenbackが表示される」方法があればいいのではないか？という考えに行き着いたので、色々検索。
どうやら方法としては何通りもやり方があるようですが、かなりわかりやすく書かれたこちらの方の記事を発見しました。
上記の記事より当ブログに該当する箇所だけ転載
Zenbackにて入手したコードへ以下の赤字の部分を追加します。
ちなみに赤文字でない部分は全てZenbackにて作成されるコードなので、その隙間に赤文字部分をはめていくような手順となります。
早速導入。
希望通り個別記事表示の時だけZenbackが表示されるようになりました。
ただしばらくZenbackを運用してみた感じ、どうも関連記事の精度やキャッシュの更新具合に？となることが多く、もう少し様子を見て使い続けるかどうか考え直す事になりそうです。
その為画像の多い記事などが続くと、表示されるのに時間がかかってしまいます。
それに加えてブログパーツでZenbackを設置している為、こちらの読み込みも少し待たなければなりません。
詳細は→アメブロにzenbackを導入して記事下に表示させる方法
結果的に、ブログを開けてから読めるようになるまでに変なタイムラグが発生し、読みやすいブログとは言えない状態になっていました。
そこで改善策を検討。
Zenbackを外してしまうという選択肢もありますが、共有ボタンの設置などなかなか便利な機能も捨てがたく少し迷います。
要は「複数記事を一覧表示している時にはZenbackが表示されず」、「個別記事にのみZenbackが表示される」方法があればいいのではないか？という考えに行き着いたので、色々検索。
どうやら方法としては何通りもやり方があるようですが、かなりわかりやすく書かれたこちらの方の記事を発見しました。
上記の記事より当ブログに該当する箇所だけ転載
Zenbackにて入手したコードへ以下の赤字の部分を追加します。
<!-- X:S ZenBackWidget -->
<script type="text/javascript">
var url=location.href;
if (url.match(/^.+\/entry\-[0-9]*\.html[a-zA-Z0-9!-~]*$/g )) {
（zenbackで作られたコード）
}
</script>
<!-- X:E ZenBackWidget -->
<script>
$(function() {
$("#zenback_loady").insertBefore(".foot");
});
</script>ちなみに赤文字でない部分は全てZenbackにて作成されるコードなので、その隙間に赤文字部分をはめていくような手順となります。
早速導入。
希望通り個別記事表示の時だけZenbackが表示されるようになりました。
ただしばらくZenbackを運用してみた感じ、どうも関連記事の精度やキャッシュの更新具合に？となることが多く、もう少し様子を見て使い続けるかどうか考え直す事になりそうです。
・アメブロカスタマイズ目次
ペタ返し専用Firefox or Chrome
アメブロには、【ペタ返し】や【読者登録返し】といったような独特な習慣があります。
ペタをつけてもらったら返しにいく、読者登録されればこちらからも相手のブログに登録しにいく、というような風習。
別にルールとして存在する訳でもないので、するもしないも自由です。
いかにもスパマーの餌食になりそうな習慣なので、初めから全く気にしない人もいます。
しかしブログを始めたばかりでアクセスも全然ない頃、ペタをつけて貰えるのは嬉しいものです。ついついペタ返しに行きたくなります。
ところが最初の頃のペタが５～６ぐらいしかつかないのであれば大丈夫ですが、少しずつ増えて１日に３０～１００ほどつくようになると、ペタ返しだけでもかなりの時間がかかるようになってきます。
こうなってくると考えられる行動パターンは
（１）ペタ返しをやめる
（２）２～３時間かけてペタ返しをする
（３）自動ツールを使う
大体この３種類のうちのどれか。
今回紹介するのは、上記３種類の中の（２）と（３）の間ぐらいの方法。
ツールでペタをつける行為は単なるスパム、だから手動でペタ返しはしたい、けれども時間がかかるのはちょっと、という人向け。
Firefoxにアメブロペタ返し用の機能を追加します。
ちなみにGreasemonkeyスクリプトなので、FirefoxにアドオンGreasemonkeyがインストールされていることが前提です。
ChromePlusやSRWare Ironならそのままインストール出来ます。
Greasemonkeyについてはこちらの記事にもちょこっと注意事項のようなものを書いたので、あくまで自己責任でご使用下さい。
・インストール方法
※個人の方が書かれたスクリプトなので、紹介だけ。
こちらのページをFirefoxかChrome系のブラウザで開いて「ameba_petalink.user.js-v0.2」ファイルをダウンロード。
あとはそれぞれのブラウザの指示に従ってインストールして下さい。
導入前
導入後
このようにペタ帳を開けると、「ペタる」というボタンが追加されています。
通常であればペタ返しをする場合、
１、自分のペタ帳を見る
２、ペタをつけてくれた人のブログへ行く
３、ブログかプロフィールページから【ペタをつけるボタン】をクリック
４、【今すぐペタる】をクリック
５、自分のペタ帳へ戻る
６、以後繰り返し
というような手順が必要となりますが
導入後は
１、自分のペタ帳を見る
２、【ペタる】ボタンをクリック
３、自分のペタ帳へ戻る
これだけになります。
相手のブログを一切見ずにペタをつけることが可能となります。
その分ペタ返しにかかる時間が短縮。
くれぐれも、自動ツールを使った単なるスパム行為と間違われないように、ペタ本来の意味も忘れないようにして各自のご判断でご使用下さい。
ペタをつけてもらったら返しにいく、読者登録されればこちらからも相手のブログに登録しにいく、というような風習。
別にルールとして存在する訳でもないので、するもしないも自由です。
いかにもスパマーの餌食になりそうな習慣なので、初めから全く気にしない人もいます。
しかしブログを始めたばかりでアクセスも全然ない頃、ペタをつけて貰えるのは嬉しいものです。ついついペタ返しに行きたくなります。
ところが最初の頃のペタが５～６ぐらいしかつかないのであれば大丈夫ですが、少しずつ増えて１日に３０～１００ほどつくようになると、ペタ返しだけでもかなりの時間がかかるようになってきます。
こうなってくると考えられる行動パターンは
（１）ペタ返しをやめる
（２）２～３時間かけてペタ返しをする
（３）自動ツールを使う
大体この３種類のうちのどれか。
今回紹介するのは、上記３種類の中の（２）と（３）の間ぐらいの方法。
ツールでペタをつける行為は単なるスパム、だから手動でペタ返しはしたい、けれども時間がかかるのはちょっと、という人向け。
Firefoxにアメブロペタ返し用の機能を追加します。
ちなみにGreasemonkeyスクリプトなので、FirefoxにアドオンGreasemonkeyがインストールされていることが前提です。
ChromePlusやSRWare Ironならそのままインストール出来ます。
Greasemonkeyについてはこちらの記事にもちょこっと注意事項のようなものを書いたので、あくまで自己責任でご使用下さい。
・インストール方法
※個人の方が書かれたスクリプトなので、紹介だけ。
こちらのページをFirefoxかChrome系のブラウザで開いて「ameba_petalink.user.js-v0.2」ファイルをダウンロード。
あとはそれぞれのブラウザの指示に従ってインストールして下さい。
導入前
導入後
このようにペタ帳を開けると、「ペタる」というボタンが追加されています。
通常であればペタ返しをする場合、
１、自分のペタ帳を見る
２、ペタをつけてくれた人のブログへ行く
３、ブログかプロフィールページから【ペタをつけるボタン】をクリック
４、【今すぐペタる】をクリック
５、自分のペタ帳へ戻る
６、以後繰り返し
というような手順が必要となりますが
導入後は
１、自分のペタ帳を見る
２、【ペタる】ボタンをクリック
３、自分のペタ帳へ戻る
これだけになります。
相手のブログを一切見ずにペタをつけることが可能となります。
その分ペタ返しにかかる時間が短縮。
くれぐれも、自動ツールを使った単なるスパム行為と間違われないように、ペタ本来の意味も忘れないようにして各自のご判断でご使用下さい。
アメブロの記事下【フッター】に記事編集ボタン設置
アメブロは過去記事の編集が非常に面倒です。
過去にアップした記事を探して編集しようと思うと
１.【ブログ内検索】
２.【該当記事発見】
３.【記事の日付確認】
４.【管理画面】
５.【記事の編集・削除】
６.【日付を頼りに該当記事を探す】
７.【編集】
というような手順を踏まなければなりません。
特にひと月にアップしている記事数が多い場合には、編集画面で該当記事を探すのにとんでもなく時間がかかります。
もう少し簡単な方法として、記事ＵＲＬからentry番号を取得して強引に編集画面へ行く方法もありますが、これもやってみるといちいち面倒。
単純に日記を書いているだけであれば、過去記事を修正や編集をする事もないかと思います。
しかしコンテンツやノウハウを主体に記事にしている場合、どうしても「目次ページの作成」・「記事内に関連記事を手動表示」などの作業が必要であり、何度も過去の記事を編集しなおさなければなりません。
もちろんそんな作業をしたくなければしなくても構いませんが、非常に読みづらく、ＰＶの伸びにくいブログとなってしまいます。
そこでどうにか
１.【記事検索】
２.【該当記事発見】
３.【記事の編集画面へ】
と直接行けないものかと検索してみると、こちらの記事を発見。
さっそく利用させてもらいました。
（以下のコードは上記のブログ記事からそのまま転載してます。）
方法
フリープラグインに以下を記述します。
このブログの場合には、フリープラグインに入れることができる文字数が限界を迎えているので、以前の記事で作成した外部ファイルの中に、上記から「<script type="text/javascript"><!--」と「</script>」以外のコードを貼り付け。
【この記事を編集】部分については自分の好きな文字に変更できます。
しかしこのブログの場合、外部ファイルの文字コードの都合上日本語では文字化けしてしまったので、【Edit】という表記に変更しました。
普通にフリープラグインに追加するのであれば【編集】とかにしておくと、字面的に綺麗な並びになると思います。
結果
ブログの記事下にこんなリンクが表示されます。
ここをクリックするとその記事の編集画面へ直接飛ぶことができるようになります。
当然ですが、自分がアカウントを持っているブログ以外の編集は不可能です。
これでかなり過去記事の編集が楽になりました。
過去にアップした記事を探して編集しようと思うと
１.【ブログ内検索】
２.【該当記事発見】
３.【記事の日付確認】
４.【管理画面】
５.【記事の編集・削除】
６.【日付を頼りに該当記事を探す】
７.【編集】
というような手順を踏まなければなりません。
特にひと月にアップしている記事数が多い場合には、編集画面で該当記事を探すのにとんでもなく時間がかかります。
もう少し簡単な方法として、記事ＵＲＬからentry番号を取得して強引に編集画面へ行く方法もありますが、これもやってみるといちいち面倒。
単純に日記を書いているだけであれば、過去記事を修正や編集をする事もないかと思います。
しかしコンテンツやノウハウを主体に記事にしている場合、どうしても「目次ページの作成」・「記事内に関連記事を手動表示」などの作業が必要であり、何度も過去の記事を編集しなおさなければなりません。
もちろんそんな作業をしたくなければしなくても構いませんが、非常に読みづらく、ＰＶの伸びにくいブログとなってしまいます。
そこでどうにか
１.【記事検索】
２.【該当記事発見】
３.【記事の編集画面へ】
と直接行けないものかと検索してみると、こちらの記事を発見。
さっそく利用させてもらいました。
（以下のコードは上記のブログ記事からそのまま転載してます。）
方法
フリープラグインに以下を記述します。
<script type="text/javascript"><!--
$(function(){
$('.entry .foot a:first-child').each(function(){
var myAA=$(this).attr('href');
$(this).after('<a style="margin-right:10px;margin-left:10px;" href="http://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+myAA.substr(myAA.length-16,11)+'">この記事を編集</a>');
});
});
//-->
</script>このブログの場合には、フリープラグインに入れることができる文字数が限界を迎えているので、以前の記事で作成した外部ファイルの中に、上記から「<script type="text/javascript"><!--」と「</script>」以外のコードを貼り付け。
【この記事を編集】部分については自分の好きな文字に変更できます。
しかしこのブログの場合、外部ファイルの文字コードの都合上日本語では文字化けしてしまったので、【Edit】という表記に変更しました。
普通にフリープラグインに追加するのであれば【編集】とかにしておくと、字面的に綺麗な並びになると思います。
結果
ブログの記事下にこんなリンクが表示されます。
ここをクリックするとその記事の編集画面へ直接飛ぶことができるようになります。
当然ですが、自分がアカウントを持っているブログ以外の編集は不可能です。
これでかなり過去記事の編集が楽になりました。
・アメブロカスタマイズ目次
記事タイトルのフォントサイズ【字の大きさ】を変更
ブログを見返していて、どうも記事タイトルのバランスが悪かったのでフォントの大きさを調節してみました。
方法
まず【管理画面】→【デザインの変更】→【CSSの編集】へと進み、「使用中のブログデザインCSS」をコピー
そして適当なテキストエディタに貼り付け。
エディタの検索機能で【title】を検索
すると自分のブログのCSSではこんな部分が見つかりましたので
（使用しているCSSによって多少違いますが、大体似たような記述があると思います。フォントの単位もem以外にpxなどなどあります。）
-----------------------------------------------------
/*記事タイトル*/
.entry h3.title{
font-size:1.7em;
font-weight:bold;
line-height:1.1;
-----------------------------------------------------
↓↓
これを色々調節した結果、次のように変更
↓↓
-----------------------------------------------------
/*記事タイトル*/
.entry h3.title{
font-size:1.45em;
font-weight:bold;
line-height:1.1;
-----------------------------------------------------
あとは表示を確認して最終OKなら保存ボタンをクリック。
あまりに微妙過ぎる修正なのでほとんど違いがわからないと思いますが、自分なりに結構しっくりきたように思います。
方法
まず【管理画面】→【デザインの変更】→【CSSの編集】へと進み、「使用中のブログデザインCSS」をコピー
そして適当なテキストエディタに貼り付け。
エディタの検索機能で【title】を検索
すると自分のブログのCSSではこんな部分が見つかりましたので
（使用しているCSSによって多少違いますが、大体似たような記述があると思います。フォントの単位もem以外にpxなどなどあります。）
-----------------------------------------------------
/*記事タイトル*/
.entry h3.title{
font-size:1.7em;
font-weight:bold;
line-height:1.1;
-----------------------------------------------------
↓↓
これを色々調節した結果、次のように変更
↓↓
-----------------------------------------------------
/*記事タイトル*/
.entry h3.title{
font-size:1.45em;
font-weight:bold;
line-height:1.1;
-----------------------------------------------------
あとは表示を確認して最終OKなら保存ボタンをクリック。
あまりに微妙過ぎる修正なのでほとんど違いがわからないと思いますが、自分なりに結構しっくりきたように思います。
・アメブロカスタマイズ目次