カスタマイズ

Bloggerの設定に関する覚え書き。当てになるとは限らない。


1. エントリの編集

1.1. 画像の表示サイズ

本文に(Picasaウェブアルバムからの)画像を表示させるとき、読み込める画像サイズは決まっている。Bloggerの編集画面では小(200px)、中(320px)、大(400px)、特大(640px)からの選択だが、httpのs***の部分を変えれば512px等も可能。縦/横のうち長い方のサイズで指定する。併せてimgのwidth/heightも変更する必要があるが、指定がなくても問題はない模様。


なお、外部から読み込むときは制限はなく、imgのwidthとheightで指定できる。Flickrの場合は「Share this」から「Glab the HTML/BBCode」を開いてサイズを選択し、コードをコピーして貼り付ける。

1.2. 表の挿入

Bloggerの編集画面には表を一から作る機能はないので、他で作ったタグ付きテキストを貼り付けることになる。

一旦入れた表は、編集画面で列/行の削除/追加などができるが、列/行の操作はバグっぽいところがあるので、ここで行うのはセル内のテキストの編集に留め、それ以外は貼り付ける前に整えておいた方がいい。したがって、貼り付ける前の表をしっかり作成/保存しておく必要がある。

工程としては、例えば以下のようなもの。
  1. Excelで原案を作成(セルの結合が関係する作業はExcelが楽)。
  2. ホームページビルダーに貼り付けてhtml化(Excelでhtml形式で保存するやり方では不要なタグが大量に入るので)。セルに付いた不要なタグを削除する等、整形。見出しセルはthタグにする。
  3. テキストをEmEditorに貼り付け。不要なスペースを置換で削除。改行も削除(範囲選択→「編集」→「選択範囲の変換」→「改行を削除」。改行が残っているとバグっぽいことが起きることがある)
  4. Bloggerの編集画面に貼り付け。
thタグとtdタグの見え方はテンプレートで指定できる。

2. デザイン

2.1. 本文とサイドバー部分の横幅

テンプレートに手を入れれば変更可能。ある程度のリキッドデザインにできればそれに越したことはないが、ブラウザによる差が出がち。


2.2. ラベルの見せ方

ウィジェットのテンプレートに手を入れれば、ラベル(タグ)を上に詰めたり、段組にすることも可能。


基本はこれに従うが、長いラベル名のときに、ラベルの途中で改行されるのも、それを避けるためにラベルを短くするのも変なので、
  • widthの指定は外す。
  • 改行を禁止するために「white-space: nowrap」を入れる。
  • IE特有のタグ(word-wrap)による改行を禁止するために「word-wrap: normal」を入れる(冒頭でbreak-wordと指定が入っているのをキャンセルする)。
ただし、タグクラウド形式は数が増えるとタグを探しにくくなるので、ほどほどに留めた方がいいと思う。

2.3. Googleカスタム検索

ウィジェットのテンプレートに手を入れれば見え方を変えることができる。


元のスタイルシートはgsearch.cssとdefault.cssなので、これらを参考にしてテンプレートの以下の後にスタイルシートを設定すればいい。
<!-- override gsearch.css -->
<style type='text/css'>

例えば検索結果から投稿日時を除くには、以下を入れる(gsearch.cssでinlineに指定されていたのをnoneにオーバーライド)。ただし、IEでは効かない模様。
.gsc-blogResult .gs-blogResult .gs-relativePublishedDate,
.gsc-newsResult .gs-newsResult .gs-relativePublishedDate {
display : none;
}

また、レイアウトはインラインスタイルシートでも設定可能で、
<div class='widget-content' style='width:95%'>

の部分を、例えば幅と位置が固定されるように、以下のようにすることもできる。
<div class='widget-content' style='width:230px;height:40px;margin-top:16px'>

なお、IEでは検索ボックスが表示されると本文のカラムが下にずれる現象が起こる。Firefox(Gecko)とGoogle Chrome(Webkit)では起こらず、LunascapeでもTridentのときだけ起こるので、IEの問題だと分かる。


正確には、IE8では互換表示(IE7 Standards)のときだけ起こり、IE8標準の表示(IE8 Standards)では起こらない。互換表示では検索ボックスの右端が切れる現象も出るので、うまくレンダリングできないらしい。

