>--> 2012-07 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 2012-07

2012-07

今見ているブログが Blogger かどうか調べる 6 つの方法

Posted at: 2012-07-21 Label: 2

今日は翻訳が中心。参考にしたのはこちらです。


URL に blogpsot.com をふくむかどうか

URL に blogspot.com というドメインを含めば、間違いなく Blogger です。日本国内から Blogger ブログにアクセスすると blogspot.jp へリダイレクトされる（参考）ので、blogspot.jp かどうかというのも判断材料になるかと。

Blogger 特有の URL

一方、Blogger には「カスタムドメイン」という、所有しているドメインを blogspot サーバーのブログに適用できる仕組みがあるので（参考）、「blogspot ドメインでなかったら Blogger ではない」とは言い切れません。


Navbar があるかどうか

一般的な Blogger ブログには、ページ最上部に「Navbar」と呼ばれるバーが表示されます。このブログの最上部にあるのがそれです。

Blogger の Navbar

とはいえ、ブログデザイン上の都合でスタイルシートで Navbar を隠したり（参考）、Blogger 管理画面のオプションで Navbar をオフに（参考）している場合があるので、これも絶対とは言えません。


Blogger におなじみのテンプレートかどうか

現在 Blogger では、テンプレートデザイナーを使って、様々な背景やレイアウト、文字色やフォントを自分好みに組み合わせながらテンプレートを作れるようになっています（参考）。

ですが、それ以前からの Blogger ユーザーは、たいてい Minima のようなシンプルなテンプレートを好んで使っているそうです。ほんとかな？とちょっと疑ったんですが、そういえば「クリボウのプログラミングひとりごと」も Minima テンプレートを使っていました…。

Blogger Minima テンプレート


Blogger 特有の URL 構成かどうか

クリボウもこの方法でよく確かめています。カスタムドメイン機能で独自ドメインを Blogger ブログにかぶせているブログでも判別できます。

Blogger ブログの「投稿」の URL はこのようになっています。

http://www.example.com/2012/07/post-title.html

「ブログトップの URL」＋ 「公開年」＋「公開月」＋「タイトル」＋「.html」という構成になっていますね。もう一つ、Blogger の「ページ」（参考）の URL 構成はこんな感じ。

http://www.example.com/p/page-title.html

こちらは、ブログ URL とページタイトルとの間に /p/ が入るのが特徴です。

ちなみに、今回の話題とは直接関係がないですが、Blogger の投稿タイトルと URL 上のタイトルの関係について知りたい人は、こちらやこちらを参考にしてください。


フィード URL に /feeds/posts/default が入っているかどうか

Blogger のフィードは基本的にこんなフォーマットになっています。

http://www.example.com/feeds/posts/default

基本的にと書いたのは、Blogger には同じく Google 運営の FeedBurner のフィードへアクセスをリダイレクトさせる機能がオプションで用意されていて（参考）、有効にしている場合はこれに当てはまらないから。

Blogger 標準のフィード使用の場合でも、人によってはいろんなパラメータを付加している場合があるので、そちらも注意が必要です（参考）。


ソースコードに generator が Blogger と書いてあるかどうか

Blogger ブログのソースコードを表示してみると、head 要素の中に、このようなタグがあるはずです。

<meta content='blogger' name='generator'/>

これは一目瞭然ですね。


…ということで、この調べ方を覚えて、よく見に行くブログに Blogger ブログがないか、一度探してみてはいかがでしょうか。

Blogger の Navbar がブログ管理画面からオフにできるようになりました

Posted at: 2012-07-19 Label: , 7

本日、こんなツイートを発見しました。


えっ！と思って、さっそく確かめてみました。
Blogger 管理画面「レイアウト」で「Navbar」ガジェットの「編集」リンクをクリックし、

Blogger 管理画面「レイアウト」の「Navbar」ガジェット「編集」リンク

表示される「Navbar の設定」ページをよく見てみると…。

