ブログブログHacks Tips Tweaks

アフィリエイトリンクの1px Webビーコンを非表示にする

2025-06-16T07:17:00.004+09:00

アフィリエイトバナーのリンクに 1px の画像がついてくることがあります。

ボクはブログのサイドバーに貼るときはたいてい300px×250pxを選びます。

テンプレートはたいていレスポンシブですからモバイル表示にすると 300px だと画面上でチョット中途半端な感じになります。なので画面幅いっぱいに表示できるようにします。

するともれなく 1px の Webビーコンも100%に拡大されるので意味不明な空白ができるわけです。

バナー画像の img を拡大を 100%に拡大

例えばエーハチのアフィリエイトバナーはこんな感じ。


<a href="https://px.a8.net/svt/ejp?a8mat=000000+000000+0K+000000" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://www20.a8.net/svt/bgt?
aid=070517113111&wid=002&eno=01&mid=s00000000002006264000&mc=1"></a>
<img border="0" width="1" height="1" src="https://www16.a8.net/0.gif
?a8mat=15ZFCP+1U35P6+0K+11ALC1" alt="">

モバイルで 300px のバナーが表示されるとバナーの左右かに15～20pxの余白ができるので、img を拡大するようにスタイルを指定します。

仮にサイドバーは #side-wrapper とします。


  .#side-wrapper img: {width:100%}

これでサイドバーのバナー画像はモバイル画面いっぱいの 100% に表示されるようになって、バランスが良くなった気がします。

1px Webビーコンを非表示にする

このままだともれなく付いてきた 1px Web も 100% に拡大されっぱなしてアフィリエイトバナー画像の直下にポッカリと同じ大きさのスペースが空くのでこれをこれを非表示にします。


#side-wrapper img[width="1"]{display:none;}

これでアフィリエイトバナーはサイドバー 100% 幅で 1ox Webビーコンの空きスペースは消えます。

id属性全体に指定したほうがラク

アフィリエイトバナーはサイドバーだけじゃなくて記事中に貼ることもあるので、最初からブログやサイト全体に 1px画像を非表示にしておいたほうがラクです。

Chrome のデベロッパーツールや HTMLのソースを表示して、ブログやサイト全体の属性を確認します。

このテンプレートは #outer-wrapper なのでここ全体の 1px ビーコンを非表示にします。


#outer-wrapper img[width="1"]{display:none;}

これで 1px Webビーコン付きのアフィリエイトバナーをブログ、サイトのどこに貼り付けても、バナー広告は画面100%でかつ無駄な空スペースができなくなります。

カスタマイズは自己責任でお願いします。

Google Bloggerブログでサイトマップ・記事一覧を作成するスクリプト

2025-06-16T04:23:00.011+09:00

Google Bloggerで記事には関連記事とかカテゴリー別のアーカイブなどのガジェット、それから検索窓などがあります

しかし閲覧者がピンポイントで記事を特定するのはなかなか難しいですね。

そこでブロガーブログに全記事を一覧で表示するサイトマップのページを自動作成しておくと便利です。

サイトマップページでのグルーピングはラベルごとです。全記事一覧で表示されると無駄なラベリングが目に付いたりして、整理整頓できるメリットもありますね。

jQueryの導入

ネットで配布されている Blogger Template を使っているのであれば、jQuery は既に追加されていると思います。

手っ取り早いのは jQuery CDN にリンクし、<head></head>に記述しておきます。

jQuery CDN – Latest Stable Versions

ページの作成とコードの貼り付け

新規のページを作成して、ページに直接コードを貼り付けると簡単です。

ページのパーマリンクは "sitemap.html" にします。作成するページのタイトルにはアルファベットで sitemap と入力してから作成します。

スクリプト内に書き出すページを sitemap.html と指定しているので必ず sitemap.html にしてください。

スクリプトの貼り付け

スクリプトの中にご自身のブログURLを指定する箇所が３箇所があるので修正してください。


<div class="post-body sitemap">
<script type='application/ld+json'>
{
  "@context":"http://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {"@type":"ListItem","position":1,"name":"Home","item":"https://ブログのURL/"},
    {"@type":"ListItem","position":2,"name":"Sitemap","item":"https://ブログのURL/p/sitemap.html"}
  ]
}
</script>
    <script type='text/javascript'>
      // 記事のタイトル、URL、公開日、ラベル、最近の投稿フラグを格納する配列
      var postTitle = new Array();
      var postUrl = new Array();
      var postPublished = new Array(); 
      var postDate = new Array();
      var postLabels = new Array();
      var postRecent = new Array();

      var sortBy = "titleasc"; // ソート基準の初期値
      var numberfeed = 0; // フィードからのエントリ数

      // Bloggerのフィードデータを処理するメイン関数
      function bloggersitemap(a) {
        function b() {
          // フィードにエントリがあるか確認
          if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d; // 記事の総数を設定
            ii = 0; // インデックスカウンター
            for (var h = 0; h < d; h++) {
              var n = a.feed.entry[h];
              var e = n.title.$t; // 記事タイトル
              var m = n.published.$t.substring(0, 10); // 公開日 (YYYY-MM-DD形式)
              var j; // 記事URL

              // alternateリンクから記事URLを取得
              for (var g = 0; g < n.link.length; g++) {
                if (n.link[g].rel == "alternate") {
                  j = n.link[g].href;
                  break;
                }
              }

              var o = ""; // enclosureリンクから画像URLなどを取得 (ここでは使用されていない)
              for (var g = 0; g < n.link.length; g++) {
                if (n.link[g].rel == "enclosure") {
                  o = n.link[g].href;
                  break;
                }
              }

              var c = ""; // 記事のカテゴリ（ラベル）
              if ("category" in n) {
                for (var g = 0; g < n.category.length; g++) {
                  c = n.category[g].term;
                  var f = c.lastIndexOf(";");
                  if (f != -1) {
                    c = c.substring(0, f); // 複数のカテゴリがある場合の処理
                  }
                  // 各配列にデータを追加
                  postLabels[ii] = c;
                  postTitle[ii] = e;
                  postDate[ii] = m;
                  postUrl[ii] = j;
                  postPublished[ii] = o; // ここでは使用されていないが、データとして格納
                  // 最近の投稿かどうかを判定 (最初の10件を「New!」とする)
                  if (h < 10) {
                    postRecent[ii] = true;
                  } else {
                    postRecent[ii] = false;
                  }
                  ii = ii + 1;
                }
              }
            }
          }
        }
        b();
        sortBy = "titledesc"; // ソート基準をタイトル降順に設定
        sortPosts(sortBy); // 記事をソート
        sortlabel(); // ラベルごとに記事をソート
        displayToc(); // サイトマップを表示
      }

      // 記事をソートする汎用関数
      function sortPosts(d) {
        // 配列の要素を交換するヘルパー関数
        function c(e, g) {
          var f = postTitle[e];
          postTitle[e] = postTitle[g];
          postTitle[g] = f;
          var f = postDate[e];
          postDate[e] = postDate[g];
          postDate[g] = f;
          var f = postUrl[e];
          postUrl[e] = postUrl[g];
          postUrl[g] = f;
          var f = postLabels[e];
          postLabels[e] = postLabels[g];
          postLabels[g] = f;
          var f = postPublished[e];
          postPublished[e] = postPublished[g];
          postPublished[g] = f;
          var f = postRecent[e];
          postRecent[e] = postRecent[g];
          postRecent[g] = f;
        }
        // バブルソートアルゴリズム
        for (var b = 0; b < postTitle.length - 1; b++) {
          for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") { // タイトル昇順
              if (postTitle[b] > postTitle[a]) {
                c(b, a);
              }
            }
            if (d == "titledesc") { // タイトル降順
              if (postTitle[b] < postTitle[a]) {
                c(b, a);
              }
            }
            if (d == "dateoldest") { // 日付昇順
              if (postDate[b] > postDate[a]) {
                c(b, a);
              }
            }
            if (d == "datenewest") { // 日付降順
              if (postDate[b] < postDate[a]) {
                c(b, a);
              }
            }
            if (d == "orderlabel") { // ラベル順
              if (postLabels[b] > postLabels[a]) {
                c(b, a);
              }
            }
          }
        }
      }

      // ラベルごとにソートする関数
      function sortlabel() {
        sortBy = "orderlabel";
        sortPosts(sortBy); // まずラベルで全体をソート
        var a = 0;
        var b = 0;
        while (b < postTitle.length) {
          temp1 = postLabels[b];
          firsti = a;
          // 同じラベルのエントリをスキップ
          do {
            a = a + 1;
          } while (a < postLabels.length && postLabels[a] == temp1); // 修正: 配列の範囲チェック
          b = a;
          // 同じラベル内のエントリを再度ソート (タイトル昇順)
          sortPosts2(firsti, a);
          if (b > postTitle.length) {
            break;
          }
        }
      }

      // 特定の範囲内の記事をタイトル昇順でソートする関数
      function sortPosts2(d, c) {
        // 配列の要素を交換するヘルパー関数
        function e(f, h) {
          var g = postTitle[f];
          postTitle[f] = postTitle[h];
          postTitle[h] = g;
          var g = postDate[f];
          postDate[f] = postDate[h];
          postDate[h] = g;
          var g = postUrl[f];
          postUrl[f] = postUrl[h];
          postUrl[h] = g;
          var g = postLabels[f];
          postLabels[f] = postLabels[h];
          postLabels[h] = g;
          var g = postPublished[f];
          postPublished[f] = postPublished[h];
          postPublished[h] = g;
          var g = postRecent[f];
          postRecent[f] = postRecent[h];
          postRecent[h] = g;
        }
        // バブルソートアルゴリズム
        for (var b = d; b < c - 1; b++) {
          for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
              e(b, a);
            }
          }
        }
      }

      // サイトマップを表示する関数
      function displayToc() {
        var a = 0; // 現在処理中の記事のインデックス
        var b = 0; // 現在処理中のラベルグループの開始インデックス

        // 全ての記事を処理するまでループ
        while (b < postTitle.length) {
          // 修正1: 配列の範囲外アクセスを防ぐための安全チェック
          // bがpostLabelsの範囲内であることを確認
          if (b >= postLabels.length) break;

          temp1 = postLabels[b]; // 現在のラベル名を取得
          // ラベル名とカラム構造のHTMLを出力
          document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
          firsti = a; // 現在のラベルグループの最初の記事のインデックスを保存

          // 同じラベルを持つ記事を全て処理するまでループ
          do {
            // 修正2: 配列の範囲外アクセスを防ぐための安全チェック
            // aがpostTitle、postUrl、postRecentなどの範囲内であることを確認
            if (a >= postTitle.length || a >= postUrl.length || a >= postRecent.length) break;

            document.write("<p>");
            // 修正3: aタグのhref属性の記述ミスを修正 (<a " href=" -> <a href=")
            document.write('<a href="' + postUrl[a] + '">' + postTitle[a] + "");
            // 最近の投稿であれば「New!」を表示
            if (postRecent[a] == true) {
              document.write(' - <strong><span>New!</span></strong>');
            }
            document.write("</a></p>");
            a = a + 1; // 次の記事へ進む
          } while (a < postLabels.length && postLabels[a] == temp1); // 修正4: do...whileループの条件に配列の範囲チェックを追加

          b = a; // 次のラベルグループの開始インデックスを設定
          document.write("</div></div>"); // カラムとアーカイブのdivタグを閉じる
          sortPosts2(firsti, a); // 同じラベル内の記事をタイトル昇順でソート (これは表示後に再ソートされるため、視覚的な効果は小さいかもしれません)

          // 修正5: 最終的なループ条件の修正 (postTitle.lengthを超えたらループを終了)
          if (b >= postTitle.length) {
            break;
          }
        }
      }
    </script>
    <!-- Bloggerのフィードから記事データを取得し、bloggersitemap関数をコールバックとして実行 -->
    <script src="https://ブログのURL/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>


<script type='text/javascript'>
  // exportifyというグローバルオブジェクトで表示設定を定義
  var exportify = {
    noTitle: "No title", // タイトルがない場合の代替テキスト
    postAuthor: true, // 投稿者を表示するか
    authorLabel: "by", // 投稿者名の前に表示するラベル
    postDate: true, // 投稿日を表示するか
    dateLabel: "&#8226;" // 投稿日の区切り文字
  }
</script>
  </div>

このブログの記事一覧サイトマップ

本文中に貼り付けた画像の枠罫線（Border）をはずす

2025-06-15T05:52:00.003+09:00

Bloggerテンプレートの多くは、本文中に貼り付けた画像を囲むように枠線（Border）が入ります。アフィリエイトリンクのコードにはビーコンという縦横1pxのイメージ画像がたいてい付いてきます。

このビーコンは1px四方のちびっこのくせに表示されたページでは罫線枠付きで3mm×3mmくらいに膨れ上がり１文字くらいのスペースを取っています。

これは格好悪いので枠罫線（Border）を消してみます。

HTMLから img の border を探す

ダッシュボードの「レイアウト」－「HTMLの編集」で「テンプレートの編集」を表示します。

HTMLソースのスタイルシートから次の記述を探します。
.post img で検索すると良いでしょう。

.post img { padding: 4px; border: 1px solid $borderColor; }

これが本文中（post）のイメージ（img）に余白と枠罫線を付けている記述です。これを次のように編集します。

.post img { padding: 0; }

以上で、本文中のイメージ画像から余白、枠罫線が消えました。

BloggerのNavバー（Navigation）を非表示

2025-06-15T05:50:00.002+09:00

Google Bloggerの最上部に表示されているNavBar（ナビゲーションバー）を削除(非表示)にするカスタマイズです。

ダッシュボードの「レイアウト」タブから「HTMLの編集」を選択します。HTMLのソースから下記の青色の記述を探します。比較的に最初のほうに出てきます。

----------------------------------------------- Blogger Template Style Name: Minima Designer: Douglas Bowman URL: www.stopdesign.com Date: 26 Feb 2004 Updated by: Blogger Team ----------------------------------------------- */

