Universe: Blogger

ラベル Blogger の投稿を表示しています。すべての投稿を表示

2014/07/06

Bloggerで自分のアクセスを追跡しない方法

Bloggerのダッシュボードで「統計」を見るとアクセス数やアクセスがあったページなどの情報が見れますがこれが正しくない。
その理由は：
1. スパムのアクセスが含まれる。
2. 自分のアクセスが入っている。

リファラースパム

ブログを立ち上げてすぐにアクセスがありましたが、そのほとんどがロシアやウクライナからのアクセスでした。いきなりロシア圏でブレイクしたようです（笑）
アクセスの参照元URLには

http://webchat.freenode.net/?channels=%23%23dedicatedpool

というリンクが残されています。

これらはリファラースパムと呼ばれるもので、海外の出会い系サイトです。
これをアクセス拒否したかったのですが、忍者ツールぐらいしか見当たらず、これでもブロックすることが出来ませんでした。

海外も含めて様々なサイトをさまよった結果「無視する」という結論に達しました。
より正しいアクセス情報を見るためにはGoogle Analyticsを使うことになりますが、Bloggerでは下記の設定をしておきます。

自分のアクセスの除外

Bloggerには「自分のページビューを追跡しない」という機能が備わっているけど、これが日本では機能していない。blogspot.comなら動作するが日本語環境ではblogspot.jpにリダイレクトされるので機能しないとのこと。

Bloggerの元々ある機能では_ns=2というcookieを設定しておくと除外をするようになっているので、blogspot.jpでcookieを作るページを作成すれば解決します。

Googleが公開している方法はbodyタグのOnLoadを使うものなのでBloggerではそのまま使う事が出来ません。。。

BodyタグなしてCookieを設定する方法で対応をしました。
参考にしたページは
http://p--q.blogspot.jp/2013/08/blogger7.html
です。

これを「ページ」で作成して、一時的に公開にします。
通常はページは使っていないため、設定完了後に下書きで置いておくのに便利なのでページで作成しています。投稿で作っても問題はありません。

自分の場合はWin, Mac, iOSの３つで充分です。それぞれのブラウザからアクセスしてcookieを設定すればOKです。
公開していたページを下書きに戻して完了です。

アクセス数はスパムがカウントされているので正しくないですが、投稿ごとのページビューはある程度信用できるものになります。
この後はGoogle Analyticsの設定をしていきます。

Bloggerに関連記事のLinkWithinを導入するとエラーが出る場合の対処法

Bloggerの記事の下に関連記事を表示する方法はZenBack、Outbrain、LinkWithin、Smarter Related Posts Widgetなどがあります。

ZenBackとOutbrainはソーシャルの機能があるので、他のサイトに自分の記事が表示されるようになり、ページアクセスを増やす効果があります。

LinkWithinとSmarter Related Posts Widgetは自分のブログの関連記事を表示してくれますが、設定が最もシンプルなLinkWithinを導入してみました。

LinkWithinの導入

1. サイトのトップページにて
①メールアドレス、②ブログのURL、③ブログの種類、④表示する記事の件数
を設定して、「Get Widget!」のボタンを押します。

2. 「Install Widget」のリンクをクリックする。

3. タイトルを入力して、「ウィジェットを追加」ボタンを押す

4. エラーページが表示されてしまいます！

次のエラーが見つかりました。
widget.content: 必須項目はすべて入力してください
引き続き問題が発生する場合:
ブラウザのキャッシュと Cookie をクリアして、もう一度お試しください。

と表示されています。

エラーの対処

5.その場合の対処方法は③ブログの種類を「Other」に変更してから「GetWidget!」ボタンを押します。

6. 今度はスクリプトのコードが出てくるので、コードをコピーします。

7. 自分のBloggerの「レイアウト」へ行き、投稿の下にある「ガジェットを追加」をクリックします。

8. HTML/JavaScriptを選択してコードを貼付けします。