「Navbar の設定」画面、「オフ」の選択肢

たしかに新しく「オフ」が選択肢として追加されていますね。以前、

でも書いたように、これまで Navbar を非表示にするためには、Blogger が自動的に書き出す Navbar をユーザーのスタイルシートで無理やり隠すという方法がとられてきました。

が、これからは最初から書き出さないようにできるということです。ブログデザイン的に Navbar をはずしたかったものの、なんとなく隠すのに抵抗だとかやましさだとかを感じていた人には朗報かと思います。


Navbar の空白を詰める

ちなみに、「オフ」を選ぶとこれまで Navbar があった部分がそのまま空白になります。Navbar のあった 30 ピクセル分の高さを詰めたい場合には、Blogger 管理画面「テンプレート」ページの「HTML の編集」から

body .navbar {
  height: 0;
}

というコードを

]]></b:skin>

の直前ぐらいに入れておくといいと思います。

Blogger のスレッド式コメント欄で、各コメントに番号をつける方法

Label: , 14



以前、Blogger の埋め込み式コメント欄でコメントをスレッド表示にできるようになった件について、記事にしました。

今日は、そのスレッド式のコメント欄のコメントに番号を振る方法です。コメントスレッドのもとになるコメントには「1」「2」「3」という吹き出しがつき、それらのコメントへの返信は、「1.a」「1.b」「2.a」のように、アルファベットが付加されます。

参考にしたのはこちらのページ。


導入方法

その１　Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その２　面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもＯＫです。「その１」と同じことを自動でしてくれます。

<style type="text/css">
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left:10px;
padding-top:3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_Vhbaek5hfW1FKz_bTDQO4rl76Jtofvi0_hEuYejdE24VAxkr8Xh7i744tPn87CLDvx18YNZkuqjdVmr4JjZwlvJVKJmU-BKXSKrrHCt7JYiJTHC1SZuVzkIpN7VoRNl44UtQQ/s1600/comment+bubble2.png) no-repeat;
margin-top:7px;
margin-left:10px;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}
</style>

コメントのたくさんつくブログでは、各コメントに言及するのに「3 にあるように…」とか「5.c のコメントで…」という風にコメントを指定することができるので、便利かもしれませんね。

Blogger でテキスト選択を禁止する方法

Posted at: 2012-07-16 Label: 4

人によっては、Blogger ブログの内容をコピーされたくない場合もあるかもしれません。そういう人にもってこいなのが、今回のスクリプト「Disable select-text script」。導入すると、ブログ上で文字列の選択ができなくなります。今回参考にしたのはこちらのブログ。

実際に導入してみたデモページがこちら。


導入方法

その１　Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「HTML / JavaScript ガジェット」を選択して、以下のコードを貼り付けます。

その２　面倒だという人は、下の「Add to Blogger」ボタンを押して、スクリプトを導入したいブログを選択したのち「ウィジェットを追加」ボタンを押すだけでもＯＫです。「その１」と同じことを自動でしてくれます。