改めてIE8の互換表示について整理すると、
  • ツールバーの右クリックで[互換表示]ボタンがチェックされていれば、ツールバーに互換表示ボタンが出て、互換表示にするかどうか切り替えることができる。
  • ただし、「互換表示設定」の「マイクロソフトからの更新されたWebサイト一覧を含める」にチェックが入っていると、Microsoftから配布された一覧表(アドレスバーに「res://iecompat.dll/iecompatdata.xml」と入力すれば表示される)に記載されたサイトは自動的に互換表示になる。この場合は互換表示ボタンは出ず、互換表示にするかどうか切り替えられなくなる。
  • また、個々のページでDOCTYPE宣言か、METAタグで互換表示にするかどうか指定することができ、このときも自動的に指定されたモードになる。この場合も互換表示ボタンは出ない。指定の中で最強なのはMETAタグ。
  • 現在どちらのモードになっているかは、そのページを開いた状態でアドレスバーに「javascript:alert(document.documentMode);」と入力すれば調べることができる。7が出れば互換表示になっている。

この現象を回避するには(IE8 Standardsで問題が出ないという前提で)互換表示にさせなければよいことになる。互換表示になる一覧表を見ると、しっかりblogspot.comが入っていて、Bloggerはサイト丸ごとが互換表示に指定されていた。これをオーバーライドするには各々のページにMETAタグを入れればいいので、テンプレートのhead部分に以下を入れる。
<meta content='IE=8' http-equiv='X-UA-Compatible'/>

少しトリッキーなのはこのMETAタグの位置で、有効にするには<head>の直後に入れる必要がある。

なお、こうするとIE9でもIE8 Standardsの表示になってしまうので、IE9 Standardsにするには'IE=8; IE=9'と併記するか、それぞれのバージョンのStandardsで表示させる'IE=Edge'にすればいい。
<meta content='IE=Edge' http-equiv='X-UA-Compatible'/>

ただ、IE9はレンダリングの解釈がまたぞろGeckoやWebkitと違うところがあったりするが。

2.4. Flickrのバッジ

ウィジェットにFlickrのブログパーツ(バッジ)を入れることもできる。


このスクリプト中の画像指定の意味は、以下のようなもの。
  • count=2(画像数。初期設定の3から2に修正)
  • display=random(ランダム表示)
  • size=t(サイズはサムネイル)
  • layout=h(水平配置)
2.5. Twitterアイコン

以下を参考にした。ただ、エントリ以外のページには出てくれなくていいのだが、そのやり方が分からない。セレクタでも仕込む?

[参考]
象と散歩: 統計とマーケティングを考える: ブログとSNSを連携する - Twitter連携

2.6. Facebookのアイコン

以下を参考にしつつ、ブロックのサイズを110px × 20pxとした。


2.7. NASA Image of the Dayのウィジェット

IE8のときから少しおかしかったが、IE9でIE9 Standardsの表示にしてから問題が顕在化。このウィジェットはインラインフレーム(iframe)で読み込む形になっているが、このフレームにいつも縦のスクロールバーが出るようになった。

普通はiframeにHTMLでscrolling=noをかけるか、CSSでoverflow: hiddenをかけるところだが、このiframeはテンプレートには出ないのでHTMLではいじれず、CSSではoverflow-y: hiddenや-ms-overflow-y: hiddenなどのコントロールを一切受け付けず。たぶん正しい対処法はフレーム内のHTMLファイルの方を修正することだが、これはBlogger既定のウィジェットなのでいじれない。

窮余の策として、IE以外用にわざとoverflow-y: scrollで縦のスクロールバーを出させた上で、iframeの横幅を広げ、スクロールバーをサイドバーのボックスから押し出して隠すことを考えたが、Geckoではうまく行くものの、Webkitはこの属性に従わない。調べたところ、Webkitはこの属性と関係なく、フレームから溢れるときだけ自動的にスクロールバーを出すらしい。

そこで、iframeの縦幅を固定した上で、フレーム内のHTMLファイルの縦幅をこれより長くすることで常にスクロールバーを出させようとしたが、このHTMLファイルのデザインはいじれないので、収まりが悪くて断念。

仕方ないので、今まで避けてきたCSSハックに訴えることにした。


まず条件付きコメント(コンディショナルコメント)を試してみたが、これをテンプレートのskin内に入れても効かず(skin自体が内部CSSに変換される模様)、body内に入れるとエラーになるので断念。

次にハックを片端から試した結果、IE9用には以下でiframeの横幅を指定。
html:not(:target) iframe要素 { 幅指定\9; }

ついでにIE8用は以下で指定。
html>/**/body iframe要素 { 幅指定\9; }

具体的にはこんな感じになる。1番目にIE以外(GeckoとWebkit)用、2番目にIE8用、3番目にIE9用を指定。サイドバー内の横幅は216pxなので、これでIE8とIE9ではスクロールバーの部分が横に押し出されて隠れることになる。
/* For other browsers */
.sidebar iframe#sidebar-gadget2 {
width: 222px !important;
}
/* For IE8 */
html>/**/body .sidebar iframe#sidebar-gadget2 {
width: 238px\9 !important;
}
/* For IE9 */
html:not(:target) .sidebar iframe#sidebar-gadget2 {
width: 239px\9 !important;
}

2.9. Syntax Highlighter

コードをきれいに整理して見せたいときに。

[関連]
クリボウのBlogger Tips: コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
Ascii.JP: 技術系サイトに必需品! ソースコードは鮮やかに

その後、上の方法ではうまく行かなくなったようなので、以下に従って設定。


3. その他

3.1. ページタイトルの変更

ページタイトル(ブラウザのタイトル行に表示されるもの)は、Blogger標準では

[ブログのタイトル]: [エントリのタイトル]

となっているが、これを

[エントリのタイトル]

などに変更できる。


テンプレートの以下の部分を変更すればいい。
<title><data:blog.pageTitle/></title>

現在ではページタイトルをタイトル行に表示せず、短いタブの中にだけ表示するブラウザが支配的なので(Google Chromeに加えてFirefox4、IE9も)、これをしないとタブがずらっと並んだ状態ではページを判別できなかったりする。