8th way to explore the world: カスタマイズ

Bloggerの設定に関する覚え書き。

[基本]
クリボウのBlogger Tips
Bloggerカスタマイズ情報ブログ
Google BloggerブログHacks Tips Tweaks
Bloggerヘルプフォーラム

1. エントリの編集

1.1. 画像の表示サイズ

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

[関連]
Bloggerで画像の表示サイズを変更する方法
記事部分の幅を変える

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

1.2. 表の挿入

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

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

工程としては、例えば以下のようなもの。

Excelで原案を作成（セルの結合が関係する作業はExcelが楽）。
ホームページビルダーに貼り付けてhtml化（Excelでhtml形式で保存するやり方では不要なタグが大量に入るので）。セルに付いた不要なタグを削除する等、整形。見出しセルはthタグにする。
テキストをEmEditorに貼り付け。不要なスペースを置換で削除。改行も削除（範囲選択→「編集」→「選択範囲の変換」→「改行を削除」。改行が残っているとバグっぽいことが起きることがある）
Bloggerの編集画面に貼り付け。

thタグとtdタグの見え方はテンプレートで指定できる。

1.3. Syntax Highlight

現在はGoogle Code-Prettifyを使用。テンプレートのheadの前にスクリプトを挿入。各エントリでコードをpreで囲んだ上で、<pre class="prettyprint">とする必要がある。

2. デザイン

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

テンプレートのHTMLに手を入れれば変更可能（テーマ -> マイテーマの右の設定アイコン -> HTMLを編集）。

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

ページタイトル（ブラウザのタイトル行に表示されるもの）は、Blogger標準では[ブログのタイトル]: [エントリのタイトル]となっているが、これを[エントリのタイトル]などに変更できる。

[関連]
Change Title for Blogger Post Pages
テンプレートの以下の部分を変更すればいい。

2.3. ラベルの見せ方

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

[関連]
Bloggerのラベル(タグ)を2列で表示させる

基本はこれに従うが、長いラベル名のときに、ラベルの途中で改行されるのも、それを避けるためにラベルを短くするのも変なので、

widthの指定は外す。
改行を禁止するために「white-space: nowrap」を入れる。
IE特有のタグ（word-wrap）による改行を禁止するために「word-wrap: normal」を入れる（冒頭でbreak-wordと指定が入っているのをキャンセルする）。

ただし、タグクラウド形式は数が増えるとタグを探しにくくなるので、ほどほどに留めた方がいいと思う。

2.4. Googleカスタム検索

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

元のスタイルシートはgsearch.cssとdefault.cssなので、これらを参考にしてテンプレートの以下の後にスタイルシートを設定すればいい。

<style type='text/css'>

例えば検索結果から投稿日時を除くには、以下を入れる（gsearch.cssでinlineに指定されていたのをnoneにオーバーライド）。ただし、IEでは効かない模様。

.gsc-blogResult .gs-blogResult .gs-relativePublishedDate,
.gsc-newsResult .gs-newsResult .gs-relativePublishedDate {
display : none;
}

また、レイアウトはインラインスタイルシートでも設定可能で、

の部分を、例えば幅と位置が固定されるように、以下のようにすることもできる。

なお、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タグの位置で、有効にするには<head>の直後に入れる必要がある。

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

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

2.5. Flickrのバッジ

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

[関連]
Create your own Flickr badge

このスクリプト中の画像指定の意味は、以下のようなもの。

count=2（画像数。初期設定の3から2に修正）
display=random（ランダム表示）
size=t（サイズはサムネイル）
layout=h（水平配置）

2.6. Twitterアイコン

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

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

8th way to explore the world

カスタマイズ