<script type="text/javascript">
/***********************************************
* Disable select-text script- c Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//form tags to omit in NS6+:
var omitformtags = ["input", "textarea", "select"];
omitformtags = omitformtags.join("|");
function disableselect(e) {
  if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) {
    return false;
  }
}
function reEnable(){
  return true;
}
if (typeof document.onselectstart != "undefined") {
  document.onselectstart = new Function("return false");
} else {
  document.onmousedown = disableselect;
  document.onmouseup = reEnable;
}
</script>

フィードや Google ウェブ検索のキャッシュを拾われると結局コピーできちゃうわけなんですが、まあないよりはましかもしれません。特に全体にはお勧めしませんが、「引用も禁止！」というブログの運営方針の人だけ参考にしてもらえたら、と思います。

Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも

Posted at: 2012-07-07 Label: 2

IE 互換モードの削除

IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;
Twitter / hinoki__: IE10でさえbloggerのレ
そうそう、クリボウも気になってたんです、このタグ。Blogger 管理画面「テンプレート ＞ HTML の編集」と進むと、head 要素内の最初の方で出てきます。

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer（以下 IE） 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。

「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。

だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。

Blogger の Internet Explorer 7 互換性モード   Blogger の Internet Explorer 7 互換性モード

どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。

ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。

ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。


IE 互換モードの複数指定

で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。

<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>

このタグを使うと、
IE9の時は、IE9モードで表示され、IE8の時はIE7モードで表示されます。
とのこと。HTML5 と CSS3 がジャンジャン使える IE 9 以降と、まだ使えない IE 8 両方のことを考えると、このタグに変更しておくのが今のところ一番いいのかもしれません。


更新情報：
  • 2012-07-08 … 「IE 互換モードの複数指定」の項目を追記しました。

Blogger 関連のつぶやき 2012-06

Label: 1

Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した先月の Blogger 関連のつぶやきを、ここにまとめておきます。

リアルタイムで読みたい！という人は、上記リンク先からぜひ、サークルに追加したり「いいね！」したりしてください。


このブログでは毎月一度、記事にしたネタや記事にしきれなかったニュースを載せています。最新のニュースについては、Google+ ページもしくは、Facebook ページでご確認ください。

Blogger ブログの投稿ページの URL（パーマリンク）が自由に指定できるようになりました

Posted at: 2012-07-01 Label: , , , 12

Blogger ブログの各エントリには、個別の URL（いわゆるパーマリンク）がついています。これまで、Blogger のパーマリンクは、投稿タイトル中のアルファベットを元にして、自動的に生成されてきました。この Blogger の自動 URL 付加の仕組みについては、以前に記事にしているので、興味のある人はご確認を。

そのパーマリンクが今回、投稿時に自由に URL を指定できるようになりました。ニュースを知ったのは、こちらのブログから。（@aka さんありがとうございます）

パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

上のスクリーンショットのように、Blogger in Draft からブログの新規投稿を行うと、投稿オプション設定に「パーマリンク」という欄が出てきます。

ここに blogger-custom-permalink と入れると、このブログの場合だと、http://www.kuribo.info/2012/07/blogger-custom-permalink.html という URL になります。

パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

これまで、投稿を公開し終えるまでその記事の URL が分からなかったことを思うと、前もって URL が分かるだけでもずいぶん進歩です。さらに URL を自由に指定できるとは！ブログ URL 中の単語自体 SEO に影響があると言われてすでに久しいですが、Google 傘下の Blogger もようやく SEO に本腰を入れてきたというところでしょうか。

このカスタムパーマリンク機能ですが、一応注意点をあげておくと、

  • パーマリンクのカスタマイズは Blogger ではなく、Blogger in Draft から。
  • URL で使えるのは半角英数とハイフン - とドット（ピリオド） . 。
  • ハイフンやドットは、ファイル名の先頭でも末尾でも使える。連続もＯＫ。
  • 大文字と小文字は区別される。（ABC と abc は別）
  • 文字数制限なし。長すぎても公開はできる。アクセスすると 414 エラーが出る場合も。100 文字は OK、3000 文字は無理でした。（テスト）
  • URL が指定できるのは、新規投稿時のみ。公開済み投稿の URL は変更できない。

…と、こんなところです。現在 Blogger in Draft にしかない機能のため、途中で仕様が変わる可能性も大いにあります。パーマリンクの指定は、無理せずこれまでの Blogger のきまりにしたがって、半角英小文字とハイフンのみ、39 文字以内にしておいた方が無難でしょうね。

関連：
追記（2012-07-18）：

コメント欄で教えてもらいました。このカスタムパーマリンク機能が、Blogger in Draft を卒業して、Blogger 標準でも使えるようになりました。

© 2005-2014 Kuribo. Powered by Blogger.