2013年9月11日水曜日

[Blogger]最近の記事を表示するガジェットを登録する方法


グーグルブロガーには最近投稿した記事を表示するガジェットがないんですね。SEO的にはどうかよく分かりませんが個人的にはこれがないと落ち着きません。Googleで検索するとやはりクリボウさんのサイトが出てきました。3つも方法があるようです。

サイドバーに「最近の投稿」リストを表示する 3 つの方法 | クリボウの Blogger Tips






その中で一番簡単なのが「フィードガジェット」を使用する方法です。

早速やってみます。

まず、レイアウトの画面でガジェットの追加をクリック。


次に、ここでフィードを選択。



次にURLを入力します。本来フィードのURLはhttp://<blogname>.blogspot.jp/feeds/posts/defaultですが、feeds以降を入力しなくても勝手にフィードURLを表示してくれます。ちなみに私はFirefoxで作業していたのですが、ブロックされていることに気づかずかなり悩みました。Firefoxのブロックの表示は以下です。



これが出たら、クリックして、「このページの保護を無効」にして、再度「次へ」をクリックします。



その後、タイトルを「最近の投稿」とかにして、記事数を設定したら保存をクリックして終了です。



結果、こんな感じになります。



RSSですのでややタイムラグがあるのが難点ですが、簡単に設置できます。


2013年9月8日日曜日

[Blogger]モバイルテンプレートでタイトル下と記事下にAdSense広告を表示する方法

私的には当面の最後の課題であるスマートフォンでの広告表示です。このブログはグーグルブロガーのカスタマイズなのでそうでもないですが、普通のブログはもうすでに半分近くはスマホで読まれているのではないかと思いますので、アドセンスで少しでも収益を上げたい場合には今後ますます重要になるのがモバイルテンプレートの広告ですよね。

参考にしたのは以下のサイトです。よくまとめた参考サイトがあると本当に助かりますよね。


Bloggerのモバイルテンプレートをカスタマイズする方法 | Asterlist
mobile-post ...







モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips








基本的な流れはPCサイトと同様です。

1.アドセンスでコードを取得
2.コードの中でHTMLエンティティ文字にない文字を変換する
3.HTMLの編集で変換したコードを貼り付ける



注意点もPCサイトと同様のことが言えます。

1.同じ作業をしてもHTMLの編集の保存がうまく行く場合と行かない場合がある
2.コードを貼り付ける位置がテンプレートによって微妙に違う場合がある



それに加えてモバイルテンプレートを編集するときは以下のことに注意する必要があります。




1.モバイルテンプレートを「カスタム」にしておく

これをカスタムにしておかないといくらHTMLを編集しても変更が反映されないようです。これはもっとも注意すべき点ですね!方法はテンプレート>モバイルの下の歯車





その後、「 はい。携帯端末でモバイル テンプレートを表示する。 」を選択。モバイルテンプレートのプルダウンメニューで一番下の「カスタム」を選択後、右下の保存で終了です。





2.モバイル表示の確認を確認しておく

PCサイトとは異なり、テンプレートのプレビューをした段階では、どのように変更されているか確認できません。モバイル表示の確認方法はテンプレートを保存してから、左メニューのテンプレートを一旦クリックして上に戻り、>モバイルの下の歯車を選択し、次の画面でプレビューを選択します。すると性格にモバイル表示が確認できます。




3.コードを貼り付ける位置が探せない

実はPCサイトを先に作業していると、HTMLの中で本文を示す「data:post.body」は残り一つしか残っておらず、これがモバイル用の本文だということは自明です。HTML上では一つ目の「data:post.body」がモバイル用の本文だったんですね。一般的には<b:includable id='mobile-post' var='post'> というタグをたよりに探すと良いとのこと。

従ってモバイルテンプレートのタイトル下に広告を埋め込む場合は一つ目の「data:post.body」の少し上にある「div class='post-header-line-1'」の下に、記事下に埋め込む場合は「data:post.body」の下に埋め込めばよいことになります。






 それでは作業をしていきます。