/* Variable definitions

====================

/* Variable definitions の直前に次のコードを挿入します。

#navbar-iframe { display: none !important; }

Navバー非表示のコードを挿入後は下のようになります。

[テンプレートを保存]ボタンで保存して変更を反映させます。

bTemplates などで配布されているテンプレートのほとんどは、Navバーが非表示になるようにカスタマイズされています。

Titleタグのブログ名と記事名の順番を入替える

2025-06-15T05:49:00.004+09:00

大抵の無料ブログサービスはテンプレートのTitleタグの初期値は、前に「ブログ名」、後ろに「投稿記事タイトル」という順番に表示されるように設定されています。

ブラウザーのタイトルバーや検索エンジンにインデックスされたときのタイトルは、この記事の例では下記のように表示されます。

「Google BloggerブログHacks Tips Tweaks : ブログ名と投稿記事を入替えるTitleタグのカスタマイズ」

検索エンジンで検索されたとき、表示される文字数の制限でブログ名が先に記述されていると肝心の投稿記事タイトルが見えないことがあります。

せっかく上位表示されたとしてもクリックされなければ意味がありません。投稿記事タイトルが先に表示されていれば投稿記事の内容が分かりますからクリックされやすいかもしれません。

Blogger で Title の記述をカスタマイズ

Google BloggerでTitleに「投稿記事タイトル：ブログ名」と表示されるようにHTMLを編集します。

ダッシュボードから「レイアウト」－「HTMLの編集」を開きます。
HTMLのコードから次の記述を探します。

この１行を次のコードで上書きします。

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

投稿記事タイトルとブログ名の間に入るセパレーターは｜（パイプ）を使っていますが、好きなものと差し替えてください。

例えば、半角のコロン(:)や » などがあります。

このコードは個別の投稿記事（post）が開かれたときのみ稼動するTitleタグのカスタマイズです。
ラベルやアーカイブなどでは、従来どおりブログ名が先に表示されます。
主要検索エンジンにインデックスされたときに「タイトルの重複」を少なくするためにも有効だと思います。

Google PicasaからBloggerへイメージ画像を貼り付ける

2025-06-15T05:49:00.003+09:00

記事にアップロードした画像サイズ（縦横）を小さくしてしまったりと、Bloggerのイメージ画像の扱いは少し不便ではありませんか？

「小・中・大」から選べますが、これに「実寸」を加えてもらいたいです。ブログに掲載される画像の著作権管理や他サーバーから貼り付けたイメージ画像を読み込むときのトラフィック管理などなど、理由はあるようですが。

記事作成画面から画像をアップロードする場合

Bloggerの投稿画面から画像イメージをアップロードします（「作成」タブで編集）。

丸印の「画像を挿入」ボタンからアップロードできます。

通常はここで[画像を追加]ボタンで文書中にイメージを挿入しますが、ここでは[キャンセル]ボタンでアップロード画面を閉じます。

Bloggerの画像アップロードでイメージを貼り付けた場合は次のようなHTMLコードが挿入されます。

直接アップロードして貼り付けたときの問題点は画像サイズです。
「小・中・大」から画像サイズを選択できますが、本文の幅の設定によっては大を選択しても本文の半分くらいのサイズにしかなりません。

Blogger への画像貼り付けは Picasa が便利

Bloggerからアップロードしたイメージ画像はGoogle Bloggerと同じアカウントのPicasa内に格納されますから、イメージ画像を貼り付けるには Picasaから画像URLを取得してそれを直接貼り付けます。その方が実寸サイズや任意のサイズを選択できるので融通が利きます。

WebブラウザーでPicasaウェブアルバムを開きます。

画像を選択

画像を右クリックしてURLをコピー

https://lh5.googleusercontent.com/-hZPC5KHLQG4/Uj1IPyhw5AI/AAAAAAAABo0/tOO_Pq8JGnk/s590/navbar%25E3%2581%2582%25E3%2582%258A.jpg

上記のような画像のURLがコピーされました。これをimgタグに編集し記事に貼り付けます。

貼り付けた結果

上図の例のように実寸で貼り付けることができました。

なお、Bloggerテンプレートはイメージ画像の周囲に余白（padding）と枠罫線（border）が入るように指定されていることが多いようです。
スタイルシートでIMG画像のPaddingとBorderを取り去る方法は「本文中に貼り付けた画像の枠罫線（Border）をはずす」を参考にしてスタイルシートをカスタマイズしてください。

PCにインストールするPicasaアプリは、Googleのホームページから無料でダウンロードできます。
PC内の写真をウェブ上の Picasa と同期する場合は、PCにインストールしておくと便利です。Blogger に画像を貼り付けるだけであれば、ウェブ版の Picasa だけで十分です。

追記

Blogger の記事投稿画面から画像をアップロードしたとき、記事に挿入される画像URLと、Picasa で取得する画像URLは下記の通り異なります。

Bloggerの記事投稿画面で取得する画像URL
http://lh5.ggpht.com/_HGYcyPLdZsM/SU_OYkKL7hI/AAAAAAAAARA/j7ZqM-G1GGU/xxxxxx.jpg

Picasa で取得する画像URL
https://lh5.googleusercontent.com/-OuMRc-mQsIE/Uj1IRJMbzaI/AAAAAAAABpE/zVeIV6QevYw/s590/xxxxxx.jpg

格納されているサーバが異なります。
ザックリ言えば、Blogger で取得する画像URLは、Blogger のアカウント（セキュリティ）で紐づけされていて、Picasa は紐づけされていない。

つまり、Blogger から取得した画像URLは Blogger の記事内だけで有効で、Picasa で取得する画像URLは、Blogger 以外のブログに貼り付けても表示されるので利用範囲が広がります。

日本語環境のBloggerで投稿記事URLを任意に指定する

2025-06-15T05:44:00.001+09:00

日本語のGoogle Bloggerでは投稿記事で採用されるURL(Permalink)は記事のタイトルが引用されて生成されています。この自動生成のパーマリンクって無機質だと感じたことはありませんか？

Google や Yahoo などの検索エンジンで検索したときに記事タイトルと一緒にURLも掲載されます。そのURLを見たときに Google Bloggerプラットフォームのブログはインパクトが無いというか、Blogger任せというか。
ひと手間かけて、もう少し一瞥性の高いパーマリンクにしたいと思ったことはありませんか？

私個人的に言えば、検索結果を見て注目するのは記事タイトルやスニペットはもちろんですが、パーマリンクもよく見るようにしています。検索したキーワードは太字で強調されていますから見るというよりも、否応無しに目に入る。
パーマリンクにも検索キーワードが含まれているとき、パーマリンクの中でもキーワードが太字で強調される。極端なことを言えば、パーマリンクの中にヒットしたキーワードがあれば、それだけで検索結果に表示されることだってある。

Google Bloggerで日本語の記事タイトルでも、英文の記事タイトルのように意味のあるパーマリンクにしてみようというのが、この投稿記事の主旨であります。

英語の記事タイトルであればパーマリンクに採用される

記事タイトルが英語の場合、Bloggerはそのまま英単語を参照してパーマリンクを生成します。例えば、投稿記事に"Merry Christomas 2008"というタイトルをつけた場合、URLは次のようになります。

http://blogname.blogspot.com/yyyy/mm/merry-christmas-2008.html

※ yyyyは西暦年、mmは月。以下同様。

一方、言語設定が日本語のときもURL生成のルールは同じですが、２バイトコードの日本語はURLに採用されません。
従って、英単語や数字を（１バイトコード）を含まない日本語の記事タイトルをつけたときのパーマリンクは blog-post_nnnn.html になります。

例１：「日本語環境のBloggerで投稿記事URLを任意に指定する」という記事タイトル

http://blogname.blogspot.com/yyyy/mm/bloggerurl.html

タイトルで使用した半角英数字(blogger, url)のみが抽出され、１語にまとめられてURLが生成されています。

例２：「メリークリスマス２００８」という記事タイトル（注：すべて全角）

http://blogname.blogspot.com/yyyy/mm/blog-post_0001.html

タイトルに半角英数字が含まれていないので、blog-post_nnnn.html（nnnnはユニークな文書連番）となります。

些細なことなのかもしれませんが、SEO的にはパーマリンクに使われている文字も一応参照されている。もし参照されていないとしても、検索エンジンで検索した結果を見た閲覧者が"merry-christmas-2008.html" と "blog-post_100.html" のどちらのURLに親しみを感じるか。
どちらかといえばフレーズになっている前者ではないでしょうか。

Google Blogger日本語環境で任意のパーマリンクを生成する方法

日本語言語環境（記事タイトルが日本語）でも同じように英語のフレーズでURLを生成するためは次のような方法を使います。

新しい投稿記事を作成したとき、タイトル欄にその投稿記事を上手に表現している英語のフレーズを入力します。仮の記事タイトルです。
~~そのとき英単語の間はハイフン"-"を入れるようにします。~~認識されるタイトルの長さは34バイトのようですから、半角英数字34文字以下のタイトルを作ります。

例えば、下記のように。

set unique blogger url in japanese

半角英数字のタイトルを入力したら[投稿を公開]し、すかさず投稿リストから該当記事を開き[下書きとして保存]します。
ここで時間を空けてしまうとRSSに追加されてしまうことがありますし、インデックスされやすい骨太ブログであれば５分もしないうちに検索エンジンにインデックスされてしまうかもしれません。この処理は間髪いれずに即効で終わらせるようにします。

下書きから再編集します。このとき実際に公開する日本語タイトルに置き換えます。
この時点でパーマリンクがどのような記述になったかは確認しにくいのですが間違いなく下書きで保存したときのアルファベット URL で確定していますから心配はいりません。

最後になりますが、任意の英語フレーズのパーマリンクを生成したところでアクセスが増えるとか、検索されやすくなるとか、クリックされやすくなるとか、データが無いので詳細は不明です。単なる自己満足の世界ですね。

追記（2012年3月現在）

Bloggerの投稿画面に「保存機能」が追加されています。
半角英数字の英語タイトルを入力したら、[保存]ボタンを押下すれば下書きとして保存されますが、この時点ではパーマリンクは未決定の状態です。（つまり、blog-post_nnnn.html の状態）。
英文の仮タイトル入力後、いったん公開するという操作は必要ですのでご注意ください。

BloggerにAddClipsボタンを貼り付ける

2025-06-15T05:42:00.002+09:00

ソーシャルブックマークとRSSが１つのボタンで登録できるAddClipsは便利なツールで導入しているブロガーをたくさん見かけます。

しかし、Blogger用を選択したにもかかわらず、生成されたコードをBloggerに貼り付けるとAddClips IDのエラーになってしまうことがあります。エラー無く正しく稼動させるためには少しコードを修正する必要があるようです。

AddClipsコードをエンティティ文字変換

以下のコードがオリジナルで生成されたコードです。

<script type="text/javascript">

</script><script type="text/javascript" src="http://js.addclips.org/v2/addclips.js"
charset="utf-8"></script>

AddClipsの指示通り、ボタンを貼り付ける場所はタイトル下、記事の上ですが、ここに表示させるためにはBloggerのHTMLの中に貼り付けることになります。しかし、BloggerのHTML内で<や>などの記号はエラーで認識できませんから、これをエンティティコードに変換することになります。

ところが全部を変換してしまうとエラーになってしまいます。
とりあえずエンティティ文字に置換したAddClipsのコードは次の通り。

&lt;!-- AddClips Code START --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
&lt;!--
AddClipsUrl = '&lt;data:post.url/&gt;';
AddClipsTitle = '&lt;data:post.title/&gt;';
AddClipsId = '123456789ABCD';
AddClipsBcolor='#336699';
AddClipsNcolor='#528BC5';
AddClipsTcolor='#FFFFFF';
AddClipsType='0';
AddClipsVerticalAlign='middle';
AddClipsDefault='bookmark';
AddClipsTab = 'bookmark';
// --&gt;
&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;
src=&quot;http://js.addclips.org/v2/addclips.js&quot;
charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;!-- AddClips Code END --&gt;

実際にAddClipsボタンからブックマークしてみると、投稿記事のURLが取得できないというエラー。従い、エラーになったと思われるのは赤文字の部分のようです。この2行の一部はエンティティコードに変換してはいけなかったようです。

AddClipsUrl = '<data:post.url/>';
AddClipsTitle = '<data:post.title/>';

手順としてはAddClipsで生成したBlogger用のコードの記号をいったんエンティティコードに変換します。そして、上記のBlogger URLとTitleを抽出する変数部分の２行だけコピペして差し替えます。

私はHTMLエンティティ文字の変換にMicrosoft FrontPageを使っています。コードを貼り付けてそれをHTMLソースで見るとエンティティ文字に変換されています。こういったアプリケーションを使わなくてもエンティティ文字へ変換してくれる無料ツールが使えますのでご利用ください。Google Bloggerにコードを貼り付けるときは、エンティティ文字への変換が必須になります。

Bloggerに「続きを読む」を追加する

2025-06-15T05:38:00.005+09:00

Google Bloggerのテンプレートには「続きを読む」がありません。

海外のブログを見ていると続きを読む（Read More, View More）は特に主流という感は無く、もしかするとあれは日本固有のものなのかなと思えなくもありません。

しかし、日本のブログサービスのテンプレートに慣れてしまうと、Bloggerでやるべきかやらざるべきかは別にして、何故か「続きを読む」で投稿記事を２つに分割してみたくなります。

続きを読むを追加するカスタマイズ

「続きを読む」の実装は考えるほど難しくありません。テンプレートのHTMLにコードを２箇所追加し、新しい記事を作成するときに spanタグで記事を２分割してあげるだけです。

ステップ１：スタイルシートの追加

ダッシュボードの「レイアウト」から「HTMLの編集」を開き、</head> の記述を探します。この直前（<head>と</head>の間であれば何処でも）に次のスタイルの定義を貼り付けます。

ステップ２：HTMLの投稿記事部分（post）に続きを読むで記事を分割するコードを貼り付けます。

「ウィジットのテンプレートを展開」をティックしてHTMLを展開しておきます。
投稿記事（post）部分に相当する次の記述を探します。

この </b:if> 直下にを次のコードを追加します。

<b:if cond='data:blog.pageType != "item"'>
<p style='clear: both;'><a expr:href='data:post.url' rel='nofollow'>…続きを読む&raquo;</a></p>
</b:if>

…続きを読む&raquo; の記述は好みに合わせて変えてください。但し、この例のように記号を使う場合はHTMLエンティティ文字に変換しないとエラーになりますから注意します。

HTMLエンティティ文字については「BloggerにAddClipsボタンを貼り付ける」を参照して下さい。

ステップ３：投稿記事を書く

投稿記事を書くときに、記事中に次のコードを貼り付けます。

<span class="fullpost"> よりも前の行に書かれた文書が「続きを読む」の前に表示される部分、つまりトップページに表示される記事になります。

<span class="fullpost"> と </span> の間に書かれた文書が「続きを読む」で展開されて始めて表示される記事になります。

毎回これをコピペするのは大変ですし、私は<span style="fullpost"> と書いてしまい記事が分割できずにずいぶん悩みました。 spanタグには反射的に style と続けてしまうのです。

こういった間違えを回避するために「投稿テンプレート」にこの２行をコピペしておくようにします。

ダッシュボードの「設定」－「フォーマット」を選択し、「投稿テンプレート」上記の fullpostの２行をコピペします。これで新しい投稿記事を作成するときには常にこのfullpostの記述が予め入力されている状態で開くことになります。

この投稿記事内に書くspanタグですが、執筆段階では「プレビュー」をすると消えてなくなることが確認されています。

なるべくプレビューはしないようにしていますが、とりあえずプレビューで消えてしまったときには直ぐに追加できるように記述を覚えておくか、IMEの辞書登録をしておくなりしたほうがよさそうです。

Google AdSenseタグをHTMLエンティティ文字に変換

2025-06-15T05:25:00.005+09:00

Google BloggerをカスタマイズしてHTMLを下手にいじくるとエラーが出て保存できないのは、Bloggerがとても厳格な標準化されたXMLを採用しているからです。

他社の無料ブログサービスで普通に書いていたHTMLがBloggerには通用しない。タグを閉じ忘れたなど普通のブログサービスプロバイダーは見逃してくれるようなポカもBloggerは見逃してくれない。

その意味では同社のGoogle AdSenseタグもBloggerの標準化XMLから照らし合わせるとエラーということになり、記事本体（post）に貼り付けたらエラーで保存できないわけです。

これはアドセンスタグが貼り付けられないのではなく、アドセンスタグに使われている括弧記号などがHTMLエンティティ文字ではないために弾かれているということです。

HTMLエンティティ文字に変換すれば、記事中にAdSense Tagを貼り付けられます。

Google AdSenseタグをHTMLエンティティ文字に変換

これが通常のAdSense Tag。このままHTML編集画面から貼り付けたらエラーになります。

これをHTMLエンティティ文字に変換したのが次のコード。

ここでHTMLエンティティ文字に変換したのは、次の３種類の記号です。

左括弧 < → &lt;
右括弧 > → &gt;
引用符 " → &quot;

この３種類を変換すればBloggerのHTMLの中に自由に貼り付けることができますし、アドセンス広告が表示されます。

エンティティ文字に変換するとポリシー違反？

さて、アドセンスコードをHTMLエンティティ文字に変換することは、Google AdSenseプログラムポリシーに違反するかどうかが大変に気になります。

Blogcrowdsのフォーラムに「Google Adsense In Blogger Beta XML Update」というスレッドがあります。ここにアドセンスタグをHTMLエンティティ文字に変換したらプログラムポリシー違反になるかについてAdSenseチームからのひとつの回答が掲載されています。

AdSense Teamとの２回ほどのやり取り（再確認）で最終的には次のような結論に至ります。

And this is the answer

Second Email Response wrote:
Hi,
To clarify, while you are permitted to make minor edits in Blogger Beta, to allow the ad implementations to function properly, you are not permitted to alter the code for the purposes of changing size, font or hiding the Ads by Google logo.

Thanks for your understanding.
Sincerely,

The Google AdSense Team

Blogger Betaで若干の修正は認めます。但し、広告のサイズやフォントの変更、Ads by Googleのロゴを隠す目的でコードを変更することは許可されません。

Minor edits on Google Adsense Code for Blogger Beta/XML are allowed as long as the resulting Adsense Code generated by Blogger is exactly the same as given from Google Adsense Code Generator.

つまり、HTMLエンティティ文字変換されたアドセンスタグがWeb上に表示されたときに、ブラウザのメニューから「ソースを表示」してみます。そのソースに表記されているアドセンスタグと、管理ページで生成される広告コードとがまったく同じであれば問題は無いということです。

ここにご紹介したHTMLエンティティ文字変換をしてBloggerのHTMLに広告を貼り付けるという方法「単独」ではGoogle AdSenseプログラムポリシー違反には相当しませんのでご安心ください。もちろんタグを貼り付ける場所によってはプログラムポリシー違反になりますのでご注意ください。

Google Blogger 投稿記事の文字列を一括置換

2014-03-14T01:00:00.000+09:00

Google Blogger で管理している某ブログの記事内文字列を置換することになりました。

全記事に記述していた参照ドメインが変更になってしまったためです。

もちろん１記事ごとに編集し直せば良いのですが、記事数が多くてとても時間が掛かりそう。Wordspress のプラグイン Search Regex のようなツールは無いものかなと探したら、あっさり見つかりました。

オンラインで一括置換

Adam W. Lewis さんのサイトにある文字列一括置換ツールそれです。

手順はいたって簡単。サイトにある"Transfer me to Google so I can authorize this tool"というボタンをクリックして、Google Blogger でこのツールを認証しアクセスを許可します。

この認証は１回ぽっきりで消滅するようで使用の度に毎回認証が必要ですが、逆にずっと認証されたままではないので安心とも言えます。

[承認する]ボタンで認証すると、認証した Blogger アカウントで管理している Blogger ブログの一覧がドロップダウンリストに表示されます。ここから該当のブログを選択します。

Find のフィールドに置換元の文字列、Replace のフィールドに置換する文字列を入力して[Perform The Find & Replace]ボタンをクリックします。

私の環境では10秒前後で検索と置換が始まり、記事数に依ると思いますが 100記事前後であれば数十秒で一括置換完了です。

サイトの注意書きにもありますが、置換は元に戻すことができません。くれぐれも置換ミスのないように。
記事をひとつひとつ編集していたら相当時間が掛かったと思いますが、このツールを使うことであっという間に置換が完了し時間がセーブできました。このサイトはお勧めです。

Adam W. Lewis Blogger Find & Replace

PHP不要 Picasa ウェブアルバムで簡単に正方形サムネイルを作る方法

2014-02-10T17:37:00.000+09:00

Google Blogger に貼り付ける画像は Picasa ウェブアルバムで管理しています。画像を切り出したら Picasa にアップロードして画像URLを取得して貼り付ける。

このブログは記事の冒頭に縦横 250px の正方形のイメージ画像を貼り付け、HightSlide(ちょっと古い)でイメージ画像をクリックすると拡大表示されるようにしています。

HighSlide用に250px 正方形画像と、640px × 480px などの拡大用の２つの画像を常に切り出していましたが、その作業が実に無駄な作業だったということをつい最近になって初めて知りました。

正方形サムネイルを作る無駄な時間

例えば、125px × 125px のサムネイルを作ろうとしたとき、これまでは PhotoShop を起動して縦横 125px のレイヤーを作り、そこに大きな写真を貼り付けて、フリートランスフォームで 125px に収めるという作業。

少し前にひらめいたのは HighSlide のサイトに行って仮のギャラリーを作成し、そこにいちいち画像をアップロード。HighSlide が 120px のサムネイルを作ってくれますから、それを右クリックしてパソコンに保存。
それを Picasa ウェブアルバムに全部アップロードして、またまた右クリックして URLを取得し貼り付ける。これをサムネイルの数だけやっていました。

という作業が実に無駄であったということなので、そのやり方の解説はもちろん割愛いたします。

Picasaウェブアルバムの画像はサイズが自由に変更できる

悔しくて仕方がないのですが、Picasa にアップロードした画像のURLをチョコっと弄れば、画像のサイズ変更や回転など自由自在なんですね。

画像サイズ変更

s640/

正方形サムネイル

s150-c/

イメージの回転

s240-r90/

-r90

-r180（逆さま）

-r270

考えてみれば、Picasaウェブアルバムの表紙は正方形サムネイルでしたね。てっきり、JavaScript などで表示するときにだけサイズを変更したり、トリミングしてサムネイルのように見せていたりしているものだと早合点。パラメータだけでこんなに自由に画像が変更できるとは本当に便利です。

SPAM Blog の削除と Blogger アカウント停止

2014-02-07T18:38:00.000+09:00

昨日、Google の Blogger チームからメールを頂戴しました。

パソコンのタスクバーから Gmail を受け取ったときのポップアップが出まして。チラ見したら「削除した」というようなメッセージが。
ドキドキしながらメールを開くと、Blogger に作成していた複数のブログが SPAM 認定されて規定により削除されたとのこと。

その第一報に続き、削除を知らせるポップアップは無情にも５回ほど。合計5個の Blogger ブログが一気に削除された次第です。

削除された SAPM ブログの中身とは

一瞬にして削除された５つのブログは bTemplates などで配布されているテンプレートのカスタマイズ実験用のブログでした。デモ(Demo)だけだとイメージが湧かないので、好みのテンプレートを適用してみたダミーのブログ。

テンプレート名を独自ドメインのホスト名にしていました。showcaselight.blogger-customize-tips.com のように。

テンプレートを差し替えるのは結構手間がかかります。
特に bTemplates などで配布されている Blogger テンプレートは1バイトのアルファベットを基本としているから、日本語のような2バイト文字が入るとレイアウトが崩れたり、英語の表記を日本語に変えたり、年月日の表記を変えたりなど、適用してからの細かいカスタマイズがけっこう大変なのです。

だからと言って、ダミーのブログを作って、ブログの実データをインポートして、テンプレートを適用すれば、無限にスパムブログができてしまう。という意味では、Blogger チームに利用規約違反のスパムブログと言われても仕方ありません。

しかし、しかし・・・なんです。

ダミーブログは一般公開せず、Robots.txt でインデックスも回避

データが全く同じブログを本体合わせて６個も持っていたらスパムになるくらいは理解しているつもりだったので対策は講じていたのであります。

・公開設定は投稿者のみの限定公開
　自分だけしか閲覧できないように閲覧権限を制限
・Robots.txt で検索エンジンからのインデックスを回避
　ダミーブログ全体をインデックスさせないように記述

これでもダメだったでしょうか？

そしてBlogger アカウント停止へ

どんな状況になってんのか Blogger にサインイン。
Google アカウントのサインイン画面が開いたけど、見慣れたアバターの写真がビックリマークアイコンに変わってます。思いっきりイヤな予感

パスワードを入力してみる。本人確認のためにケータイ宛にSMSで認証番号を送りますと。
SMSで受け取った認証番号を入力。そして次の画面へ。

ない。。。

やっぱり Blogger アカウントが・・・ない。
スパムブログ削除と同時に停止されておりました。

何かの間違いじゃないのと思う人はここをクリックして送信してくださいというリンク先を開いてみたものの、メールアドレスを２回入力するフィールドがあるだけ。画面には陳情するコメントフィールドすらない。

つまり。
今回の場合、Blogger チームに閲覧制限だの Robots.txt だのの経緯を説明する機会すら与えられずに Blogger アカウントが停止されてしまったのであります。

各種 Googleサービスへの貯蔵物は要チェック！

以前、Picasa (Google+の画像)に置いてある自分の子供の写真が児童なんちゃらに引っかかって写真とアカウントが削除されたという話題がありましたよね。

Google ドライブとか Picasa とかデジカメ、ケータイ、スマホで撮影した写真を何気なく便利に貯蔵していますが、これ、ちゃんとチェックしたほうが良いのかもしれません。もちろん検証用に作った実データ入りのダミー Blogger ブログなど言語道断。
自分のみ閲覧可能で一般に公開されていなくても、Google先生がダメというものはダメなんですね。

ダミーのブログがSPAM認定されて削除されても痛くないのですが、同時に本体のブログが削除されたのが超痛い。
只今、バックアップデータから再構築中ですが、とっても時間が掛かっています。

無料で www なしドメインを Google Blogger ブログにリダイレクトする方法

2013-02-14T15:57:00.000+09:00

Google Blogger で www.example.com のようなカスタムドメインを利用するとき、www の無いいわゆる Naked Domain が Blogger ブログにリダイレクトされないことがあるというトラブル。

そこで、私の採った方法は、既に契約していたお名前.comレンタルサーバーに www なしのスペースを立ち上げて、そこから www ありの Blogger ブログへ 301 リダイレクトするという方法。

ただ、ドメインだけ取得してレンタルサーバは借りていないというブロガーも多いでしょうから、タイトルの通り「無料でリダイレクトする方法」をご紹介します。

無料で Naked Domain を転送してくれる wwwizer.com

wwwizer.com は、今まさに抱えている問題を無料で解決してくれる Web サービスです。

ホスト名をつけた www.example.com や blog.example.com などのサイトやブログに example.com という Naked Domain でアクセスされたときに、www や blog へ飛ばしてくれます。

設定はいたって簡単。
DNS でドメインの A レコードに wwwizer.com の IP アドレスを設定するだけです。

example.com A 174.129.25.170

従って、Google Blogger でカスタムドメインを利用するときに必要な DNS 全レコードは以下の通り。

example.com A 174.129.25.170 www.example.com CNAME ghs.google.com. abcdefg12345.example.com CNAME gv.domainverify.googlehosted.com

1行目は wwwizer.com のリダイレクト用 A レコードの IP アドレス。
2行目は Google Blogger ブログへのホスト名 www エイリアス。
3行目は Google Blogger がドメイン所有権を確認するためのエイリアス。最初のカスタムドメイン設定の際に表示されます。

この３つだけです。

Google Blogger のヘルプにある、例の4つの A レコード（216.239.32.21, 216.239.34.21....）は要らないのかと心配ですか？
要はこの4つの A レコードを外してあげることで、www なしの Naked Domain を別のサーバにポイントするわけです。だから、要りません。

Blogger にカスタムドメインを設定したとき、ドメイン全部を Google に割り当てていたイメージが逆転して、今回は wwwizer.com にドメイン全部を割り当てて www というホスト（つまり Blogger ブログ）だけを Google に割り当てるというイメージです。

実際に wwwizer.com で転送を検証

手持ちのドメインで Blogger ブログを wwwizer.com でリダイレクトしてみました。

結果は、まったく問題なく Working です。

自分のレジストラで DNS に上記の A レコードを追加した直後から www なしが www ありにリダイレクト。

実際に転送設定をしたブログは公開しますが、ドメインの登録情報が丸裸な状態です。
個人情報の変更をしていますので、Whois で個人情報が晒されないようになったらリンクを貼ります。

さて、特に問題はないのですが、なぜこのようなサービスを無料で提供しているのかが正直言って疑問。
裏があるのではないかと・・・

別のブログの話ですが、この wwwizer.com を設定する直前のこと。
海外の某ディレクトリサービスがハッカーに乗っ取られていたみたい。運営者本人かもしれないけど。

で、そのディレクトリサービスのリンクバナーを貼り付けていたことで、勝手にイスラム系のサイトにリダイレクトされていました。
偶然気が付きましたが。

そんな事件があった直後のことなので、悪く考えればリダイレクトするユーザをしこたま集めておいて、ある日、別のサイトへリダイレクトするように変更しちゃうとか、そんなことをされる可能性も否定できないと思うわけです。

とりあえず私は、どうでもいいドメインをテストで使ってみて動作確認はとりました。
この投稿を読んで wwwizer.com を使って Blogger 転送をしてみようという方は自己責任でお願いします。

サイトを見る限りでは、いい人たちのようですよ (笑

独自ドメインの Google Blogger で wwwなしのリダイレクト設定

2013-02-14T02:11:00.000+09:00

私はこのブログでカスタムドメインを割り当てて早１年、いわゆる Naked Domain と呼ばれるホスト名 wwwなしのドメイン転送を設定していませんでした。

ある意味、ここまで放置したのだから今更設定しなくたって別に支障はないのでは？
とも考えましたが、SEO 的に・・・
・・・アレなんじゃないかなと思って。

あわててドメインの転送設定しましたが、結構面倒臭いことがいっぱいです。
そこで、Google Blogger ブログでカスタムドメインを設定するときに必要な作業と、DNS などの具体的な設定方法を備忘録的にまとめてみました。

Google Blogger のカスタムドメイン設定のおさらい

そもそも Google Blogger にオリジナルのドメインを割り当てる場合、wwwなしの Naked Domain での運用ができません。トップレベルドメイン (www)もしくは、blog などのようなサブドメインを割り当てる必要があります。

割り当てるというのはドメイン管理で DNS を設定する作業です。
大まかに言えば www.blogger-customize-tips.com を Google (Blogger) へ、それ以外も全部 Google (Blogger) へホスティングしなさいというような設定。

blogger-customize-tips.com NS レジストラのプライマリDNS
blogger-customize-tips.com NS レジストラのセカンダリDNS
*.blogger-customize-tips.com A 216.239.32.21
*.blogger-customize-tips.com A 216.239.34.21
*.blogger-customize-tips.com A 216.239.36.21
*.blogger-customize-tips.com A 216.239.38.21
www.blogger-customize-tips.com CNAME ghs.google.com

上記の設定を解説します。
1,2行目はドメインを取得したレジストラの DNS を使いますという指定。
3～6行目は、ドメインの全てのホスト名（*:ワイルドカード）を Google Blogger で指定されている4つの IP アドレスに割り当てますよという設定。
7行目は、ホスト名が www というトップレベルドメインだったときは、ghs.google.com をターゲットにしますというエイリアス設定。

このドメイン側の設定ができたら DNS 情報の波及を待ち、Blogger 側でカスタムドメインの設定を行います。

管理画面の「設定」－「基本」ページの「公開」の項目を変更します。

ここで、www なしの Naked Domain を www ありのトップレベルドメインにリダイレクトするというチェックボックスがありますから、これをティックして保存。

場合によっては、ドメイン所有権の警告が出ますから、同じ画面に表示されるユニークなホスト名をドメイン管理側で DNS に追加。この確認はものの１，２分で完了です。
Google Blogger に戻り、再度、保存。

これらの作業が終了したら、Blogger ブログがカスタムドメインで公開されるという流れです。

DNS の波及時間の差はありますが、早ければ全行程20～30分くらいで公開に至ります（一般的には24時間から72時間と言われています）。

ところが、設定の中で www なしのカスタムドメインを www ありにリダイレクトするように指定しているにも関わらず、私の場合、一度としてリダイレクトが成功した例がありません。100%の確率でリダイレクトされないのであります。

www なしがリダイレクトされない問題

この www なしの Naked Domain でアクセスしたときに www ありのドメインにリダイレクトされないという問題はかなり報告されていて、このトラブル回避策も公開されていました。
Blogger Naked Domain Redirection Is Not Working

取得したドメインを Google Apps に追加して、Apps 側で www なしの Naked Domain を www ありのドメインに転送するように設定すれば 100% オッケー。

しかし、Google Apps の無料登録は既に2012年12月に終了しており、１ドメイン１年あたり6,000円前後支払うことになります。

ghs.google.com の IP アドレス 175.129.25.170 をドメイン設定で A レコードに追加したら標準のリダイレクト設定（上記の設定のこと）が有効になった。

これはやってみましたが、なぜか NG でした。

前提条件として www なし用のホスティングサーバが必要？

Google Apps を利用するという考え方は、結局、www なしの Naked Domain がターゲットとなる別のサーバを確保したということです。

この発想で、
・Google Blogger は www あり（Google Blogger の標準設定）
・別サーバに www なしを立ち上げ、www ありの Google Blogger に 301リダイレクト
というようにすれば良いわけです。

私はドメインをお名前.com、バリュードメイン、godaddy, Crazy Domainsの４社のレジストラで管理しています。
DNS の管理は、お名前.com、バリュードメイン、godaddy はそれぞれのレジストラ、Crazy Domains で取得したドメインだけはフリーの DNS サービス Dozens で管理しています。

各レジストラの DNS と、Dozens の DNS 、それからお名前.com で申し込んでいるお名前.comレンタルサーバーを使って、全ての Google Blogger ブログと Seesaa ブログを www なしの Naked Domain を www ありのドメインにリダイレクトするよう設定しました。
www はＡサーバで blog は Google Blogger、www なしはお名前.com という変則的なパターンなども。

長くなって煩雑なので、www ありへのリダイレクトの具体的な設定方法については次のように分類しています。
気になる項目があればチェックしてみてください。

お名前.com の共有レンタルサーバの設定（予定）
お名前.com の DNS 設定（予定）
バリュードメインの DNS 設定（予定）
godassy の DNS 設定（予定）
Dozens の DNS 設定（予定）
Google ウェブマスターツールで www ありなしの設定（予定）
無料で www なしドメインを www ありにリダイレクトするサービス

wwwizer.com という無料で www なしの Naked Domain に転送してくれるサービスを活用するという方法もあります。

ドメイン変更後に LinkWithin のリンク先を変更する方法

2012-12-10T16:10:00.001+09:00

先月中旬のことですが、.CO.CCドメインが消滅しました。

無料ドメインでしたから（私は少しばかり donation しましたが）、たくさん取得して Google Blogger の独自ドメインとして割り当てていた。

消滅した→新しいドメインに移行
この普及作業に追われている昨今であります。

Google Webmaster Tools や Analytics、Bing Webmaster Tools、ブログランキングやディレクトリなどなど。
ドメインがひとつぶっ飛んだだけで、まあやることが沢山あることあること。

時間を掛ければ何とかなる作業がほとんどですが、時間を掛けてもどうしても上手く変更されないものが、今のところひとつだけあります。

関連記事を表示してくれる無料のLinkWithinがそれです。

メイン変更後すぐにリンク先が変わるものと変わらないものがある

カスタムドメインとして.CO.CCドメインを割り当てていた無料ブログが結構な量あります。

この多くに LinkWithin を導入していますが、.CO.CCドメインから別ドメインに変更したほぼ直後に、LinkWithin のリンク先が新しいドメインに変わったブログもある。
約９割がこれに該当。

正確に言えば、ドメイン変更後に LinkWithin に行って、同じメールアドレスでURL(Blog Linkフィールド)だけ新しいドメインのURLに変更して、あとは同じ条件で再作成しました。
再作成と言っても、発行される linkWithin Site ID は同じです。
ある意味、「おまじない的」に、ドメインの変更を知らせたかったという、それだけの行為です。

残りの約１割なんですが、ドメイン変更後おまじないをしたにもかかわらず、徐々に切り替わっていきました。やっぱりおまじないだったんだなと確信した瞬間。

２，３日は掛かったでしょうか。
マダラに切り替わっていきました。
リンク先が旧ドメインの.CO.CCだったり、新ドメインだったり、隣り合うサムネイルのリンク先がバラバラという状態が続くわけです。

ほとんど、これでリンク先は変更されるんですけど、どうしても変更されないブログが残りましたし、変更作業を進める中で、これから出てくるかも。

リンク先が変更されない原因がわからないのですが、いずれにしても関連記事のリンク先が切れてるってかなりヤバイです。
ページビューを増やすために導入している LinkWithin がまるで逆効果。
関連記事をクリックしてさっさと出て行きやがれという、LinkWithout 状態なのであります。

どうも Google Blogger + .CO.CC の組み合わせが怪しい

ドメイン変更後の「おまじない」で新しいURLを入力しても LinkWithin の発行する Site ID は変更されません。実はこれが問題でして。
新しいドメインのFeedを読みに行ってリンク先も変更されるはずなんですが、いつまで経っても旧 .CO.CC しか読んでないみたい。

同じブログ（サイト）で別の Site ID さえ発行してもらえれば、受動的にFeed の更新を待つこともなく即効で反映できます。だって、こうしている間にもブログ訪問者はリンクの切れた LinkWithin をクリックしているのでありますから。

一応、試行錯誤でやってみたことを列挙してみますと・・・

Linkwithinでメールアドレス(Email)を変更して再申請
同じくPlatform を変更して再申請
同じくBlog Link (URL)に新ドメインを入力して再申請
同じくBlog Link (URL)にオリジナルの blogspot.comを入力して再申請
同じくBlog Link (URL)にオリジナルの blogspot.jpを入力して再申請
新しい記事を投稿（フィードを更新）
ping を打ちまくる
ブログのフィードをFeedBurnerに変更してみる
テンプレートの HEAD に link rel で max-results=500 とかRSSを書いてみたりする

登録項目の少なさから見る限り、LinkWithin に新しいドメインのフィードを読んで貰えさえすればリンク先は書き換わるはずなんですけど。
何をやっても発行される LinkWithin Site ID は同じ。一向に変化がありません。

「ブログが更新されている / されていない」はあまり関係ないみたいです。
Seesaa ブログで .CO.CC ドメインに割り当てて３年くらい更新していないブログ。これを新ドメインに割り当て直しましたが、直後にマダラ変更が始まり２，３日で切り替わってました。

どうしても、Google Blogger ＋ .CO.CC ドメインの組み合わせが臭い。

LinkWithin が Feed さえ読んでくれれば・・・Feed さえ読んでくれれば・・・・
じゃあ、Blog Link(URL) のところに Feed のアドレスを直接入力して読んで頂こう！

LinkWithin Site ID を変える方法

Blog Link のフィールドに新ドメイン入りの RSS Feedを入力しましたところ、見たことあるような無いような画面に誘導されました。

「入力した Blog Link に関連付けられた RSS Feed は見つかりません」

おお～っ！
これで .CO.CC ドメインのときのフィードと切り離すことができる！！
と、新しいドメインのフィードを入力して "Continue" ボタンを押下。

次の画面でリンクコードが表示された見慣れた画面。
発行された LinkWightin Site ID は新しいものに変更されています。

この新しい Site ID をブログのテンプレートにある旧.CO.CC の Site ID と差し替えて、テンプレートを更新。

表示されたブログ記事の LinkWithin サムネイルにマウスを乗せると・・・、
見事に新ドメインのリンク先に変更されました（Site ID が別だから当たり前だけど）。

ちなみに、上の RSS Feed が見つからないページですが、 URL は LinkWithin のトップと同じ "/learn" のまま。
直リンは無いみたいです。
Cookie で制御しているんでしょうが、今回のようなドメイン変更用のページを作ってくれれば悩まないのに。.CO.CCドメインの後処理に苦しんでいるブロガーは沢山いると思うんですよね。まあ、.CO.CCドメインみたいに消えてなくなるってことが異常事態ですから、イレギュラーであることは間違いありませんが。

Google Blogger でも Platform は Other が Better

私が LinkWithin を使うとき、Platform は "Other" を選択するようにしています。Google Blogger であっても。

"Blogger" を選択すると、Widget の画面に飛んで、変なところに Widget(コード)を挿入され、トップ画面に表示される全部の記事に LinkWithin が表示されて鬱陶しく、挿入位置のカスタマイズもやりにくい（参考記事）。

コードで取ってきたほうが柔軟な気がしますが、LinkWithinファンのみなさんはいかがでしょうか？

もし、LinkWithin のリンク先が変更できなかったら、nrelate というサービスが人気ありそうなので、そちらに切り替えようかなと考えていました。
まだ、使っていませんが興味のある方は、お試しの上、是非、感想をお聞かせください。

» Install Related Content Plugin | nrelate

Google Bloggerブログを99%元通りに復元するためのバックアップ方法

2012-06-20T16:23:00.000+09:00

Google Bloggerのテンプレートとデータをバックアップしても、ブログを完全に復元できるわけではないという話題です。

まず、Google Bloggerには、投稿記事、スタティックページ、コメントなどのデータ部分でひとつ、使用しているテンプレートのデータ部分でひとつ、合計２つの XML ファイルでバックアップができるエクスポート機能と、復元のためのインポート機能があります。

Blogger テンプレートをカスタマイズするときには、念のために必ずバックアップを取りましょうと謳ってますし、カスタマイズ以外でも万一のブログ破損に備えて、定期的にバックアップをとられているユーザーは多いと思います。

もし、バックアップデータからブログが復元できないケースがあるとしたらどうしますか？
Google Blogger の提供するエクスポート機能で吐き出した XMLデータでブログが完全に復元できるかというと、実は復元できないケースがありまして、言われた通りにバックアップしておいたのに、復元してみたら元に戻らない。そうすると復元に相当な時間を費やすか、諦めるかのどちらかということになりかねません。

一方、完璧なバックアップデータがあれば多くはコピペで戻せます。どんな状況になっても、大切なブログを完全復元できるように、必要なデータはすべて退避しておかなければ。

■ テンプレートを差し替えて再びオリジナルに戻してみると・・・

最初に安心材料として、Google Blogger で準備されているエクスポート機能とインポート機能を使えば大抵の場合、ブログを完全に復元することができるという例を紹介します。

オリジナルのＡというテンプレートから別のＢというテンプレートに変更たとします。

テンプレートを変更してみたものの・・・
・ちょっと想定していたイメージと違う。
・実際に適用してみたら使い勝手が悪い。
・細かいところでカスタマイズする箇所が多すぎてお手上げ（このパターンが意外と多い）。
などなど、いろいろな理由があると思いますが、やっぱりそれまで使っていたオリジナルのＡテンプレートに戻したい。

この場合は、BloggerのバックアップツールでバックアップしておいたＡテンプレートのXMLファイル（例えば template-21820324368757xxxx.xml）でアップデートすれば元通り。

実際に、①このブログのダミーブログを作成、②別のテンプレートで置き換え、③バックアップしておいたテンプレートXMLファイルで書き戻し、というプロセスを経たライブデモを紹介します。

bTemplates にある"Magazeen"というテンプレートを適用しました。

» bTemplatesのMagazeenテンプレートを適用したときのトップページ画像

更に、バックアップしたテンプレートXMLバックアップデータで元に戻したのが下のリンクのライブデモです。
» MagazeenからオリジナルのテンプレートXMLデータで元に戻したBlogger Customize Tips ダミー (http://dummy.blogger-customize-tips.com/)

たぶん完璧に元通り。
見ていただいた通り、ダミーブログのサイドバーの並び方がオリジナルと異なるのは、Magazeen テンプレートを適用したときにウィジェットを並び替えたからです（並び替えないと使用に耐えない状況だったので）。読者のガジェット（ウィジェット）はもともと他のＩＤのブログでは取れませんからダミーを作った時点でエラーですし、人気の記事ウィジェットはページビューで決まりますからオリジナルと違うのは当然。

こうやって見るとオリジナルから別テンプレートを適用、再度オリジナルテンプレートXMLデータで書き戻したときには、問題なく元通りになるということです（もちろん適用後に何もいじらなければという前提です）。

■ こんなケースでは Blogspotブログを完全復元できない

上記のケースはあくまでもオリジナルのブログが残っていることが大前提です。

例えば、以下のようなケースではエクスポートしたテンプレートのXMLデータで100%の復元はできません。
・bx-xxxxxx のようなエラーメッセージが出てカスタマイズできなくなった。
・テンプレートが壊れた。
・ブログが削除されてしまった。
・Google が Bloggerブログサービスをやめてしまった（んなこたぁ無い）。

要するに何らかの事情でオリジナルのブログが残っていないか、アクセスできなくなったケースです。

また、こういったケースも想定できます。
テンプレートの差し替えをしたいけれども一発でキマるか分からない。失敗するかもしれない。カスタマイズにも時間が掛かるかもしれない。元に戻らなかったらどうしよう。
だから公開中のブログのテンプレートではなく、予備のダミーブログでテストをして動作を確認してからオリジナルのブログに適用したい。

テンプレートの差し替えに踏み切れない理由は、失敗したときのリスクが取れないからですよね。記事数もたっぷり、そこそこアクセスもあるなんていうブログなら特に。

これは、おっかないから実データの入った別のテンプレート検証用ダミーブログを作りたいというケース。

別の記事で書きますが、Bloggerテンプレートの差し替えで（Gallery系のテンプレートなどは特に）、想定していた結果が得られるということは100%ありません。そもそも海外で開発されているテンプレートですから、日本語の環境（２バイト文字、日付表示などなど）を想定していないというものが多い。レイアウトがグチャグチャになってしまったりする。
Seesaaブログとか、FC2ブログの場合は、結構キレイにテンプレートの差し替えができるのですが、Bloggerって簡単じゃないんですよねぇ・・・

完全復元できないパターンは、かなりレアケースかもしれません。が、そもそもバックアップデータでブログを復元しなくてはいけないこと自体が緊急時のレアケースです。そんなときだからこそ、バックアップデータに頼るのですから、それが使えないというのではバックアップの意味がありません。

■ Blogspotブログを99%復元するためのバックアップデータ

オリジナルのブログが残っていないという状況はあまり考えられないといえばその通りです。
でも私はこれまで Bloggerブログをいくつか削除されたことがあります。ある日突然、『お探しのブログは存在しません。ただし、「 (削除されたブログ名) 」という名前は登録できます。』などと表示されて背筋が凍る。削除対象となったのが特定の記事だと分かれば、その記事を除いて新しいブログとして復元させたいこともある。

Google Group で見たことがあるのですが、エラーで管理画面が開かなくなってしまったというケースもある。Google カウントが停止されているわけでもないのに、なぜか Blogger の管理画面がエラーで開かない。

GoogleがBloggerブログをやめてしまうということはまず無いと信じていますが、無料サービスですからサービスが停止したところで誰も文句は言えません（この場合は、別ブログのサービスに引越しになりますが）。

こういったケースだとまったく新規のブログをゼロから作り直しになるわけです。
そのときに、投稿記事のXMLデータとテンプレートのXMLデータの他に、ウィジェットの生ソースなどが必要になります。新しく作成したBloggerブログに別のテンプレートXMLデータを適応したときは、冒頭の画像のように HTML/JavaScript ウィジェットなどの中身は空っぽになってしまうからです。
つまり、ブログを完全に復元するためには・・・

投稿記事のXMLデータ
管理画面（以下同）の「設定－その他」から「ブログツール－ブログをエクスポート」
テンプレートのXMLデータ
「テンプレート－[バックアップ/復元]ボタン」から[テンプレートをすべてダウンロード]ボタン
HTMLの生ソース
「テンプレート－[HTMLの編集]ボタン－[続行]ボタン」「ウィジェットのテンプレートを展開」のチェックボックスをティックした状態で得られるHTMLすべて
HTML/JavaScriptウィジェットの生ソース
「レイアウト」から追加した「HTML/JavaScript」ウィジェットの中身
フィードウィジェットで追加したRSS情報
「レイアウト」から追加した「フィード」ウィジェットのフィードURL
独自のrobots.txtや独自のrobotsヘッダータグ
「検索設定」で有効にした robots.txt関連ソース

上記の６種類のバックデータがあれば、オリジナルのブログを99%は復元できると思います。

前述の通り、１の投稿データXMLと２のテンプレートXMLは、オリジナルのブログが残っているときに有効ですが、別のブログとして復元するには半分くらいしか役に立ちません。

３のHTMLソースは別ブログでの復元時に参照するためのものです。別ブログ＝別テンプレートですから、オリジナルのHTMLに追加していた記述は全て消えてなくなるということです。AddthisとかAddClipsとか、LinkWithinや Google AdSense、それから Google Analytics や bing Webmaster Tool、アクセス解析などトラッキングのためのソースがこれにあたります。

１，２では復元してくれず、欠落してしまうウィジェット関連で復元に手間が掛かりそうなのが、４のHTML/JavaScriptウィジェットの生ソース。
ブログツールなど、気の利いたカスタマイズはこのウィジェットに貼り付けていますから、これが消失すると復元に時間が掛かりすぎますし、最悪の場合、ソースが見つからないので復元不可能ということも考えられます。

５のフィードウィジェットも復元できません。RSSフィードの一覧はメモ帳などにコピーしてバックアップしておくようにします。
余談ですが私は RSSフィードを追加するときには、複数のRSSフィードをYahoo! Pipesでひとつにまとめてから追加するようにしています。そのほうが管理が楽です。

Bloggerで検索設定機能が追加されてから、独自の robots.txt を記述することができるようになりました。有効にしているときには、robots.txtの中身もメモ帳にコピーして保存し、復元に備えます。

恐らく、これだけのデータをバックアップしておけば、ブログが消失するようなことがあっても時間を掛けずに99%は復元できるはずです。

時間と労力をかけたお気に入りのカスタマイズ部分に限って、Google Bloggerのバックアップツールではバックアップされない。だから、別途バックアップしておく必要がありますよということです。

■ ところで残された１％とは・・・

ここまで書いておきながら今更ですが、Google Blogger は残念ながら100%の復元は出来ません。最大の問題は、記事のURL（パーマリンク）が復元できないということ。
致命的です。

詳しくは、Kuriboさんのこちらの記事に紹介されていますが、Bloggerの仕様でインポートしたデータに同じパーマリンクを割り当てることができないようです。

既に運用しているブログであれば外部リンクがありますから、データインポートでパーマリンクが変わってしまったらリンクが全てDead。リンクしてくれた先方のサイトにもリンク切れで迷惑が掛かってしまいます。

ただ、Bloggerで同じURLを再利用する方法は存在します。実際に同じURLで完全復元したBlogspotブログを持っていますので間違いありませんが、いったん削除されたBloggerブログだということと、同じURLを再利用するまでに数ヶ月も待たないといけないので現実的ではないです。

念のために上記の６種類に加えてもうひとつ。
同じURLで書き戻すための「７．すべての記事のURL」があれば。
しかし、実際にはバックアップは取れても、はやり100%復元するには時間と労力が必要なようです。

Bloggerブログからエクスポートした投稿データXMLファイルをインポートするときの注意点

2012-06-18T16:27:00.000+09:00

Bloggerブログのツールからエクスポートした投稿記事のXMLファイルは、Bloggerの別ブログにインポートする際、ちょっと加工が必要かもしれません。

■ 追記のページ区切り  が変換されている・・・

Blogger ブログで投稿記事をHTML形式で書いているとき、本文と追記をページ区切りの表記は 。

最近、色々なテンプレートを試すために、このブログのクローンブログをたくさん作っています。そのため、空のブログを作って、このブログからエクスポートしたテンプレートXMLを適用、さらにエクスポートしたデータのXMLをインポートするという作業をしています。

そこで、初めて気が付いたんですが、この追記区切りのは、エクスポートされたXMLファイルでは別のものに変換されているんですね。

<a name='more'></a>

more というアンカーになってしまっている。

つまり、エクスポートした投稿記事のデータXMLをそのままインポートすると、ページ区切りがなくなって全文表示になっちゃうわけです。

インポートする新しいBloggerブログで、従来どおりの追記の区切りを入れたいときには、インポートする前にテキストエディターで置換しておかないといけないということですね。

検索フレーズ <a name='more'></a> 置換フレーズ

ちなみに、この記事でコードを表記するにあたり、< や > をそのまま　< や > と表示させたかったんだけど、どうしても　< や > に変換されてしまう。
どうやったら、< や > と表示できるの悩んで調べていたら、やり方が見つかりました。
<や>をそのまま文字として表示する方法

それぞれ、&lt; 、 &gt;と記述すればよかったんですね。
ありがとうございました。

Googleの検索結果にプロフィールを表示させる方法とエラー回避

2012-06-07T16:32:00.000+09:00

Googleの検索結果に最近よく投稿者のプロフィール写真（アバター）をが表示されているのを見かけませんか？

しかもそれが妙に目立つわけです。
数センチ角の小さなアバターと投稿者の名前の表示なのに、それだけで記事になにか信憑性があるようで、その記事を思わずクリックしてしまう。

どうやったら表示されるのかとずっと気に掛けていたところ、ある日、別件の meta description について調べていたら、たまたまGoogleの検索結果に著者情報を表示する方法が先に見つかってしまったのでさっそく設定してみました。

この設定自体は特に難しくないのですが、異なる Blogger テンプレートを使った複数のブログに設定していくうちに、どうもエラーが発生するテンプレートがあることを確認。ついでに発生したエラーとその回避方法についても解説してみます。

Google検索結果にプロフィール情報を表示する

まずは必要な条件から。
・Google＋のアカウント（無ければ新規作成）
・ブログからGoogle＋のプロフィール(author情報)への発リンク
・Google＋のプロフィールへ自分のサイトやブログを追加

おおまかには以上の３点です。
自分のサイトやブログとGoogle＋のプロフィールを相互認証させることで、サイトやブログの著者（author）であることを証明し、結果、それが Googleの検索結果上に著者として表示される、といった流れになるようです。

Google＋のアカウント

Google＋のアカウントがないと設定できないので、お持ちで無い方はアカウントを取得してください。Google Bloggerのアカウントを取得済みであれば簡単に追加できます。

Google＋のアカウントでは下記のようなプロファイル個別ID（赤字部分）が必要になります。

https://plus.google.com/u/0/115355787304425078017/about/

ブログからGoogle＋のプロフィール(author情報)への発リンク

自分のGoogle＋アカウントのプロフィールページへ自分のサイトやブログからリンクを出します。以下はGoogle Webmasters Toolsヘルプ（オプション２）に記載されている記述形式です。

<a href="Google＋プロフィールURL?rel=author">Google</a>

実際の表記はこの通り。

<a href="https://plus.google.com/115355787304425078017?rel=author">Google</a>

このコードを投稿記事すべてに貼り付けて・・・と解説されていることもありますが、ブログプラットフォームであればHTMLテンプレートのどこかに記述していれば全投稿記事、スタティックページのいずれにも反映されますから、テンプレートのFooter部分にでも貼り付けておけばよいと思います。

また、前述のウェブマスターツールヘルプからそのままコピーすると?rel=author の？マークの前に半角スペースが入っています。ヘルプのレイアウト上、インデントとして挿入したものだと思われますのでこのスペースは不要です。

ちなみに、下記の記述方法で解説されているものもあります。この表記方法でも検証しましたが問題なく認証されます。

<a href="https://plus.google.com/115355787304425078017" rel="author">Google</a>

ここでアンカーテキストはGoogleとなっていますが、Google＋、Google＋プロフィール、About Me、著者情報、自分の名前など、自分のGoogle＋プロフィールページに誘導するテキストであれば別に何でも良いと思います。

Google＋のプロフィールへ自分のサイトやブログを追加

Google＋プロフィールページの「基本情報」に上記のリンクを張ったブログやサイトを追加します。分かりやすく言うなら相互リンクですね。
基本情報の一番下のほうにある「投稿先」をクリックして、ブログやサイトのタイトル、URLを登録しておきます。

投稿先にブログを登録する際に注意しなくてはいけないのが「公開範囲」の選択。一般公開のまま変更しないほうが良いみたいです。

以上の手順で、自分のGoogle＋とブログやサイトは相互認証され、Google 検索結果にプロフィール写真や著者情報が表示される準備が整いました。

Rich Snippets Testing Tool (Beta)で確認

ウェブマスターツールにあるリッチスニペットテストツールで設定状況を確認します。

上図のように確認するブログやサイトのURLを入力して[Preview]ボタンをクリックします。

図のように "Verified: Authorship markup is verified for this page."表示されていたら設定は完了です。

Warning: At least one field must be set for HatomFeed の回避方法

設定は完了しましたが、前述の通り Blogger テンプレートによっては、もしくはカスタマイズ状況によっては、"At least one field must be set for HatomFeed"というエラーメッセージ（警告）が表示されることがあります。
このエラーは以下のようにHTMLを修正すれば回避できます。

管理画面から「テンプレート」－「HTMLの編集」－[続行]と進み、「ウィジェットのテンプレートを展開」をティックしてHTMLを開きます。
テキスト検索で<div class='blog-posts hfeed'> を探し hfeed の部分を削除します。
修正前：<div class='blog-posts hfeed'>
修正後：<div class='blog-posts'>

※この<div class='blog-posts hfeed'>は１箇所ではありません。テンプレートによっては３箇所記述されているものもありました。必ずすべてを検索してhfeedの部分を削除してください。

同様に <div class='post hentry uncustomized-post-template'> を探し hentry の部分を削除します。
修正前：<div class='post hentry uncustomized-post-template'>
修正後：<div class='post uncustomized-post-template'>

HTMLの修正が完了したら[テンプレートを保存]します。再度、リッチスニペットテストツールで確認してみましょう。"At least one field must be set for HatomFeed"のエラーは回避されているはずです。

もし、Warning: Missing required field "Updated" という別の警告が表示されたときは、複数個所に記述されている <div class='blog-posts hfeed'> のいずれかにまだ hfeed が残ってしまっているはずです。再度、HTMLを編集し、該当する hfeed を削除してみてください。

このブログで設定してからまだ２，３日しか経過していませんので、設定後どのくらいで検索結果にプロフィールが登場するのか分かりませんし、著名人のプロフィールしか見たことないし、一般ピープルが対象になるのかも分かりません。
また、この検索結果プロフィール表示については、あまり評判がよろしくはないようですから、設定したほうが良いですよとはいえません。

ただ、もし表示されるようになったとしたら、どのような変化があるのか楽しみではあります。当たればラッキー程度の宝くじ購入に近い感覚で設定してみました。

ギャラリー形式のBlogger テンプレートに LinkWithin を導入する

2012-05-02T04:03:00.003+09:00

ここ２年くらいですか、Google Blogger テンプレートにもマルチメディア対応のもの、要は動画や写真をギャラリー形式で表示するタイプが増えていますね。

私もギャラリー形式のBloggerテンプレートを使わせてもらっています。特にAccrebilityはお気に入り。

こういったギャラリー形式のテンプレートはそれだけでなんだかプロっぽい。内容は別として（笑
でも構造が複雑というか、既存のサービスやツール（例えば、Linkwithin や Addthis など）を導入するのがチョット面倒だなぁとずっと考えてました。

しかし、これは私の単なる勘違い。というかスキル不足。
なんですが、ギャラリー形式のBloggerテンプレートはHTMLが複雑なのでツールを導入するのが分かりにくいことは確かです。そこで、備忘録も兼ねてポイントを整理してみました。

個別記事を開いたときだけLinkWithinを表示させたい

Google BloggerにLinkWithinを導入するとき、LinkWithinコード取得画面でプラットフォームに"Blogger"を選択し、それから指示に従いウィジェットを作るという流れになります。

でもそうすると簡単に導入はできるんですが、LinkWithinを個別記事のみに表示したり、任意の場所に配置することができない。トップページ（indexページ）に表示されるすべての記事にLinkWithin（のサムネイル）が表示されるのでうっとうしい。

だからLinkWithin のウィジェットを作成するとき、Google Bloggerであっても選択するブログプラットフォームは "Other" にしてコードを直接取得しておいたほうがカスタマイズがしやすいですね。LinkWithinで作られたウィジェット全体を非表示にするというのは少々面倒くさいカスタマイズになりますから。

それだったら、①"other"を選択し、②作成されたLinkWithinのスクリプト本体をHTMLにコピペ、③それを非表示の分岐式で挟み込むほうがラクということになりますね。

こうやって取得したコードに個別記事を開いたときだけに表示させるための条件式を追加します（赤色の行）。

<b:if cond='data:blog.pageType == "item"'> <script>var linkwithin_site_id = 固有ID;</script> <script src="http://www.linkwithin.com/widget.js"></script> <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a> </b:if>

初期値の"You may also like:"をオリジナルの見出しに変更したいときは更に一行追加します（青色の行）。

<b:if cond='data:blog.pageType == "item"'> <script>linkwithin_text='関連記事';</script> <script>var linkwithin_site_id = 固有ID;</script> <script src="http://www.linkwithin.com/widget.js"></script> <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a> </b:if>

※固有IDはLinkWithinで取得した７桁のIDに差し替えます。
※関連記事という表記をオリジナルの見出しに変更します。

これをHTMLの最後から２行目にある</body>の直前に貼り付ければ、トップページ（indexページ）では表示せず記事を開いたときだけ表示されます。

記事中の任意の箇所に表示させる

これでLinkWithinは導入できますが、「記事中の任意の箇所に表示する」ことは実現できていない。そこで、Linkwithinサムネイルの表示箇所を指定するためのコードを１行追加します（赤色の行）。

<b:if cond='data:blog.pageType == "item"'> <div class="linkwithin_div"></div> <script>linkwithin_text='関連記事'</script> <script>var linkwithin_site_id = 固有ID;</script> <script src="http://www.linkwithin.com/widget.js"></script> <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a> </b:if>

先ほどと同様に</body>の直上に貼り付けたらブログの最下段に表示されてしまうので、コードひと塊ごと引っ越しです。

表示したい箇所は記事本体の一番下。（注：結果から言えば最初の手順通りに導入しても以下の手順で導入しても、表示される位置は大差ないので、意味の無い作業になりますが・・・）

HTMLの編集画面を開き、次の記述を検索します。

この記述の直上に先ほどのコードを貼り付けます。

以上でLinkWithinを①個別記事が表示されたときだけ、②記事中の任意の箇所に表示することができます。

最初からこの手順で導入しておけばよかったのに・・・

勘違いはLinkwithinの枠線が見切れることから始まった

ギャラリー形式のBloggerテンプレートは特殊だからLinkWithinの導入も面倒だと勘違いしてしまったのは、この基本的なステップを踏まなかったからでした。どうやったかというと・・・

見出しレベルをオリジナル（関連記事）にするための１行を追加したコードを</body>の直上に貼り付け。（非表示の条件式なし）

次に任意の箇所に表示させるための追加コードを条件式付きで作成。

<b:if cond='data:blog.pageType == "item"'> <div class='linkwithin_div'/></div> </b:if>

これを<div class='post-footer'>の直上に貼り付け。

LinkWithinの表示箇所を指定するコードが個別記事以外では非表示になるわけですから、これで良いはず。
ところが、結果はトップページ（indexページ）で下図のようにLinkWithinサムネイルの罫線が見切れてしまっているわけです。

ギャラリー形式は表示がスクリプトによって制御されているため、記事と追記を区切るためのを使いません。これで区切るとトップページ（indexページ）のギャラリーに本文テキストが表示されなくなってしまうBloggerテンプレートもある。

きっとコレが原因に違いない。

一般的なテンプレートなら記事をで区切れば、本文と追記に別れます。そして追記部分はトップページ（indexページ）でHTMLに記述されない。ギャラリー形式はで区切れないから追記部分が表示され、一緒にLinkWithinが表示されてしまうんだ・・・と。
ああ、なんてギャラリー形式のテンプレートは使いにくいんだ。

ま、すべてが勘違いでした。ギャラリー形式テンプレートよゴメンナサイ。非表示のための条件式は表示場所を特定するコード側ではなく、LinkWithinのスクリプト本体だったんですね。

基本通りの手順で導入していれば良かったものをたったコレだけのことで物凄く無駄な時間を使ってしまいました。反省。

Google Bloggerのフィードオプション orderby=updated で記事数を500件

2012-04-25T09:54:00.001+09:00

Google Blogger にはフィードの記述方法が何パターンかあります。

そして記入する場面には・・・

Google ウェブマスターツールにサイトマップを指定するとき、ブログランキングやブログディレクトリにブログのフィードを指定するとき、GoogleのFeedburner の設定でブログのフィードを指定するときなどなど。

みなさんは、Google Blogger のフィードを指定するとき、どのように記述していますか？
私は "feeds/posts/default?orderby=updated" というオプションを付加する方法が最近気になっています。

Google Bloggerのフィード記述形式

Google Blogger のフィードにはいくつか記述パターンがありますが、基本的なパターンは以下のものです。

http://ブログのURL/feeds/posts/default
http://ブログのURL/atom.xml

"http://ブログのURL/atom.xml" にはさらにオプションがあります。

http://ブログのURL/atom.xml/atom.xml?redirect=false&max-results=500

"?redirect=false&max-results=500" というのは、500記事までをフィードに表示してくださいというオプション。
Google ウェブマスターツールなどにサイトマップとして登録するときには、なるべく多くの投稿をインデックスしてもらうために、このオプションをつける記述方法は多くの方々が実践していると思います。

これまで私はGoogle BloggerブログすべてのFeedはこれで記述していましたし、別途 Googleのフィードバーナーにリダイレクトしているブログの場合は、FeedBurner で参照するフィードにこれを記述していました。

feeds/posts/default?orderby=updated というオプション

前述の atom ではなく、feeds/posts/default を使うとき、オプションで"?orderby=updated"という記述方法があることを最近知りました。

http://ブログのURL/feeds/posts/default?orderby=updated

この"?orderby=updated"というのは文字通り、フィード上の記事をアップデートした順番に表示してくださいというオプションです。

?orderby=updated オプションを使うと具体的に何が変わるのか？

/atom.xml と /feeds/posts/default は基本的に同じ表示になるので、ここでは ?orderby-updated というオプションが使える /feeds/posts/default で、このオプションを付けたときと付けなかったときの違いを比較してみます。

?orderby=updated オプションを付けなかった場合
・記事を投稿した順番にフィード上に表示されます。

?orderby=updated オプションを付けた場合
・記事を更新した順番にフィード上に表示されます。

ただ、それだけの違いでスミマセン・・・

それだけの違いなんですが・・・・記事を加筆・修正した場合にちょっとした違いが出てくるのではないかなと。

例えば、PING を打った場合。
PINGはFeedを読んで更新があればPINGを通すし、更新が無ければ素通りする。
もし、フィードが"/feeds/posts/default"で投稿順に並んでいたら、PINGは素通り。"/feeds/posts/default?orderby=updated"で更新順に並んでいたら、PINGは通りPINGサーバにインデックスされる。
ということになるのではないかと思うのです。

?orderby=updatedオプションのデメリットとメリット

「メリットとデメリット」と書きたかったんですが、メリットが・・・ちょっと思い浮かばなくて・・・デメリットが先に来てしまいました。

?orderby=updatedオプションを付加すると、加筆・修正をした記事がフィード上位に上がってきますから、上記のようにPINGサーバに更新を伝えるという側面では有効ではないかと推測します。しかし、ブログランキングやFeedBurnerの「フォード・メールマガジン」でこれをやったらどうなりましょうか？

ブログランキングでは「これ前に読んだことあるよ…」という記事が最新記事一覧の一番上に表示されるとか、フィード・メールマガジンでも同様に以前に配信された記事がまた送信されてくる。
なんてことになるのではないかと。これでもかとばかりに・・・クドいぞ。

メリットなんですが・・・
PINGサーバ対策だけしかないですかねぇ。
フィードのなかに出てこなくなった古い記事を加筆・修正したとき、このオプションを付けていなかったら自分でソーシャルにでも再投稿しない限りは誰も気が付かない。人知れず加筆・修正したことになってしまう。

でもこのオプションを付けていればPINGサーバに拾われる可能性がある（もちろんPINGを打てばの話ですが）。
メリットはこれくらいですか。

そういった意味では、PINGサーバに送るFeedにはこのオプションをつけて、「人」が対象になる場面ではオプションはつけないほうが良いのかな？
ちなみに、?orderby=updatedオプションだと、Google Blogger記事のラベルを１つ修正しただけでも、フィードの上位に上がってきます。

Google Blogger 独自のrobots.txt 変更でラベルはインデックスされやすくなりますか

2012-04-03T05:53:00.002+09:00

Google Blogger の管理画面に突如、「検索設定」という項目が現れていました。

中身をみてみると・・・

メタタグ－説明：meta description が書き込めるらしい
エラーとリダイレクト：ページが見つかりません404エラーを回避できるらしい
クローラとインデックス：robots.txtが編集できるらしい

Google Bloggerのrobots.txtでは、/search ディレクトリが初期値で disallow に設定されている。これを編集して /search ディレクトリも allow にできるということでしょうか。
チャレンジャーなので、このブログの Robots.txt を編集してみました。

Blogger Robots.txt 編集の主旨とは

検索してみると Google のヘルプに「独自の robots.txt」という項目がアップされたのは、2012年3月29日、英語版のヘルプには同3月22日だから最近の話。

ヘルプを読んで見ると、このrobots.txt編集を可能にしたのは「クローラによるアクセスを許可させる（allow）というよりも許可させない（disallow）」ことが主旨のようです。

前述の通り、Google Blogger 初期値のrobots.txt は何故か /search が検索されないように設定されているので、構造的には下位にある /search/label ディレクトリがインデックスされにくくなっているのかもしれない。

FC2 や Seesaa などの無料ブログサービスでは、タグ（Google Blogger のラベル相当）がすぐにインデックスされて、エントリー記事よりもタグが先にインデックスされたり、タグのほうが検索の上位にいたりすることも。もちろん、ブログサービスを提供するプロバイダのポータル的な意味合いでタグのほうがぶら下がっている記事数が圧倒的に多い、だからインデックスされやすいという事情もあると思いますが。

いずれにしても、インデックスされているタグが検索にヒットしてブログに訪問していただけるというケースもあるわけです。

Blogger のラベルはちゃんとインデックスされている

Robots.txt で /search ディレクトリが disallow となっているからといって、Google Blogger のラベルがインデックスされていないかというと、インデックスされています。このブログのラベルもひとつひとつ確認してみましたが、全てインデックスされている。なので、robots.txt で /search を allow にする、というか disallow の該当行を削除してしまうことに意味があるかどうかは、まったくもって不明です。

あまり意味はないと思われますし、やもするとインデックスからこのブログが全てぶっ飛ぶという危険はありますが、やっちゃいました。robots.txtの変更。
男の子であります。

Blogger の Robots.txt 編集作業

さて下記がBloggerデフォルトの robots.txt

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.blogger-customize-tips.com/feeds/posts/default?orderby=updated

改めて見てみると可哀想に178ページもインデックスしないようになっています。
ここから赤い文字の部分、ラベルをクロールしない行を削除して、そのまま設定に貼り付けときました。

いまのところ、前回クローラが巡回したのは16時間前で、robots.txt を更新してからは来ていないので結果待ちです。

暫くすれば結果がでると思いますし、ブロガーの皆さんからの情報が集まってくるはずですので、良い子の皆さんはまだ真似をしなほうがよろしいかと思います。

この実験によりインデックスが消滅し検索エンジンから存在が消える前に、ブックマークもしくはFeedのリーダー追加をおすすめしますLOL

エントリー投稿直後に表示されるGoogle＋共有を非表示に

2012-03-27T03:39:00.001+09:00

知りませんでした。。。

ずーっと不便だ不便だと思いながらも、新しい投稿をする、編集をして再投稿する、その都度、Google+で共有するのボックスを閉じていました。

何か裏技的にこのGoogle+共有ボックスを表示させないスクリプトがあるに違いない。絶対に見つけ出して表示させないようにしてやると。

Google Bloggerのヘルプを見たり、グループのＱ＆Ａを探したり。
アカウントにGoogle＋を追加するとブロガー投稿後に共有ボックスが表示されるというところまでは見つけたけど、非表示のやり方が書いてない。

これ、管理画面に設定があったんですね！

管理画面のメニュー⇒「投稿とコメント」⇒「Google+ に共有」を [いいえ] にする。

最も厄介だったのはプレビューボタンを押下したとき。
いちいちGoogle+で共有ダイアログが出て来るから、毎回毎回閉じないといけない。

これでスッキリ！

基本設定から非表示にできるんだから、わざわざ記事にするブロガーは多くなかった思われ、それ故にググっても出てこないわけだ。
記事を書いた直後には[更新]ボタンをクリックしてくださいと説明するようなもの。

いやぁ、設定変更後の今、めちゃくちゃ快適です。

しかし、自分のブログの投稿画面にGoogle+で共有するダイアログボックスを表示させるというのは、一体どういったコンセプトなんでしょうか？
Blogger のアカウントも Google+のアカウントも同一だから、共有されるのは自分自身以外の何者でもない。
零細ブログは誰も共有してくれないから、せめて自分くらいは共有したら？・・・という意味？

投稿したら自作自演で共有しましょうってことなんでしょうか。

いまいち投稿後のGoogle+共有の意図が理解できないでおります。

BLOGSPOT.JPへの国別URLリダイレクトを無効にする方法

2012-03-18T06:28:00.001+09:00

blogspot.jp へ転送されたことにより、クイック編集アイコンが消え、Google Blogger に追加していた「最新の記事（Recent Posts）」、「読者」などのガジェットがエラーで表示されなくなりました。

このブログは既にお名前.comで、BLOGGER-CUSTOMIZE-TIPS.COM ドメインは取得済み。設定も終わり、あとはDNSの波及を待つばかりの状態なのであまり気にはしておりませんでしたが、やっぱり気持ち悪いので修正方法が知りたいのであります。

というわけで、クイック編集、Recent Posts や読者のガジェットが今まで通り正しく表示されるようにテンプレートを修正してみました。

このガジェットの設定が間違っています。ウェブマスターのヒント: [Friend Connect Settings] - [ホーム URL] がこのサイトの URL に一致していることを確認してください。

いきなりそんなこと言われても・・・サードパーティーの開発したガジェットは仕方ないとしても、Google Bloggerネイティブの「読者」ガジェットが表示できなくなるなんて。。。

しかも、Friend Connectの設定って、Friend Connect もう無いし・・・

canonicalUrlを使うと強制的に元のblogspot.comで表示

取り急ぎ対処方法だけ書きます。 data:post.url を使われていた場所に data:post.canonicalUrl を使うようにして下さい。こちらは xxxxx.blogspot.com のURLを返します。（参照元：buzzword Update）

早速、今回のBlogspot.jpへの国別URLリダイレクトへの対応を記事にされているブログを発見。
びっくりして、"blogspot.jp"というキーワードで検索して一番最初に発見した記事でした。

この方法であれば・・・

blogspot.jpにリダイレクトせず、今までのblogspot.com がそのまま使える
最新記事などのガジェットが修正されるのを待つ必要が無い
ブックマーク、バックリンクなどの資産がそのまま活かせる
今後のソーシャルメディアへのリンクもblogspot.comのまま

などなどメリット盛り沢山。
但し、Googleがポリシー上で今回のリダイレクトを採用しているので、この強制リダイレクト外しが許容範囲であるかどうかは分かりません。とりあえずガゼットにエラーメッセージっていうのは格好悪いので暫定的に手を加えておくと理解しておくのが良いと思います。

テンプレートを修正

管理画面からHTMLテンプレートを修正します。
※トラブルといけないので事前にHTMLを丸ごとコピーしてテキストファイルとして保存しておくことをお勧めします。

HTMLから下記を検索します。
検索する前に、「□Expand Widget Templates」はティックしておくことをお忘れなく。

data:post.url

このブログの場合11箇所ありました。他のテンプレートでも確認しましたが、7,8箇所はあります。

これを下記にすべて置換します。

data:post.canonicalUrl

置換したらHTMLを保存して終了。
これで、blogspot.jp への国別URLリダイレクトは無かったことになります。

あくまでも自己責任で。無いとは思いますが、この国別URLリダイレクト外しによって、検索エンジンから外されても私には責任はないものとします。

参照元
blogspot.comからblogspot.jpへリダイレクトに伴なってソーシャル系で困った場合の対処方法

Google Blogger が blogspot.jpに国別URLリダイレクト

2012-03-18T04:18:00.000+09:00

びっくりしましたよね！？
Google Webmaster Toolsで地域ターゲットの国を変更したからか？
とか、
HTMLで Head に Base URL を書いてみたり
とか、
いろいろやっちゃいました。

たぶん一昨日だったと記憶していますが、アクセス解析の参照元を見ていたら、私が公開している複数の Google Blogger ブログの参照元が、"blogspot.com.au" になっている。

あれ？と思い blogspot.com.au でアクセスすると自分の blogspot.com ブログが blogspot.com.au でも開くではありませんか！

今から思えば、その時点では今回の「国別のURLにリダイレクトされる件」では日本はまだ含まれていなかった。ところが .com.au だからオーストラリアですか？は既に国別URLリダイレクトされていたので、そういった現象が出たんですね。

しかし、今回のGoogle が行っているという国別のURLリダイレクトは・・・
この先、どんな影響が出るのか、それどころか、今、何が起こっているのかすら全く分かりません・・・

こういうときには、クリボウさんのお力をお借りすることになるというのが定石でして。
さっそくクリボウさんのブログを確認したら、ありました、ありました。Googleの国別URLへのリダイレクトについて。
» Blogger ブログ（blogpot.com）へのアクセスが blogspot.jp にリダイレクトされる
ふむふむ、なるほどなるほど。

思いますにファイル共有サイトの Megaupload (メガアップロード)が、削除要請に対して真摯に対応していなかったからというような理由で閉鎖されたことと時期的に近いということもあって、背景が同じなのでは？などと穿って考えてしまう私であります。

どんな影響がでるのだろうか・・・

今まで blogspot.com で登録されていた「はてぶ」などのブックマークが、今後、日本国内では blogspot.jp になるのでリセットされてしまうのが痛い・・・リダイレクトされてちゃんと表示されるとは言えども・・・

という影響がでるのは、月間アクセス数が数万、数十万で、はてぶが数百、数千のブログの話でありまして（笑）、このブログのような零細ブログに関しては国別URLリダイレクトの影響などないない。

しかし、個人的に興味があるのは Google Page Rank や検索順位です。
もっと言えば、Google先生はバックリンクをどんな風に評価しているのかということが見えるような。

今となっては Google Page Rank は自己満足のお飾りみたいなものですが、今回の国別URLリダイレクトによって旧xxx.blogspot.comに付いていたバックリンクが、新xxx.blogspot.jpには引き継がれない？（302リダイレクト扱いのようです）

そうなれば、ページランクは下がるかもしれませんし、これまで１ページ目にいたのに一気に圏外などということが起こる・・・のかもしれませんよね？

Google Blogger ブログでアフィリエイトをしていたというブロガーにとっては一大事ってことにもなりかねません。

Q: URL のリダイレクトは、ブログの SEO 対策に影響しますか？
この変更の後、クローラーは複数のドメインで Blogspot コンテンツを探すようになります。複製されたコンテンツがさまざまなドメインでホストされるようになると、検索結果に影響する可能性はあります。Google は、複数のドメインで Blogspot コンテンツをホスティングすることでもたらされる負の影響を最小化すべく、あらゆる努力を払っています。

Blogger ヘルプの一部抜粋です。
よろしくお願いします。Google先生。

クイックエディットは何処？

SEOの難しい話はこの際どうでもよくて、何が一番不便かというとBloggerにサインインしていると自分のブログに表示されるQuick Editのアイコンが表示されなくなったこと。
恐らく簡単に修正できるんでしょうけど、本当に不便!!

結局はカスタムドメインへの移行のタイミングってことですかね？

最近、私はGoogle Blogger のブログプラットフォームだけをお借りして、ドメインは独自ドメイン（カスタムドメイン）というパターンが実は多いのであります。

どうせ、どうせ、多少なりともバックリンクやブックマークがリセットされちゃうなら、このブログも独自ドメインで、blogger-customize-tips.com にしてしまおうかしらなどとも考え中です。

私は、お名前.com 派なんですが、ドットコムドメインだったら年間1,000円しません。
お名前.com は年中プロモーションをやっていて、.com ドメインが年間190円なんてことも。
» お名前.com

つい２，３日前も Blogger ブログを.comドメインに割り当てましたが、通常、リダイレクトのためのDNS情報の波及に24時間とか48時間とか言われていますが、１０分もしないうちに.com ドメインにリダイレクトされて、かなりびっくりしました。

10分というのは異常な早さですが、ドメインがリダイレクトされるのに１日。その間、アクセスは失いますが、それ以降、BLOGSPOT.JP だの BLOGSPOT.COM だの、国別のドメインのすぐ後ろに「/ncr/」を追加するだの、面倒なことを考える必要もありません。

このタイミングでBloggerブログは全部、独自ドメインにしちゃおうかなと真面目に検討中であります。

FeedBurnerやGoogle Bloggerの最新記事ガジェットのutmパラメータを消去する

2011-11-01T21:29:00.000+09:00

FeedBurner を導入していると、Feed からアクセスして頂いたときに醜くも長いユーザパラメータが追加されます。素人ながら考えますに、Google Analytics でも解析上にややこしいことが起こりそう。しかし、それにも増して個人的に心配なのがブクマです。

同じ記事なのに別のURLでブックマークされてしまったばっかりに、別の記事扱いになっちゃうんでしょうか？　検索エンジンには、できれば本来のURLで評価されたいのにユーザパラメータが付いてしまう。弱小ブログにとっては、ブクマ１件たりとも無駄にはしたくないのであります。

実は、このブログでも使わせてもらっているサイドバーの最新記事ガジェットにも "utm_source" というユーザパラメータが付きます。恐らく、Feedburner よりも実際に訪問された方々がクリックしブックマークされる可能性が高いでと思われるのは、この最新記事ガジェットではないでしょうか？

というわけで、Feedburner だけではなく最新記事ガジェットでURLに付加される utm～～というユーザパラメータを同時に消去してみました。

FeedBurnerTrackingQueryStripper

今回はFeedBurnerTrackingQueryStripperというスクリプトを使わせて頂きましたが、そのままだと Feedburner にしか対応できませんので少しだけ手を加えます。

Feedburner を導入していると、Feed の URL に次のようなユーザパラメータがもれなく付いてきます。

～xxxx.htm?utm_source=feedburner&utm_medium=feed&utm_campaign=～

最新記事は管理画面のレイアウトからも追加できるこちらのガジェット。
（こうやって↑、何気なくリンクを貼るときには URL をコピペしますから utmパラメータが付いてしまうわけです。）

http://www.blogger-customize-tips/2010/07/delete-sidebar-title.html?utm_source=BP_recent

FeedBurnerTrackingQueryStripper というユーザスクリプトはタイトル通り、Feedburner が付加する utm～～というユーザパラメータを取り除いてしまうスクリプト。
（こちらからコードを直接参照ください）

if ( location.search.match(/utm_source=feedburner/) ) {

この中の上記のようなコードがありますが、「utm_source=feedburner という表記を URLに見つけたら」という条件です。これを最新記事ガジェットにも対応できるようにするために下記のようにしてみます。

if ( location.search.match(/utm_source=/) ) {

feedburner という記述を消しちゃう。以上です。これで、Feedburner にも最新記事ガジェットにも両方、１つのスクリプトで対応できるようになりました。

念のために、このブログのFeedからいずれかの記事を開く、右のサイドバーにある「最近の記事」からいずれかの記事を開く、などで検証してみてください。どちらの場合も utm_～～というユーザパラメータは取り除かれています。アドレスバーをよく見ているとスクリプトが実行されたときに、utm 以下のユーザパラメータを取り除いているのが分かりますね。

参照サイト
» FeedBurnerのトラッキング用パラメーターを取り除くUserScript
» FeedBurnerTrackingQueryStripper

Google Bloggerで使える関連記事ウィジェット５種のまとめ

2011-10-30T19:04:00.004+09:00

このブログの「関連記事」が図のように折りたたまれてしまいました。"Click to load related posts list"ボタンをクリックしないと展開しません。

支障がないといえば無いのかもしれませんが、関連記事に物凄く興味のある読者の方でもワンクリック増えるというのは手間です。視覚的にタイトルが見えているのと、そうではないのでは、やはりページビューに違いがあるはず。

自分の Google Blogger ブログでこれまで使ってきた「関連記事」の Widget を見直してみたところ、全部で５種類ありました。備忘録を兼ねて設置の難易度、使用感、設置方法を含め、メリット・デメリットをまとめてみます。

おススメする Blogger 関連記事 Widget

1. Hoctro's Archived Blog版 Related Posts Hack
現在このブログで使わせてもらっている関連記事は、これの旧バージョン(スクリプト)です。Related Posts Hack の旧バージョンは、Hoctro's Placeという旧ブログで公開されていましたが、今は解説が見当たらないので、後にこのブログでもご紹介します。便宜上、「Related Posts Hack」と呼びます。
※ご参考までに、上記２つの参照ブログともに、YouTubeでMVが自動再生されますのでご注意（？）。（投稿時点）

2. Smarter Related Posts Widget for Google Blogger - v2.0
More Tech Tips ブログで紹介されている Related Posts Widget。テキストのみ、サムネイル付きなどの４パターンを専用のコード生成ページから作成することができます。ここでは「JQuery V2」と呼びます。

3. Google Blogger の複数ラベルが表示できる関連記事スクリプト
これは該当する記事のラベルを参照して、複数のラベルごとに規定数の関連記事を表示します。「複数ラベル式」と呼びます。

4. ３行コードで導入 Appspot.com の関連記事表示の日本語ラベル
このブログでも過去に使わせてもらっていた関連記事表示スクリプト。この記事のきっかけとなったボタンで畳まれてしまった関連記事です。ここでは「３行コード式」と呼びます。オリジナルの解説は "Best Related Posts Widget for Blogger ? Show Simlar Articles Below Blog Posts Plugin"にあります。

5. LinkWithin Related posts with thumbnails
説明は不要なほど著名かつ優れたサムネイル付きの関連記事 Widgetです。単に「Linkwithin」と呼びます。

私がGoogle Blogger の記事下に挿入し実際に使っている関連記事ウィジェット・スクリプトは以上５種です。

掲載した順番は難易度順です。上から下に行くほど簡単になる。つまり5番目の Linkwithin が最も簡単ということです。このブログで使わせてもらっている Widget が一番難易度高というのは嫌味っぽいのですが、下記にちゃんと理由をご説明します。

総論

一表にまとめます。

	高度な専門知識	設置難易度	動作	JavaScrupt
Related Posts Hack	不要	高	高速・安定	外部ファイル
JQuery V2	不要	低	関連記事などの日本語不可	外部ファイル（ホスト）
複数ラベル式	無くても可	中	安定	HTMLに直接貼り付け
３行コード式	不要	低	低速、ボタンクリックで展開	外部ファイル（ホスト）
Linkwithin	不要	低	中速・安定	外部ファイル（ホスト）

設置がしやすくても、例えば３行コード式のようにクリックをしないと関連記事リストが展開しないとか、見出しラベルが日本語表記に変えられないなど、使用上の制限はできれば避けたいものですね。特に気になるのは日本語ブログ上の英語表記。不完全さが拭い切れない印象があります。

個別の使用感・感想

1. Related Posts Hack
Related_post_hack.jp という JavaScript の外部ファイルをどこかのサーバにインストールして Blogger ブログから参照します。設置難易度が高いというのは、この Related_post_hack.jp のオリジナルの公開場所がわからなくなってしまったからです。
恐らく、related_post_hack.js で検索すればどこかでソースが見つかると思います。ちなみに、How to Add Related Posts Widget to Your Blog?で紹介されていますので、是非ご参照ください。 JSの問題が解決できれば、私はこれが一番のオススメです。とにかく軽くて速い。ラベルも手書きだから日本語で「関連記事」など自由に記述ができます。
（追記：もしかすると、私が自分でソースを外部ファイル化したような記憶が蘇ってきました。コードを単にHTMLに貼り付けるだけだから、これが一番簡単かもしれません。）

2.JQuery V2
JQuery V2は、専用ページに項目を選択・入力すれば比較的簡単にコードが生成できるのですが、"Related Posts" という関連記事の見出しラベル(Title)がどうしても日本語化できませんでした。

複数の稼動中 Google Blogger ブログで検証しましたが、どれも NG。設定画面では、例えば Related Posts は関連記事、Recent Post は最新記事のように Title 変更項目があるのに動作確認では Related Posts のまま。

更には、Related Posts （関連記事）を書き出すように指定しても、Recent Posts (最新記事)を書き出してしまうバギーな挙動が見られます。

もしかすると、ブラウザのキャッシュが悪戯しているのかもしれませんが、それでは再現性があるということですから、私としてはNGです。

但し、英語版のブログであれば、今のところ問題はありません。
英語版 Blogger ブログに設置するにしても、レイアウト（CSS）が少し面倒だなという印象です。

3. 複数ラベル式
複数ラベル式は、関連記事の件数をなるべく多く表示したいブロガー向き。１ラベルごとに１０件の関連記事を指定したら、５ラベルで５０件の関連記事・・・。関連記事だけで、30～40cmくらい高さがあります。。。サイドバーが長い、１記事が短い、バランスが悪い、という場合はオッケーかと。

4.３行コード式
AJAXなのかJSONなのか、何らかの仕様変更で、ボタンを押さないと関連記事が表示されないから私は使用をやめました。英語ブログでかつ、訪問者がボタンをクリックして関連記事を展開することに特に違和感がない場合はオッケー。

5. Linkwithin
ここまでご説明して来ましたのも、Linkwithin をお勧めしますよという長い長い前振りです。Linkwithin は、ブログのURL、ブログプラットフォーム、表示する列数、メールアドレス、背景色濃淡の５項目を入力・選択すればコードが生成できます。

コードは１つのブロック（かたまり）ですから、関連記事として表示させたい場所１箇所にコードを貼り付けるだけで完成です。

サムネイル付きの関連記事です。記事中にサムネイルがないブログの場合は、テキスト形式で普通の関連記事表示と同じような形式で書き出されます。
表示記事件数は最大で４件まで。推測ですが例えばLinkwithinが選択してきた関連記事４本のうち２本にサムネイルがない場合は全てテキストで表示されるようです。

１本だけサムネイルが無いときはLinkwithinから代替の画像が表示されます。アルゴリズムは非公開なので本当のところは判りません。

Linkwithin は Google Blogger だけが対象ではありません。他のブログサービスにも設置できます。管理しているブログやサイトに一気に貼り付けていくときも貼り付けの操作に一貫性がありますから作業効率は良いです。個人的にはデメリットらしきことも無いわけではないのですが、長くなりますので関連記事はLinkwithin で良いんじゃない？という結論で締めくくらせて頂きます。

BloggerテンプレートのサイドバーWidgetタイトルを消去する

2010-07-04T17:48:00.001+09:00

とても些細なことなんですが、Google Blogger テンプレートをカスタマイズしていてデザイン的にどうしても気になっていた点があります。
それはサイドバーの Widget のタイトル部分なんですが。

私はサイドバー Widgetのタイトルは空白にしておくことが多いです。Javascript のウィジェットを追加してもタイトルは記入せずに、何と言うか、あくまでもサイドバーのパーツとして使うことが多い。

例えば、このブログのサイドバーにはソーシャルメディアへのリンクアイコンを置いていますが、そこに「ソーシャルメディア」という類のタイトルは入れません。

ウィジェットのタイトルは未記入が多い

そもそも Google Blogger テンプレートのサイドバーウィジェットのタイトルは見出しタグの H2 が割り当てられていることが多いですよね？私はサイドバータイトルに H2 の見出しってどうよって考えです。

もちろん、サイドバーの Widget へ普通にタイトルを入れるときもありますから、私はサイドバータイトルの見出しレベルは高くても見出し H3 、もしくはテンプレートをカスタマイズして単純に DIV にしています。

話を戻しますが、空のサイドバータイトルがあるとデザイン上で何が気になるのか。
そこに、1.5cm くらいの空白ができてしまうからです。

Firefox などでは、比較的に空白の高さは1.5cmくらいに収まって見えますが、Internet Explorer などでは 2cm にも 2.5cm にも見えることがある。つまり、サイドバータイトルをブランクにしたままにしておくと、デザイン的にかなり間抜けな状態になります。

サイドバーに追加したガジェットのWidget IDを特定

サイドバータイトルの余白を消す前に、追加したサイドバーのガジェットの Widget ID を確認しておかなくてはいけません。

恐らく一番簡単なのは、ブログトップページの HTML ソースを確認することです。
大抵のブラウザは、ホームページの画面上を右クリックすると「ページソースの表示」などのメニューがあります。これを選んで HTML ソースを表示します。

HTML の中からサイドバー部分を探します。経験上、Blogger テンプレートのサイドバーは <div id='sidebar-wrapper'> で定義されていることが多いようです。
開いた HTML を sidebar-wrapper というキーワードで検索してみます。

sidebar-wrapper がヒットしたら、その直下に次のような記述を探します。

HTML9 の 9という数字はガジェットが追加された順番で、最初に必ずHTML9が来るというわけではありません。

この数字は順不同ですが、レイアウト通りにサイドバーの上から順番に並んでいます。
HTMLにはウィジェットに記述した文字やコードがそのまま表示されていますから、Widget ID を特定するのはさほど難しくはないはずです。
id = 'HTML' の数字を確認しておきます。

サイドバータイトルの余白を消す

Widget ID が確認できたら、管理画面からテンプレートを選び、HTML の編集を行います。
テンプレートに下記のような表記があります。

<b:if cond="data:title != """> <h3 class="title"><data:title/></h3> </b:if>

必ずしも h3 とは限りません。h2 のときもありますので、<data:title/> で検索すると探しやすいと思います。

先ほど特定しておいた Widget ID を探して、上記の３行を削除します。

これで、サイドバー Widgetの空白タイトル部分にあった 1.5cm くらいのブランクが消えて、すぐ上に配置したWidgetとぴったりと密着して見栄えがよくなります。

私は開かれたページタイプによって、追加したサイドバー Widgetを表示させたり非表示にさせたりしますが、そのようなときに空白のサイドバータイトルは上に詰めておいた方が良いですね。

Google Analytic のサブドメイン管理はフィルターかセグメントか？

2010-04-19T21:34:00.001+09:00

Google Analytics で複数サブドメインを１プロファイルで管理する方法の記事にご質問コメントを頂きました。

コメント欄では長くなりそうですし、補足したほうが良さそうだったので別記事でご回答させて頂きます。
ご質問コメントのポイントは以下の部分です。

まず、メインドメインはプロファイルを新規作成しておき、サブドメイン分はメインドメインのプロファイルを複製し、それにカスタムフィルターをかけて該当のサブドメインだけが表示されるようにする。

で合ってますでしょうか？

サブドメイン分を各々新規にプロファイル作成する必要はないですよね？＾＾；

揚げ足を取っているようで嫌な奴なのですが（ごめんなさい）、コメントにある「メインドメインからサブドメインのプロファイルを複製する」ということがイコール「サブドメインを各々新規にプロファイル作成する」という意味にりますので回答としては

「サブドメイン分を各々新規にプロファイル作成する必要はあり」になります。

ただ、私や匿名さんの目的は同じで、Google Analytics でサブドメインをメインドメインに統合したときに「どうやってサブドメインの分析・解析しようか」ということですよね。

前回の記事を少し補足させてください。

私は統合後のサブドメイン自体の解析に前回の記事の通り、「個々のサブドメイン側でカスタムフィルタを設定」しました。一方、匿名さんは「統合したメインドメイン側でカスタムフィルタを設定」するということだと思います。

今、この記事を書くために Google Analytics を見ていたのですが、コレじゃないですかね？サブドメインを統合した後のサブドメイン解析は。

『メインドメインのレポートでアドバンスセグメントを作成する』

セグメントは使ったことが無かったので、よく分からないんですぅって書こうとしたら、メインドメインのレポート上に統合したサブドメインだけを抽出するセグメントがひとつ作成されているのを発見。
一体全体、いつ誰が作ったんだよぉ・・・

などと遠い記憶を辿っていたところ、何だこれでオッケーじゃないという結論に。

サブドメインを抽出するアドバンスセグメントの作り方

概要
ディメンションにホスト名を追加し、値に該当サブドメイン名を指定します。個々のサブドメインの解析をしたいときは、レポートを表示する際に作成したアドバンスセグメントを選択する。

手順
1. メインドメインのレポートを開く（デフォルトは「全セッション」）
2. レポート右肩にある「アドバンスセグメント」のボタンをクリック
3. 左側のリストから「ディメンション－コンテンツ－ホスト名」を選び、右の「デメンション or 指標」の枠にドラッグ
4. 条件は「含む」、値に該当のサブドメイン名を入力（もしくはドロップダウンリストから選択）
5. 「セグメント名」のフィードに任意の名前を入力
6. [セグメントの作成]ボタンで作成
7. 必要に応じて別のサブドメインのアドバンスセグメントを作成

各種レポートを表示するときに、右肩の[アドバンスセグメント]ボタンから作成したセグメントを選択すれば、目的のレポートになるはずです。

Google Analytics についてもっと勉強していれば、匿名さんも迷わずに済んだはず。混乱させて申し訳ありません。

せっかくメインドメインとサブドメインを統合しておきながら、サブドメインのプロファイルから解析しようってのが本末転倒でした。アドバンスセグメントを活用されている方々からすると、至極当たり前の話題で恐縮ですが、私の知識の中では、今のところこれがベターなんじゃないかと。
もっと良いやり方があれば、是非、ご教示下さい。

アドバンスセグメントの具体的な使い方は、Web担の記事が詳しいです。
アドバンスセグメントでとことん絞り込む Google AnalyticsでSEO

Google Bloggerにアーカイブガジェットは必要だろうか

2010-04-18T01:39:00.001+09:00

Google Blogger ブログだけではありませんが、ブログサービスには月別の「アーカイブ」があります。
ブログにアーカイブのガジェットを追加してますか？

このブログには追加しておきながら言うのも変ですが、私は常々まったく必要ないんじゃないかって考えています。

Seesaaブログにしても、FC2にしても、もちろんこの Google Blogger ブログにしても、アーカイブ（プラグイン、ガジェット）は、デフォルトで追加されてたと思います。

でも、私、アーカイブのリンクをクリックして記事を開くことは、ほぼ皆無です。
やっぱり、要らないと思うのですが。

話は変わりますが、情報商材のブログって何処を切っても金太郎。デザインや配色、レイアウト、書き方までそっくり。情報商材のブログの場合、このテンプレートデザインが良いですと誰かが言ったら右に倣え。

ただでさえ無料ブログサービスは提供されているプラグインやガジェットが限られているので、似通ったブログになっちゃうのに、どうして大勢と同じブログテンプレートで没個性的にしちゃうんだろうって疑問に思います。

Google Blogger には Wordpress 程ではないにしても沢山のテンプレートがあります。
それをそのまま適用するのでは、やはり没個性になってしまう。
だからカスタマイズするわけです。

カスタマイズするときに念頭に置くのは、標準のガジェットにしても開発されたものにしても、それが本当に必要なのかどうかってことを自問自答してみることですね。
例えば、月間アーカイブっていうガジェットは本当に追加する必要はあるのかないのかなどのように。

ブログカスタマイズの目的は、ユーザビリティを高めること。
訪問者から見ると操作がしやすいレイアウトで、カスタマイズしている側からすればページビューを増やしたり、アフィリエイトの収入を増やしたりと目的は色々あります。

そういう視点で見ていくと、月間アーカイブというのはどうも中途半端。
ブロガーが○年○月に書いた記事を読んでみたいと、アーカイブで該当年月をクリックするってことは稀でしょうから。

だったら「リンクリスト」でも追加してユーザタグ別のカテゴリーメニューを作ったほうが、訪問者は目的の記事を探しやすいし、ページビューも増える。

私もカスタマイズは大好きで、なるべく他のブロガーが実現していないデザインのブログにしたいと常日頃考えますが、突き詰めていくと結構シンプルなものに行き着くことが多いです。
どんなガジェットを追加しようかというよりも、どのガジェットを何処にレイアウトしようかということを考えることに時間を割きます。

ガジェットはデザイン画面の「レイアウト」－「ページ要素」からレイアウトするのでは金太郎飴になる恐れがあるので（って、それが普通なんですが・・・）、ガジェットをHTML中に埋め込んでいくと、オリジナリティとユーザビリティの高いブログが作れます。

ブログブログHacks Tips Tweaks

アフィリエイトリンクの1px Webビーコンを非表示にする

バナー画像の img を拡大を 100%に拡大

1px Webビーコンを非表示にする

id属性全体に指定したほうがラク

Google Bloggerブログでサイトマップ・記事一覧を作成するスクリプト

jQueryの導入

ページの作成とコードの貼り付け

スクリプトの貼り付け

本文中に貼り付けた画像の枠罫線（Border）をはずす

HTMLから img の border を探す

BloggerのNavバー（Navigation）を非表示

Titleタグのブログ名と記事名の順番を入替える

Blogger で Title の記述をカスタマイズ

Google PicasaからBloggerへ イメージ画像を貼り付ける

記事作成画面から画像をアップロードする場合

Blogger への画像貼り付けは Picasa が便利

日本語環境のBloggerで投稿記事URLを任意に指定する

英語の記事タイトルであればパーマリンクに採用される

Google Blogger日本語環境で任意のパーマリンクを生成する方法

追記（2012年3月現在）

BloggerにAddClipsボタンを貼り付ける

AddClipsコードをエンティティ文字変換

Bloggerに「続きを読む」を追加する

続きを読むを追加するカスタマイズ

Google AdSenseタグをHTMLエンティティ文字に変換

Google AdSenseタグをHTMLエンティティ文字に変換

エンティティ文字に変換するとポリシー違反？

Google Blogger 投稿記事の文字列を一括置換

オンラインで一括置換

PHP不要 Picasa ウェブアルバムで簡単に正方形サムネイルを作る方法

正方形サムネイルを作る無駄な時間

Picasaウェブアルバムの画像はサイズが自由に変更できる

SPAM Blog の削除と Blogger アカウント停止

削除された SAPM ブログの中身とは

ダミーブログは一般公開せず、Robots.txt でインデックスも回避

そしてBlogger アカウント停止へ

各種 Googleサービスへの貯蔵物は要チェック！

無料で www なしドメインを Google Blogger ブログにリダイレクトする方法

無料で Naked Domain を転送してくれる wwwizer.com

実際に wwwizer.com で転送を検証

独自ドメインの Google Blogger で wwwなしのリダイレクト設定

Google Blogger のカスタムドメイン設定のおさらい

www なしがリダイレクトされない問題

前提条件として www なし 用の ホスティングサーバが必要？

ドメイン変更後に LinkWithin のリンク先を変更する方法

メイン変更後すぐにリンク先が変わるものと変わらないものがある

どうも Google Blogger + .CO.CC の組み合わせが怪しい

LinkWithin Site ID を変える方法

Google Blogger でも Platform は Other が Better

Google Bloggerブログを99%元通りに復元するためのバックアップ方法

■ テンプレートを差し替えて再びオリジナルに戻してみると・・・

■ こんなケースでは Blogspotブログを完全復元できない

■ Blogspotブログを99%復元するためのバックアップデータ

■ ところで残された１％とは・・・

Bloggerブログからエクスポートした投稿データXMLファイルをインポートするときの注意点

■ 追記のページ区切り  が変換されている・・・

Googleの検索結果にプロフィールを表示させる方法とエラー回避

Google検索結果にプロフィール情報を表示する

Google＋のアカウント

ブログからGoogle＋のプロフィール(author情報)への発リンク

Google＋のプロフィールへ自分のサイトやブログを追加

Rich Snippets Testing Tool (Beta)で確認

Warning: At least one field must be set for HatomFeed の回避方法

ギャラリー形式のBlogger テンプレートに LinkWithin を導入する

個別記事を開いたときだけLinkWithinを表示させたい

記事中の任意の箇所に表示させる

勘違いはLinkwithinの枠線が見切れることから始まった

Google Bloggerのフィードオプション orderby=updated で記事数を500件

Google Bloggerのフィード記述形式

feeds/posts/default?orderby=updated というオプション

?orderby=updated オプションを使うと具体的に何が変わるのか？

?orderby=updatedオプションのデメリットとメリット

Google Blogger 独自のrobots.txt 変更でラベルはインデックスされやすくなりますか

Blogger Robots.txt 編集の主旨とは

Blogger のラベルはちゃんとインデックスされている

Blogger の Robots.txt 編集作業

エントリー投稿直後に表示されるGoogle＋共有を非表示に

BLOGSPOT.JPへの国別URLリダイレクトを無効にする方法

canonicalUrlを使うと強制的に元のblogspot.comで表示

Google PicasaからBloggerへイメージ画像を貼り付ける

前提条件として www なし用のホスティングサーバが必要？