9. これで記事の下に関連記事が表示されるようになります。

タイトルの変更

そのままだと「You might also like:」と英語表示になるので、これを日本語で変更します。
10. スクリプトに１行追加します。

指定した文言で表示されるようになりました。

投稿ページのみに表示させる

ウィジェットの追加をすると、ホーム画面でも関連記事が表示されるので、ホーム画面中の全記事に関連記事が表示されてしまいます。
これを投稿ページのみで表示するように変更します。
11. 「テンプレート」-「HTMLの編集」へ行き「ウィジェットへ移動」を使ってLinkWithinのウィジェットのコードへ移動します。

12. <data:content/>を<b:if>の条件文で囲ってあげる。

<b:widget id='HTML4' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:content/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

以上で完了です！

2014/06/30

ウェブクリップでウェブサイトのスマホ対策！ファビコンの次にすること

ウェブサイトにファビコン(favicon.ico)を付けることは知られた内容ですが、ファビコンを設定していてもiPhoneでは「お気に入り」にアイコン表示がされません。

また「ホーム画面に追加」をする際にもアイコン表示はされず、ウェブ画面を縮小した画像が設定されます。Androidではショートカットと呼ばれます。

これでは見栄えが良いとは言えません。

画像を用意

iPhoneなどのスマホ向けに画像を設定するためにはウェブクリップを設定します。
まず画像サイズは144x144ピクセルでPNG形式で用意します。ファイル名は「apple-touch-icon.png」とします。

アップロード

これを自分のサイトにアップロードします。Rootに上げればこれだけでiPhone対応は完了です。

ヘッダーに指定

Androidに対応するためには自分のサイトの<head> ~ <head>の中に以下を記載します。
"xxx"は自分のサイトのURLに置き換えます。
また、この指定をする場合はPNGのファイル名は任意のものに変えることが出来ます。

Bloggerでは

自分が使用しているBloggerではrootに置く事が出来ません。
記事の投稿画面で画像を一度登録して、その記事のHTMLの編集画面でURLを確認します。

ここでのURLは
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0k_I4ibT7HgDDhan3acvwqBPG8jr-URIcDZs7IuVzIm3viBhR_Ewx1lsBAvhM7g_Zs3ff76dQyTsNgH0wTfhCuOFUn78fyJ-vmM3e9sDOgqe99ep4UJIBKWgPWW2yMmt6GDmxKvbfibE/s1600/apple-touch-icon.png"
という長いものになります。

従って<head>のすぐ下に下記を記載しました。

これでホーム画面に自分のアイコンが表示されるようになります。

また、お気に入りの画面でも同様にアイコンで表示されています。

以上で完了です！

2014/06/08

Bloggerでタイトルの横に広告を入れる

Bloggerではヘッダーは画面幅でレイアウトされるので、横に長いロゴ画像を置かない場合は右側に空白が出来ることになります。
この余白に広告を設定します。

1. 前提になる設定

Simple テンプレートを使っています。
レイアウトのヘッダーにてイメージ画像を設定済み。オプションは「説明を画像の後ろに表示する」に設定している。

2. ヘッダーが記載されている箇所

[テンプレート] -> [HTMLの編集]でhtmlを確認します。
の下の<a>タグと<img>タグが設定したヘッダーのイメージ画像（タイトルロゴ）を表示しています。
その後のの下では「ブログの説明」を表示しています。

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>

3. 広告のコードの用意

HTMLエスケープしたものを用意する。（ '<' や '>' などを変換したもの）
下記の広告は728x90のサイズのAmazonおまかせリンク。エスケープは変換を行ってくれるサイトで変換します。

4. 先人の知識から下記を試してみました。

4-1. <a>タグと<img>タグにある style='display: block' を両方とも削除する。
ブロックにすることで改行が入っているんですね。これを無くしてみます。
4-2. 広告のコードは</a>タグの直後に入れる。

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'/>
</a>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://ir-jp.amazon-adsystem.com/s/ads.js"></script>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>