コード取得はこちらの記事を参考にしてください。
初心者からのBloggerカスタマイズ: [Blogger]アドセンスのコードを貼り付けて広告を設置する

コード変換はこちらの記事を参考にしてください。
初心者からのBloggerカスタマイズ: [Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法


変換した結果こんなコードを貼り付けていきます。




貼り付けた状態です。まずはテンプレートを保存し、一つずつ貼り付け→テンプレートをプレビュー→テンプレートを保存を繰り返して確実に作業をしていきます。プレビューが見られなかったり、保存が出来なければ、左のテンプレートをクリックし、もう一度同じ作業をやってみるとうまく行くことがあります。





結果、このように広告を貼り付けることができました。

タイトル下




記事下




編集した後、うまく保存できなかったり、プレビューができなかったり、編集環境に癖がありますが、慣れてくれば作業がスムーズにできるようになってきます。



[Blogger]トップページと個別記事両方のタイトル下と記事下にGoogle AdSense広告を表示する方法

いよいよ(私的に)本題に入っていきます。実はタイトル下と記事下にうまく広告を入れられるか?入れている人もいるので自分に入れる能力があるか?ということになりますが。またモバイル広告を入れることができるかが自分にとっての本題で、これができれば他のブログをBloggerに移動しようと考えています。

まずはPCページでタイトル下と記事下に広告を入れてみます。参考にしたのは以下のサイトです。他にもありますが皆さんよくまとめていただいていて本当に助かります。参考にさせていただきます。ありがとうございます。


[Blogger] モバイル表示時、記事上と記事下にGoogle Adsenseの広告を表示する方法。 - Sunabox







Geek になろう: Bloggerで記事直下にAdsenseを表示する方法








基本的な流れは

1.アドセンスでコードを取得
2.コードの中でHTMLエンティティ文字にない文字を変換する
3.HTMLの編集で変換したコードを貼り付ける


といういたってシンプルなものなので、上のサイトでも丁寧に解説されているのですが、やってみるとなかなかうまく行きません。


その原因を自分なりに整理してみました。

1.同じ作業をしてもHTMLの編集の保存がうまく行く場合と行かない場合がある。

オンラインで作業、保存しているからなのか分かりませんが、一度やってみて保存されない場合、そのコードや貼り付ける位置が間違っていると思っていました。しかし原因はそれだけではない可能性があります。テンプレートをクリックし、HTMLの編集からもう一度同じ作業を行ってみると、すんなりプレビューと保存ができるケースもあるようです。ここですぐにあきらめずに何度かトライしてみることをお勧めします。


2.コードを貼り付ける位置がテンプレートによって微妙に違う場合がある。

BloggerのHTMLの編集の仕様が変更になったからなのか、テンプレートが違いのせいかは分かりませんが、私の場合広告を貼り付ける位置が上のサイトの例とは違いました。これはコードをちゃんと理解できれば良いのですが、それが面倒な私のような人は1.と合わせて試行錯誤して位置を確かめていくしかないようです(笑)

タイトル下に広告を埋め込む場合は「div class='post-header-line-1」の下、記事下に埋め込む場合は「data:post.body」の下というのは参考サイト通りなのですが、どうやら私のテンプレートの場合、トップページと個別記事のタイトル下に広告を埋め込むには2個の「div class='post-header-line-1」のうち2番目の下に埋め込むと良いようです。

記事下については「data:post.body」は全部で3つあってトップページ用が2番目、個別記事用が3番目のようです。


それでは作業をしていきます。

コード取得はこちらの記事を参考にしてください。

初心者からのBloggerカスタマイズ: [Blogger]アドセンスのコードを貼り付けて広告を設置する



アドセンスから取得したコードはこのような感じです。アドセンスの規約違反にならないようにタイトル下の広告の上下には点線のコードを追加してみます。また広告のセンタリングも同時に行います。



コード変換は以下です。私は秀丸でやりました。手作業だと間違えますので、エディタを利用した方がよいですね。

< → &lt;
> → &gt;
" → &quot;


結果はこんなコードになります。赤色の部分を貼り付けていきます。




貼り付けた状態です。まずはテンプレートを保存し、一つずつ貼り付け→テンプレートをプレビュー→テンプレートを保存を繰り返して確実に作業をしていきます。プレビューが見られなかったり、保存が出来なければ、左のテンプレートをクリックし、もう一度同じ作業をやってみるとうまく行くことがあります。



このあたりの基本的な作業については以下の記事が参考になると思います。

初心者からのBloggerカスタマイズ: [Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

記事下はこんな感じ




結果、このように広告を貼り付けることができました。

タイトル下




記事下






今日は2020年東京オリンピックが決まりました。広告もオリンピック関連だし、すばらしい!!




2013年9月1日日曜日

[Blogger]トップページの記事下にソーシャルボタンを追加する方法

前回の記事で忍者ツールズの忍者おまとめボタンを利用して各種SNSのシェアボタンを設置する方法を紹介しましたが、

初心者からのBloggerカスタマイズ: [Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

 この方法だと個別記事の下にはボタンが設置されるのですが、トップページには設置されないので、トップページの記事下にボタンを追加する方法を紹介します。


 トップページの記事下にボタンを追加する方法

といっても前回の手順とほぼ同じです。違うのはコードを挿入するする場所です。前回は2つ目の「data:post.body」の下に忍者おまとめボタンのコードを挿入しましたが、今回は3つ目の「data:post.body」の下に挿入します。それだけです。



ただし当ブログの場合シンプルテンプレートを使っているのですが、他のテンプレートだと違う可能性がありますので、注意してください。

結果このようになります。



[Blogger]TwitterやFacebook、はてブ等のソーシャルボタンを設置する

忍者ツールズでソーシャルボタンのコードを取得する

現在はSNS全盛ですから、FacebookのいいねボタンやGoogleの+1のボタンなどでブログを紹介されるとうれしいものです。

しかしBloggerが標準装備しているソーシャルボタンは以下のような感じ。



小さくて、クリック数もカウントしてくれないのでいまいちです。

これに代わる見栄えのするソーシャルボタンを忍者おまとめボタンを利用して設置してみます。

忍者ツールズ|ホームページ ブログ アクセス解析 カウンター メールフォーム

まずは忍者ツールズユーザアカウントを取得します。次にトップページから忍者おまとめボタンをクリック。その後設置するWEBサイトをクリックし



ボタンをカスタマイズします。今回は自分でカスタマイズを選択。自分で好みのボタンを作っていきます。Feedlyがあればよかったのですがまだできてないようです。こんな感じで選択し、最後にプレビュー&コードを取得するボタンをクリック。


こんな感じでコードを取得できます。



 忍者おまとめボタンは一度作ってしまえば、以下のような管理画面からボタンのクリック状況の解析や、新たなボタンの追加等をコードをいじらずにできます。優れものです!




コードをテンプレートに追加する

ここからは少し難しいので、丁寧に進めていきます。テンプレートのコードを編集していきますので、最初にバックアップをとっておいた方が良いでしょう。

テンプレートの画面右上のバックアップ/復元をクリックすることで.XMLファイルを任意のフォルダに保存できます。



次に先ほど取得したコードを使用しているテンプレートに追加します。同じくテンプレートの画面で「HTMLの編集」をクリック。




するとテンプレートのコードが現れますので、このコードの中で記事の本文を示すコード「data:post.body」を探します。方法はまず枠内をクリックし、Cntl+fで検索窓を出します。そこにdata:post.bodyを打ち込みリターンキーをたたくと検索されます。複数検索がヒットする場合は再度リターンキーをたたくと次の場所に移動します。


このブログで使用しているテンプレートではdata:post.bodyは3つあり、その2つめがPC用のページの記事本文になるようです。そこでこの下に忍者ツールズで取得したコードを挿入します。


テンプレートをプレビューし、ボタンが出現していることを確認し、テンプレートを保存します。結果下のような感じになります。



とても良い感じです。このようなコードの編集作業をする場合、失敗してテンプレートが保存できなかったり、プレビューができないかったりすることが結構ありますので、上に書いたように作業の始めにテンプレートのバックアップは必須です。またテンプレートの保存を頻繁に行い、失敗したら「変更を元に戻す」ボタンを使用して、なるべく手作業を避けるのが無難です。手作業で元に戻そうとするとどうしてもミスしがちです。







タイトル下(記事上)にソーシャルボタンを設置したい場合

上と同じ要領で可能です。今度は「div class='post-header-line-1'」を目安にします。上とおなじように検索すると、このブログのテンプレートでは2つヒットします。このうち2つ目がPCサイトのタイトル(の下?)を表しているようなので、この下に先ほどのコードを挿入します。



結果こんな感じになります。



この忍者おまとめボタンですが、欠点は表示が遅くなることです。便利なのでしょうがないですがあまり表示が遅いのも痛いので、このブログでは記事下だけにしておこうと思います。





他のソーシャルボタン設置サービス

他にはShareThisを利用する方法があります。

Homepage | ShareThis.com

こちらは上で紹介した方法のようにコードを編集する必要がないので簡単に設置できます。ただし、記事下にしか設置できないようです。



2013年8月31日土曜日

[Blogger]ぶろっぐぴんぴんの使い方とPing送信先など

ぶろっぐぴんぴんの使い方とPing送信先

前回紹介したぶろっぐぴんぴん(BlogPingPing)ですが、

初心者からのBloggerカスタマイズ: [Blogger]更新Pingを設定する
 
自分サイトURLを入力した後、Ping送信先を複数箇所設定することができます。デフォルトではhttp://www.blogpeople.net/servlet/weblogUpdatesしか設定されていません。


設定するPing送信先ですが、今回はこちらのサイトを参考にしました。

Ping送信先一覧 2013年最新版!今でも効果的なベスト21@アフィリエイトブログ






どのサイトがどれぐらい効果があるのかはよくわかりませんが、とにかくたくさん登録したいと思います。このサイトによれば効果のあるPing送信先は以下のようなものになります。


    http://api.my.yahoo.co.jp/RPC2

    http://blog.goo.ne.jp/XMLRPC

    http://blogsearch.google.co.jp/ping/RPC2

    http://blogsearch.google.com/ping/RPC2

    http://ping.blo.gs/

    http://ping.bloggers.jp/rpc/

    http://ping.blogranking.net/

    http://ping.dendou.jp/

    http://ping.fc2.com/

    http://ping.freeblogranking.com/xmlrpc/

    http://pingoo.jp/ping/

    http://rpc.weblogs.com/RPC2

    http://serenebach.net/rep.cgi

    http://taichistereo.net/xmlrpc/

    http://www.i-learn.jp/ping/

    http://www.blogpeople.net/servlet/weblogUpdates

    http://www.hypernavi.com/ping/

    http://rpc.pingomatic.com/

    http://ping.speenee.com/xmlrpc

    http://api.my.yahoo.co.jp/rss/ping?u=[あなたのサイトのRSSアドレス]

これらをひとつひとつぶろっぐぴんぴんに登録していきます。しばらくたってからPVを確認してみたのですが、Ping送信したと思われる時刻に大きな山ができました。



他の更新Ping送信サービス

他にもFeedPing.netというサービスがありましたので登録してみました。登録はトップページのPing送信をするでURLを記入するだけです。超簡単!

PING送信! 無料で160以上のサイトにPINGを送信【 FeedPing.net 】








サービスの概要に以下のように書いてあるので、一度登録しておけば、あとはサイトを登録するたびにPing送信してくれるということでよいのだと思います。

あらかじめ自分のブログにPing送信設定しておくことで、記事を投稿するたびに、タイトルや概要、アドレスなどの更新情報が、指定したPingサーバにPing送信されます。サーバは送られてきた更新情報を元に、サイトに更新したことを速報のように表示してくれます。