xawa雑記帳: Blogger

Syntax Highlighter を設置した時はテーマに Midnight を選択していたが、ちょっとキツイのでデフォルトに戻すことにした。だが、ページ背景が白で、Syntax Highlighter の背景も白なのでコード部分が目立たないというか境界がわからなくなってしまう。
そこでコード部分に枠をつけてみることにする。

2012年12月23日日曜日

[Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置

Syntax Highlighter 導入メモ第三弾。

前回、テンプレート HTML を直接編集するのを嫌って、CSS カスタマイズで Syntax Highlighter を導入しようとしたがあえなく失敗した。
今度は、JavaScript ガジェットでやってみたところうまくいったのでそのメモ。

基本的には CSS のロードさえ JavaScript の中からできればうまくいくはず。
ここのコードを参考にさせてもらった。

外部cssを動的に読み込む方法
-- Born Neet --

2012年12月1日土曜日

[Blogger] Syntax Highlighter V3 を CSS追加から導入

前回、Syntax Highlighter V3 を導入してみた。

Syntax Highlighter V3 を導入する

これはこれでうまく動作したのだが、テンプレート HTML を編集する必要がある。

あまり、テンプレート HTML をいじりすぎるとどこをどういじったかわからなくなるので、なるべくテンプレートをいじりたくはない。

そこで、テンプレートカスタマイズの「CSSを追加」で行けるか試してみた。
・・・が、あえなく敗退。
今回はその敗退の記録。

2012年11月24日土曜日

[Blogger] Syntax Highlighter V3 を導入する

このブログでは Source コードを載せることが多いのだが、キーワードのハイライトができる Script があったので導入してみる。

Syntax Highlighter

Blogger に導入する際に参考にしたのはこちら。

How to Add Syntax Highlighter(v3) to Blogger Blogs

このページで「 GENERATE SCRIPTS 」をすると、Blogger 用のスクリプトが生成されるので、 Blogger の HTML の編集で「 </head> 」タグの直前に貼り付ける。

今、貼り付けているコードはこんな感じ。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

「 shThemeMidnight.css 」のところは使うテーマによって変わる。ファイル名の形式は「 shTheme<テーマ名>.css」。テーマは以下で Preview できる。

Syntax Highlighter(v3) Themes Demo

ハイライトする言語ごとに必要な JavaScript ファイルをロードする。
上の例では、 JavaScript, Java, PlainText, Scala, Xml(HTML) をロードしている。
使える言語と、記事中で指定する言語Alias、ロードするファイル名の一覧は、

SyntaxHighlighter - Bundled Brushes

に一覧されている。

記事の中で Syntax Highlighter を使うには、

<pre class="brush: html">
[ ここに ハイライトされるコードを書く ]
</pre>

を挿入する。
コード中の「 < 」、「 > 」などは実体参照でエンコードする必要がある。エンコードしないでも動いていたりするが、HTML 的に気持ち悪いし、本家でもエンコードしろと書いてあるのでエンコードして貼り付けている。

他にも、script タグ＋ CDATA で書く方法もあり、エンコードが不要などメリットもあるのだが、記事の内容が Script の一部として記載されるのはさすがに気持ち悪いので pre 方式を採用。
具体的な方法は、

SyntaxHighlighter - Installation

を参照。

2012年10月8日月曜日

[Blogger] Zenbackを設置してみる。

Blog でよく見かける「関連記事」。Blogger にもあんなのがあるといいなぁ、と思っていたのだが Zenback というサービスのものがよさげだったので設置してみることにした。

参考にしたのはここ。

Bloggerにzenbackを設置する
TAKASUN ブログ

Zenback サイトでの登録

以下、実施ログ。

まずは、Zenback サイトでアカウント作成とブログの登録登録。

Zenback のサイトで「新規登録＆コードを取得する」。
メールアドレスと Zenback ログイン用のパスワードを指定。
Blog の URLを入力する。
表示したい項目を指定。
ソーシャルボタン、関連する記事、関連するみんなの記事（必須）、Twitter での反応、
はてなブックマークでの反応、Facebook コメントがある。
Twitter のパスワードもここで指定する。
デフォルトでは全部ついているのでとりあえずそのまま。
不要ならきっとあとで外せるだろう。Twitter のパスワードは未入力のまま。
ブログに張り付けるためのスクリプトが出力される。

出力されたスクリプトはこんな感じ。

<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//xawa99.blogspot.jp/&nsid=107166696824918689%3A%3A107166812789038893&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->

Zenback の管理画面

スクリプトコードを取得すると、Zenback の管理画面に遷移する。
ここでは、挿入するスクリプトの再表示やウィジェットのテーマ、表示する項目、ソーシャルボタン、関連する記事の表示設定が選べる。

関連する記事の表示設定では「サムネール付き」と「テキストのみ」が選べる。
このブログの記事はどこもテキストだらけで代わり映えがしないのでサムネールをつける意味は全くないのだが、とりあえずはデフォルトのサムネールつきのままにしておこう。あとで変える。

ブログにスクリプトを挿入する。

Blogger の管理画面の「レイアウト」で、好きな場所でガジェットの追加をして「HTML/JavaScript」ガジェットを追加する。
そのコンテンツとして先ほどの Script をペースト。HTML の編集をしないで済むので簡単でいい。

表示してみる。

「関連する記事」や「関連するみんなの記事」には「表示されるまで数分〜最大で数日ほどかかります。しばらくお待ちください。」と表示される。
Zenback ブログによると、

zenbackのコードを貼ってから、「関連記事」「関連リンク」が表示されるまで、数時間～最大30時間ほどかかる場合があります。ご了承ください。

ということらしい。
何日かするとこの部分に関連する記事が表示されるようになる。大体２～３日はかかるみたい。
ガジェットを張り付けた位置に、「zenback読み込み中です。」が表示されたままになる場合には Script が間違っている可能性があるので要確認。

一時期、Zenback にブログを登録した直後に表示される Blogger 用の Script が間違っていたらしいので、その場合には、Zenback の管理画面から再度 Script を取得しなおして貼りなおす。

テンプレートカスタマイズ

「HTML/JavaScript ガジェット」だとトップページを含めすべての画面に関連記事一覧が表示される。
関連記事という性格上、個別記事ページだけでよいのだが残念ながらそうはいかない。

個別記事ページのみにする場合にはテンプレートをカスタマイズする必要がある。
swordsmith ブログにそのあたりが詳しく記載されているので、気が向いたらそのうちやってみよう。

2012年10月7日日曜日

[Blogger] 行間を開ける

Blogger を使っていて思うのは微妙に行間が狭いということ。
レイアウトやテンプレートデザイナーの設定にもないので、テンプレートを直接編集しないといけないのかな、と思っていたら、CSS を設定するだけの簡単な方法があった。

2012年8月11日土曜日

[Blogger] 未来の投稿

Blogger で公開するときに、未来の日時を指定してから公開することができる。
今回はそのあたりの挙動を確認してみる。

Blogger で記事を作成して下書きの状態で「スケジュール」を選択し、「日付と時刻を設定」で未来の日時を設定してから「公開」を実行する。
するとこの記事はその時点では公開状態にならず、Blogger 管理ツールの投稿リストで「スケジュール済み」のリストに入る。公開状態ではないのでこの時点で Blogger で公開予定のアドレスにアクセスしても「このブログ内でお探しのページは存在しません。」になる。

あらかじめ指定しておいた日時になると公開状態になりアクセスできるようになる。
管理ツールでも「スケジュール済み」リストから「公開済み」のリストに移動する。

パーマリンク

各記事には記事固有のURLが割り当てられる。
この URL は、「http://xxxxx/2012/10/name-of-post」という形式で公開日の年と月が URL に付与されている。

スケジュールされた投稿の場合、公開ボタンを押した日ではなく実際に公開された年月を使用して URL が付与される。
これは過去の日時を指定して公開した場合も同様で、公開日として設定された日時で URL が付与される。

パーマリンクは一度公開されると公開を取り消して下書きにしないと変更されない。
公開済み記事の公開日時だけを変更しても URL は変わらない。いったん取り消して下書きにしてから再度公開すると、公開年月によって再度 URL が作成される。

スケジュール済みの記事の場合はまだ公開されていないので公開日時を更新すると URL は新しい公開年月のものになる。

スケジュール済みの記事の更新時の挙動

「スケジュール済み」になっている記事の編集画面の上部のボタン群は
「スケジュール」、「下書きに戻す」、「プレビュー」、「閉じる」になっている。

画面右側の「投稿の設定」のいずれかの項目を選択して完了ボタンを押下すると、
「公開」、「保存」、「プレビュー」、「閉じる」に代わる。
ここで「保存」を実行すると記事の公開スケジューリングが取り消されて「下書き」の状態に戻ってしまう。
記事の内容の更新の時にはボタンは「スケジュール」、「下書きに戻す」のままなのだが。

「スケジュール」と「公開」、「下書きに戻す」と「保存」という同じ位置にあるボタンの動きが同じなので、「投稿の設定」で完了した際に上部ボタン群のラベルが変わってしまうバグなのではないかと思う。

公開済みの記事の公開日を未来にする

すでに公開済みの記事の公開日時を未来の日付に変更して「更新」をする。
この場合は、この記事はスケジュールされた記事にはならず公開されたままになる。
この方法を使うと「未来に投稿された」記事を公開することができる。

2012年8月10日金曜日

[Blogger] nbsp

Blogger のテンプレートをカスタマイズしていて気が付いたのだが、「&nbsp」（ノーブレークスペース）が使えない。使うと、

テンプレートの形式が適切でないため、解析できませんでした。 すべての XML 要素が適切に閉じられているかどうかを確認してください。 <br/>XML エラー メッセージ: The entity "sbnp" was referenced, but not declared.
Error 500

というエラーになる。
空白を複数続けても表示時には1つ分にしかならないので、スペースを空けたいときにはノーブレークスペースを使うのだが、これが使えないと、全角空白を使うしかなくなってしまう。
外人さんとか困らないのだろうか？

他は大丈夫だろうか？

さすがに、「 &lt ( < )」、「 &gt ( > )」は大丈夫。
「&（&：アンパーサンド）」、「"（"）」もOK。
「©（© コピーライト）」がNG。自分はあまり使わないけど、使う人は使うと思う。

「©」はエラーになったが、「©」や「©」と書けば © が表示される。
同様に「 」も「   」「 」と書けば期待通りに動作する。

出力される HTML ソースを見て気が付いたのだが、これらの文字参照はそのまま HTML に出力されるのではなく、テンプレートエンジンが評価してしまっているようだ。「 」とテンプレートに記載しておいても「   」と10進表記で出力されている。

「 < 」もエラーにはならなかったので気が付かなかったが、HTML 上はベタに「<」になってしまっている。
なので、「HOGE<BR>HOHE」と記載すると「<BR>」になって改行されてしまう。
「<BR>」と画面上に表示したかったら「&lt;BR&gt;」としないといけない。

テンプレートをカスタマイズするときには気を付けよう。

蛇足だが、テンプレート上に Table 要素を作った際に、tdoby を使ったらエラーになった。TBODY と大文字にすればOK。
THEAD は thead でも問題ない。意味が分からない。
文字参照だけでなく、HTML 要素にも想定外の動きをするものがありそうだ。要注意。

2012年8月9日木曜日

[Blogger] 記事一覧

Blogger で不便なのは、アーカイブページやラベルページで記事の一覧がないこと。
もともと自分のメモ用に書いていたのだが、ある程度記事がたまると自分でも困る。
記事一覧みたいなガジェットを探していたのだが、テンプレートカスタマイズで実現しているブログがあったので早速やってみることにする。

出所は、

Bloggerのアーカイブページやラベルページで記事タイトル一覧を表示

-- Holiday Webmaster Blog
複数投稿表示ページでタイトル一覧をまず表示する

-- クリボウの Blogger Tips

"Holiday Webmaster Blog" では、以下のようなスクリプトになっている。

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<ul id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
    <li>
    <b:if cond='data:post.title'>
      <data:post.dateHeader/> - <a expr:href='"#" + data:post.id'><data:post.title/></a>
    <b:else/>
      <data:post.dateHeader/> - <a expr:href='"#" + data:post.id'><data:post.id/></a>
    </b:if>
    </li>
</b:loop>
</ul>
</b:if>
</b:if>

これをテンプレートに追加するだけで、アーカイブページやラベルページに記事一覧が表示される。
素晴らしい。

ほとんど目的達成してしまっているのだが、「クリボウの Blogger Tips」によると同一日の2つ目以降のポストには「data:post.dateHeader」が入ってこないとのこと。
確かに、Blogger のヘルプにもそう書いてある。

dateHeader がない行でレイアウトがずれてしまうため「クリボウの Blogger Tips」では日付を除去するという作戦をとっているが、日付は表示したいので「なくても崩れない」方式で行くことにする。

というわけで、記事一覧は table 形式で出力する方式に変更。
また、元スクリプトだと静的ページでも記事一覧が出てしまうので、「data:blog.pageType」が「static_page」なら表示しないようにして以下のコードを追加することにした。
挿入する箇所は、前回、テンプレート中で現在表示されているページのタイプを判別した時と同様に

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
の中の
<b:include data='top' name='status-message'/>
の直下。

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<table id='post-title-navigation'>
<span>このページの記事一覧</span>
<b:loop values='data:posts' var='post'>
    <tr>
    <b:if cond='data:post.title'>
     <td>● <data:post.dateHeader/> - </td>
     <td> <a expr:href='"#" + data:post.id'><data:post.title/></a></td>
    <b:else/>
     <td>● <data:post.dateHeader/> - </td>
     <td> <a expr:href='"#" + data:post.id'><data:post.id/></a></td>
    </b:if>
    </tr>
</b:loop>
</table>
</b:if>
</b:if>
</b:if>

うん、いい感じになった。

2012年8月8日水曜日

[Blogger] テンプレート中で現在表示されているページのタイプを判別する。

Blogger のテンプレートカスタマイズではページのタイプ毎に表示したり非表示にしたりというコントロールをすることが多いので、現在表示しているページのタイプを取得する方法を確認しておく。

ページタイプの取得は、data:blog.pageType で取得できる。
Blogger のヘルプによると取得できる値は以下の3つ。

item　　　---　個別の記事
archive ---　アーカイブページ
index　　 ---　インデックスぺージ

の三種類。

早速やってみよう。

まずはテンプレートの編集。ウィジェットの中に書き込むので、「レイアウト＞ HTML の編集」で開く「レイアウト > HTML の編集」画面で「ウィジェットのテンプレートを展開」にチェックを入れる。
するとウィジェットの中身も展開されるので表示されているテンプレートもぐわっと長くなる。

今回は記事のタイプを、各記事が表示される部分の上に表示しようと思うので、
main セクションの Blog1 ウィジェットの中に記述する。具体的には、

<b:section class='main' id='main' showaddelement='no'>

というセクションの中の

<b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>

の中に記述することになる。

その長いウィジェットの中のどこが良いかということになるのだが、

<b:include data='top' name='status-message'/>

の直下あたりが良いらしい。

(by クリボウの Blogger Tips -- 複数投稿表示ページでタイトル一覧をまず表示する)

この status-message は、モバイル用のメインの

<b:includable id='mobile-main' var='top'>

の中と、モバイル以外用のメインの

<b:includable id='main' var='top'>

の中にあるので必要な方（もしくは両方）に記述すればいい。
今回は、普通（非モバイル）で表示できればいいので「id='main'」のほうに書く。

記述する内容。
今回は、if 文の使い方の練習も兼ねて、pegeType 値とそれに応じた文字を表示するようにする。

**** ページのタイプはこれだ ****<br/>
<data:blog.pageType/><br/>
<b:if cond='data:blog.pageType == "index"'>インデックス
<b:else />
  <b:if cond='data:blog.pageType == "archive"'>アーカイブ
  <b:else />
    <b:if cond='data:blog.pageType == "item"'>アイテム
    <b:else />不明なページタイプ
    </b:if>
  </b:if>
</b:if>
<br/><br/><br/>

プレビューでそれっぽくなっていることを確認して、「テンプレートを保存」。

さて、表示してみよう。
トップページ：

**** ページのタイプはこれだ ****
index
インデックス

トップページはインデックスページなのか。

個別記事ページ：

**** ページのタイプはこれだ ****
item
アイテム

アーカイブページ：

**** ページのタイプはこれだ ****
archive
アーカイブ

ラベルページ：

**** ページのタイプはこれだ ****
index
インデックス

ラベルの記事一覧ページは「インデックス」ページなのか。トップページと同じタイプになっている。

静的ページ：

**** ページのタイプはこれだ ****
static_page
不明なページタイプ

こんな値が返るなんてどこにもかいてなかったじゃん。

実験結果。 data:blog.pageType で取得できる値は以下の4つだった。

item　　　　---　個別の記事
archive 　 ---　アーカイブページ
index　　　 ---　インデックスぺージ
static_page ---　静的ページのぺージ

[Blogger] Tableのスタイル

記事を書いててテーブルを使うことが時々あるので、ある程度見栄えがするようにテーブルのスタイルを作った時のメモ。

ブロガー管理画面 > テンプレート > カスタマイズ > アドバンス > CSSを追加

追加した CSS はこんな感じ。

table.standard {
    border: 1px #000000 solid;
    border-collapse: collapse;
    border-spacing: 0;
}

.standard th {
    padding: 5px;
    border: #000000 solid;
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

.standard td {
    padding: 5px;
    border: 1px #000000 solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

table タグ自体はレイアウト目的でも使っているので、クラスに standard をつけるようにした。
これでこのような table を書くと、

<table class=standard frame="box" rules="all">
<tr><th>Resource</th><th>Daily Quota</th></tr>
<tr><td>Datastore Entity Put Ops </td><td> 4,376</td></tr>
<tr><td>Datastore Entity Delete Ops </td><td> 4,254</td></tr>
<tr><td>Datastore Index Write Ops </td><td> 43,274</td></tr>
</table>

こんな感じのテーブルになる。

Resource	Daily Quota
Datastore Entity Put Ops	4,376
Datastore Entity Delete Ops	4,254
Datastore Index Write Ops	43,274

ちょっとヘッダの色が薄い気もするがｏｋ。

2012年8月7日火曜日

[Blogger] Bloggerのテンプレートに関する情報源について

テンプレートをいじる前にテンプレートの文法について確認しておこう。
知っておくべきは、テンプレートで使用できるカスタムタグと、テンプレート内で使えるデータについて。
ひととおり、Blogger のヘルプに記載されているので関連情報のありかをまとめておく。

ブログヘルプホーム
ブログのレイアウトの HTML を編集する

テンプレートを編集するための情報の起点。
レイアウト用ページ要素タグについて

テンプレートの body セクション内で、サイドバーやフッターなどの領域を指定する b:section タグ、および b:section の中にウィジェットを配置する b:widget タグについて記載されている。
レイアウト用フォントタグとカラータグ

CSSをカスタマイズするための b:skin タグについての情報。たぶんあまり使うことはないかと。
レイアウト用ウィジットタグ

b:widget タグの中に記載できるタグについての情報。
コンテンツを記載する b:includable 、b:include タグや、データを取得する b:data タグ、制御構造を実現する b:loop 、b:if、b:else についての情報が記載されている。
レイアウトデータタグ

b:data タグで使用できるデータの種類を一覧したページ。
ウィジットの種類ごとに使えるデータが違うので、ウィジットの種類ごとに利用可能なデータのリストが記載されている。
たぶん、一番参照することになるページ。

2012年8月2日木曜日

[Blogger] テンプレートのバックアップとリストア

Blogger をカスタマイズするには、いろいろなガジェットを使ったりHTML/JavaScript ガジェットを使ったりすることもできるが、多少凝ったことをするとなるとテンプレートに手を入れることになる。

テンプレートに手を出す前に必須なのがテンプレートのバックアップ/リストアなので、一度テスト用のブログを使ってやってみよう。

バックアップは、「テンプレート」画面で右上の「バックアップ/復元」ボタン。「テンプレート＞バックアップ/復元」ダイアログで「テンプレートをすべてダウンロード」を実行。「すべて」と書いてあるが別に複数のテンプレートをまとめてダウンロードするわけではなくて現在使用しているテンプレートがダウンロードされる。
テンプレートは、template-3026474201568311803.xml というファイル名のXMLファイルとしてダウンロードされる。何回ダウンロードしてもファイル名は同じ。使用するテンプレートを変更するとサイズは変わるがファイル名はやはり同じ。ブログが違えばファイル名も変わるので、「template-」の後の数字は、ブログ毎の識別子か何かなのだろうか？

復元してみよう。まず検証用にダウンロードした時とは違うデザインを選んで適用しておく。
「バックアップ/復元」ボタン。「テンプレート＞バックアップ/復元」ダイアログで「ファイルを選択」。ファイル選択ダイアログが表示されるが、ファイルの形式が「すべて」になっている。ダウンロードしたのがXMLファイルなのだからここでもファイルの形式はXMLにしておいてくれると楽なのに。ファイルを選択してアップロード。元のデザインに戻った。アップロードが完了した時点でブログに適用される。

元テンプレートとの関連付け

デザインはバックアップ時に戻るのだが、親テンプレートとの関連は切れてしまうようだ。

バックアップ時	復元後

また、たとえばSimpleテンプレートを基にして作成→バックアップ→復元しても、画面上は動的ビューをカスタマイズしたようになってしまうので注意。

ガジェットについて

ガジェットの復元についても確認してみた。
位置情報などは元に戻るようだが、内容については部分的に復元される。

たとえば、「HTML/JavaScript」ガジェット。
配置位置を変更してもバックアップ時の場所に戻る。タイトルが変更されていても元に戻る。しかし、内容が変更されていても元には戻らない。実際、テンプレートファイル中にも

<b:section-contents id='sidebar-right-1'>
<b:widget id='HTML2' locked='false' title='てすと' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>

となっていて、タイトル情報までは記録されているが内容までは記載されていない。
テンプレートをバックアップしてもガジェットの内容までは復元されないことには留意するべき。

このHTML/JavaScriptガジェットがレイアウトから削除した後で復元をしてみると、ガジェットも復元されるのだが、内容はやはり削除時の内容で復元された。
このあたりは動きから類推するしかないがガジェットは削除後もデータとしては Blogger に記録が残っていてその値が使われているのだろうか。

2012年8月1日水曜日

[Blogger] カテゴリ別記事一覧をつけてみた

ブロガーのラベルページでは、指定したラベルの付いた記事群が表示されるが一覧がないのであまり使い勝手がよくない。かといって手動で作るのもなんなので調べてみたらこんなのがあった。

他にもいくつか見つかったがだいたいソースはここのようだ。

2012年7月28日土曜日

[Blogger] Blogger の画像ファイルの扱いについて

このブログで今まで主に使っている画像ファイルは「ドリトル」実行結果なので非常にシンプルなのが多い。なので、減色しても全く問題ないので、16 Color ( 4 bit ) PNG にしてサイズを小さくしている。
アップロードするファイルは数 KB ほどの物が多い。

Blogger では、画像を記事に埋め込むと元のファイルとは別にインライン表示用の画像が生成される。
ところが、3 KB ほどのサイズの元画像がインライン表示用には 10 KB 程になってしまったりと元画像よりサイズが大きくなってしまうことがよく発生する。いったいどういうことなの？

というわけでBloggerでの画像ファイルの扱いについて調べてみた。

2012年7月23日月曜日

サイトマップの登録

Google のウェブマスターツールで「サイトマップの登録」という機能がある。
使い方が良く解らなかったのだが、 Googleにサイトマップを登録する（Bloggerブログ版）にわかりやすい解説があったのでやってみた。

2012年7月3日火曜日

ページガジェットの罠

Bloggerに静的ページを追加した。

で、ページガジェットを追加しようとして、「レイアウト画面」でガジェットを追加しようとした。そうしたらページガジェットは「追加済み」となっていて追加できない。

いろいろ見て回ったのだが、結局わかったことは、

ページ画面で「ページの表示形式」が「表示しない」になっていた

ことが原因だった。
この時は明示的にページを追加する必要があるみたい。
これを「サイドリンク」に変更して解決。

登録: 投稿 (Atom)

● 2014年2月23日日曜日 -	[Blogger] 「このブログは Blogger の利用規約に違反しているため…」への対応
● 2013年5月18日土曜日 -	[Blogger] Blogger の概要ページのチャート
● 2012年12月30日日曜日 -	[Blogger] Chromeで Syntax Highlighter のレイアウトが崩れる
● 2012年12月29日土曜日 -	[Blogger] Syntax Highlighter V3 に枠をつけたりとか。
● 2012年12月23日日曜日 -	[Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置
● 2012年12月1日土曜日 -	[Blogger] Syntax Highlighter V3 を CSS追加から導入
● 2012年11月24日土曜日 -	[Blogger] Syntax Highlighter V3 を導入する
● 2012年10月8日月曜日 -	[Blogger] Zenbackを設置してみる。
● 2012年10月7日日曜日 -	[Blogger] 行間を開ける
● 2012年8月11日土曜日 -	[Blogger] 未来の投稿
● 2012年8月10日金曜日 -	[Blogger] nbsp
● 2012年8月9日木曜日 -	[Blogger] 記事一覧
● 2012年8月8日水曜日 -	[Blogger] テンプレート中で現在表示されているページのタイプを判別する。
● -	[Blogger] Tableのスタイル
● 2012年8月7日火曜日 -	[Blogger] Bloggerのテンプレートに関する情報源について
● 2012年8月2日木曜日 -	[Blogger] テンプレートのバックアップとリストア
● 2012年8月1日水曜日 -	[Blogger] カテゴリ別記事一覧をつけてみた
● 2012年7月28日土曜日 -	[Blogger] Blogger の画像ファイルの扱いについて
● 2012年7月23日月曜日 -	サイトマップの登録
● 2012年7月3日火曜日 -	ページガジェットの罠