これで右側の余白に広告が入りました。

5. レイアウトを調整する

しかし、これだとヘッダーのイメージ画像と広告が同じ高さにあり、ブログの説明がその下の行にあります。
自分の場合、ブログの説明が短いので、ここの右側にも余白を作ることになってしまいバランスが悪いです。

また、この広告のレイアウトはPC向けであり、スマホ向けは別途ウィジェットに広告設定をしてあるので、スマホ向けには表示しないように変更します。

5-1. レイアウトの調整は style='float: left' を使います。ヘッダーのdivに１つ挿入し、広告を囲むdivに１つ設定します。その後に <div style='clear: both;'/>を入れます。

5-2. PC向け／スマホ向けの分岐は <b:if cond='data:mobile'> を使います。
今回はスマホ向けの部分は空にして、<b:else/>後に広告のコードを入れる。

したがってステップ4は必要なくなりました。

<div id='header-inner' style='float: left'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
<b:if cond='data:mobile'>
<b:else/>
<div style='float: left'>
<script type="text/javascript"></script>
<script type="text/javascript" src="http://ir-jp.amazon-adsystem.com/s/ads.js"></script>
</div>
</b:if>
<div style='clear: both;'/>

レイアウトが完成です。

これでスッキリしましたー。

2014/06/02

Bloggerでスマホ向けページにAdSense広告を設定する

Bloggerのスマホ向けページに広告を設置しましたが、ホーム画面でも広告が出るようにカスタマイズしました。

記事の上に設置

記事の直下に設置

記事ページとホーム画面への対応

スマホ向けには記事の上と下の2カ所に広告を設置する方針とします。

Bloggerのスマホ向けのホーム画面では、記事の抜粋の一覧を表示するようになっているので、記事のページとは構成が異なります。
記事の上に設置するのは共通化できましたが、記事の下の場合は上手くいかず、2カ所に記述することで対応しました。

編集の手順

1. モバイルのページをカスタムに設定する。
[テンプレート] -> [モバイル] -> [カスタマイズ]

2. HTMLの編集で挿入箇所を検索する。
[テンプレート] -> [ブログ] -> [HTMLを編集]

※コードの検索はコードのテキストエリアでCtrl+F。

3. エスケープした広告コードを貼付ける。

挿入箇所

上の挿入箇所は id='mobile-main' で検索します。
下の挿入箇所は data:post.body で検索します。

<b:includable id='mobile-main' var='top'>

①記事タイトルの上はココ

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType == "index"'>

<b:loop values='data:posts' var='post'>

<b:include data='post' name='mobile-index-post'/>

</b:loop>

②ホーム画面の記事一覧の直下はココ

<b:else/>

<b:loop values='data:posts' var='post'>

<b:include data='post' name='mobile-post'/>

</b:loop>

</b:if>

</div>

...

(一部省略)

...

<data:post.body/>

</div>

③記事の直下はココ

（参考まで）ホーム画面での広告が不要であれば下記に置けます

<b:includable id='mobile-post' var='post'>
①記事タイトルの上はココ
<div class='date-outer'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='date-posts'>
<div class='post-outer'>
...
(一部省略)
...
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
②記事タイトルの下はココ
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
③記事の下はココ

（参考まで）その他の方法

1. ガジェットにモバイル用の広告コードを貼付ける。

投稿の上と下に２つのガジェットを置きました。
[レイアウト] -> [ガジェットを追加]

※この場合は広告コードをエスケープする必要がありません。

2. HTMLの編集でガジェットに mobile='only' を追加する。
[テンプレート] -> [ブログ] -> [HTMLを編集]->[ウィジェットへ移動]

（例：idはガジェット毎に異なります）

<b:widget id='HTML1' locked='false' title='スポンサー' type='HTML' mobile='only'>

