SyntaxHighlighterをウィジェットに

いつのまにかBloggerのテンプレートも若干スマートフォン対応していたので使ってみた

設定→メールとモバイル→モバイル テンプレート
ここで、はいを選択すると有効にできる

ドロップダウンでデフォルトを選択していると
デザインのテンプレートデザイナーで選択しているテンプレートのモバイル用が使われて
テンプレートデザイナーで編集した設定も一部使えるんだけど
いつものノリでHTMLを直接編集すると何故かモバイル用には使われなくなってしまう模様
今まではHEADタグの中に書き加えていたんだけどうまくできなくなってしまった

PC用で変更を加えたテンプレートをモバイル用でも使いたい場合は
HTMLの編集はしてはいけないみたい
なのでウィジェットからSyntaxHighlighterを使えるようにしてみました
というのが以下のスクリプト
JavaScriptはよくわからないから適当にぐぐって書いてみただけなので
もっと良い書き方があるかもしれないけど、、

ガジェットの追加→HTML/JavaScript に貼り付けると使えるようになります
使い方はまえと同じ
ちなみにモバイル用にはウィジェットが表示されないのでハイライトはされない

フィードをBloggerからFeedBurnerにリダイレクトするようにして新しい記事のタイトルをTwitterに自動投稿

タイトル長い、、
やったことはタイトルの通り
いつのまにかこんな便利な事が出来るようになってたんですね
というわけで、きちんと投稿できるかテストの記事です

参考にしたのは以下のサイト
・Blogger のフィードを作成するにはどうすればよいですか？ - FeedBurner ヘルプ
・FeedBurnerからTwitterへ自動投稿可能に - F.Ko-Jiの「一秒後は未来」

あとWebmasterToolを使ってる人はここも参考に
・Blogger を使っていて FeedBurner にフィード管理を移した場合のGoogleWebmasterToolフィードエラー対策

SyntaxHighlighterを使ってみる

・SyntaxHighlighter - Alex Gorbatchev
・Awesome code syntax highlighting made easy | Carter Cole's Blog

どうもソースコードを貼り付けた時に見づらいのでSyntaxHighlighterを入れてみた
以下Bloggerでのやりかた

Bloggerのテンプレートが高機能になってた

こんな感じで殆んどマウスで操作できるようになってた
フォントの種類、色やサイズまで変えられる
今まで弄ろうと思うとすごく面倒だったのでとても簡単になりました
あと、いつの間にか「もっと読む」機能がついてました
という訳でデザイン変えてみました

BloggerのURL命名規則

・クリボウの Blogger Tips: 投稿のタイトルと URL の関係

なんとなくウェブマスターツールを見ていたらこのブログ内に404のページがあると表示されていました
Bloggerのシステム使ってるんだから404にはならないだろって思ったけど
これは他のページからリンクされてるけどそのページが存在しないって意味らしい
ちなみにそのURLは http://lostman-worlds-end.blogspot.com/2008/03/ipod-touch.html
記事の削除はあんまりしないからどうしてかなぁーと思ったんだけど
多分当時削除して書き直したんだと思う

ずっとこの表示が出続けるのも気持ち悪いので同じURLになるように記事のタイトルを設定して
そのページに関連ページへのリンクを作ればいいかと思ったんだけどそうもいかなかった
理由は冒頭のリンク先に書いてある通り

たとえば、Blogger Status をチェックしよう というタイトルの投稿 blogger-status.html を削除し、次に別の Blogger Status が見られない という記事を投稿しても、再び blogger-status.html という URL にはならずに、blogger-status_05.html のように日付が付加されてしまいます。同様に、重複防止のために付加された日付は、その記事を削除して次の投稿をしても引き継ぐことはできません。削除すると永久欠番のように、どこかに URL データが保存されるようですね。

と言う訳でできませんでした、ずっとこのままで我慢するしかなさそうです
これからは削除する時は気をつけようと思います

最後に一応 http://lostman-worlds-end.blogspot.com/2008/03/ipod-touch.html に
関連する記事のリンクを貼っておきます
・iPod touch with Wikipedia (1)
・iPod touch with Wikipedia (2)
・iPod touch with Wikipedia (3)
・iPod touch with Wikipedia (4)

Bloggerのテンプレートを変えてみた

・Blogger Templates
・Familiar Blogger Template - BTemplates
やっぱし黒背景が見やすいです
適当に改造してタイトル非表示にしたりしてます

HaloScan.comでトラックバック機能を追加

HaloScan.comのサービスを利用してトラックバック機能をつけました
Bloggerのテンプレートをアップロードすると
新しいテンプレートを自動で生成してくれるのですが
この方法だとBloggerのコメント機能が使用できなくなってしまいます

今回はBloggerのコメント機能は残しつつ
HaloScanのトラックバック機能を入れたい訳です

そこで参考にしたのはBlogger beta に HaloScan をとりつけるでしたが
そのままではうまくできませんでした
(多分うちがBlogger betaじゃないからかな)

試行錯誤した結果は以下です

必ずテンプレートのバックアップを取っておいてください
何かあったときに元に戻せなくなってしまうかもしれないので

「レイアウト→HTMLの編集」の画面を開いてください
そして「ウィジェットのテンプレートを展開」にチェックを入れます

以下のブロックを探します
これは赤の部分のコードです
投稿者 える 時刻 13:34 0 コメント ラベル: ネット

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>


次に上記の横にTrackbackのリンクを入れたいので
上記のコードのすぐ下に以下のコードを貼り付け
「テンプレートを保存」をクリックしてください
(ユーザ名の部分は自分のユーザ名と置き換えること)
<script src='http://www.haloscan.com/load/ユーザ名' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/ユーザ名/" + data:post.id + "/"' expr:onclick='"HaloScanTB(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a>
</span>


以上で終了です、以下の様になっていれば成功です
投稿者 える 時刻 13:34 0 コメント Trackback ラベル: ネット


復活しました

昨日は「続きを読む」のあたりを弄っていたんですが
ミスってたらしくそれが原因だったみたいです
騒いで申し訳ない

改めてここを参考に「Blogger で「続きを読む」機能を。-- 3.5」
「続きを読む」機能を実装しました

Bloggerって

記事内だけでなくレイアウトなどのHTMLとCSSも直接編集できるんですね
他のブログサービスもできるのかな

レイアウトHTML編集画面はこんな感じ


とりあえずコマンド、ソースコード用に追記しておきました
code {
display: block;
border: 1px solid $borderColor;
background-color: $bgColor;
padding: 1em;
overflow: auto;
white-space: pre;
font-family: monospace;
font-size: x-small;
}