これを設定した後はレイアウト画面からガジェットが見えなくなりました。
HTMLコードはちゃんと残っているのでmobile='only'を削除してあげると再びレイアウト画面から見えるようになります。

2014/06/01

Bloggerでブログを始めるメリット

Googleの提供するBloggerを使ってブログをするメリット

すぐに始められる

Gmailのアカウントは今では多くの人が持っていると思います。
アカウントを持っていなくともアカウント作成は簡単。

独自ドメインが使える

無料で投稿を始めても、後から独自ドメインに切り替えることができます。
とりあえずお試しで始めても安心ですね。

広告がない

これは一般の無料ブログではないサービスですね。
ほとんどの無料ブログでは、自分で付けた広告以外に勝手に広告が挿入されるのが当たり前ですから。
勝手に広告を付けられたくない、と思ったら、独自ドメインでWordpressやMovableTypeをやることになりますが、Bloggerなら無料で始めることが出来ます。

ダッシュボードがシンプルで使い勝手が良い

ブログのための機能以外の余計なものが無いのでスッキリしています。
他のほとんどの無料ブログはゴチャゴチャしてますよね。

カスタマイズがしやすい

Wordpressなどはテーマが豊富でデザイン性の高いものが多くある印象なのですが、どれを試してもしっくりきません。
結局、凝ったデザインは必要なく、シンプルなデザインで充分であると気がつきました。

Bloggerのテンプレートなら基本のレイアウトのパターンと色を選べるし、記事の横幅などはスライダーだけで簡単に調整することが出来ます。

容量は1GBまで

Picasaと共有ですが1GBまでの容量を無料で使用できます。
これは他と比べても充分な容量でしょう。

さらにGoogle+にアップグレードしていれば15GBまで使うことができます。

Blogger の制限事項
https://support.google.com/blogger/answer/42348?hl=ja

転送量制限は不明

転送料制限がないという記事も見ましたが、公式での記述は見当たりません。
そんなに人気が出る事を心配する事もないし、Googleのサーバーなら大丈夫でしょう。

デメリットは？

AdSenseの利用までに6ヶ月？

AdSenseと簡単に連携できるはずだけど「現在、あなたのブログには AdSense に承認されていません。」と表示されてしまいます。
参加要件のページを見ると「ウェブサイトの所有期間は 6 か月以上ですか。」という記述があります。えっ!?ホント!??

どうやらこれはBloggerでブログを始めた人向けにAdSenseへの登録を促すもののようなので、自分は以前から登録してあったAdSenseから広告を取得しました。

日本ではユーザーが少ない

カスタマイズの情報を探す場合に情報が少ないようです。
それでも海外も含めて多くのユーザーがいるので大丈夫だと思います。

気になるのが、特定の情報を検索しようと「blogger xxx」（xxxは任意の検索キーワード）でGoogle検索するとBloggerとは異なるブログサービスに関する検索結果がたくさん出てきます。Bloggerを「ブログ」と同一として検索でもされているようです。
そのためBloggerに特有の情報を検索する時は「blogspot xxx」としています。（blogspot はBloggerで作成できるブログのドメイン名）

他のGoogleサービスと連携している

と言ってもGoogle+ぐらいですが。
プロフィールがGoogle+のプロフィールを使用することがデフォルトになっています。
Google+で本名で公開しているとBloggerでも同様に本名でブログを公開することになります。
Blogger側で別途プロフィールの作成が出来ますが、肩身が狭い感じがします。

例えば、一度アップロードをした写真はGoogle+に登録されるので、削除の際にはGoogle+側で削除を行います。

Bloggerプロフィールを使用している場合はPicasaウェブアルバムに登録されるので、Picasaウェブアルバム側で削除することになるのですが、そこへのリンクがないのです。

こちらから
picasaweb.google.com/
行けますが、PicasaはGoogle+が出来てから終わったような存在なので、今後どのような仕様変更があるかは気になるところです。

登録: 投稿 (Atom)