お楽しみはこれからだ！: Bloggerをいじる

とりあえずは、コードをエントリーに書くことが多くなるとは思うので、綺麗に見せるためにGoogle Code Prettifyを導入してみる。

ここからコードをダウンロードできるんだけど、はて、このJSファイルとCSSファイルはどこにアップロードするんでしょうね。困りますね。面倒なのでずるいとは思いつつ、SVN-Tranc(google-code-prettify - Revision 64: /trunk/src)から直接貼り付けちゃった。てへ。

テンプレートを編集する画面でheadタグ内の<title>の下にダイレクト挿入！

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'
       type='text/javascript'/>
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css'
     rel='stylesheet' type='text/css'/>

後は、コードを載せたい箇所を<pre class=”prettyprint”></pre>で囲むだけ！とは言ってもですね、毎回ソースを開いてそんなことやってられないじゃないか！便利な物はないかな～、と思って行き着いたのが「Windows Live Writer用のプラグインを開発する：CodeZine」。

おっと、いきなりプラグイン開発ですか？そうですか。それもやむなしですね。どれどれ、記事を読んでみると大して難しいことしなくてもこの程度のことならサクッと作れそう。だってpreで囲むだけだし。SmartContentSourceじゃなくてContentSourceで作れるじゃんね。んで、作ったDLLをPluginフォルダに入れとけばイイみたいだし。良し作るか。と、思ってちなみに同じ事考えてる人いるんじゃないかと思って、改めて検索し直してみたら板いた。Vistaのサイドバーガジェットの時の無駄作業を思い出して良かった。あのときも同じようなの作ってる人いたもんね。ちゃんと調べないで作っちゃって損した気分になったし。

Code Prettify for Windows Live Writer – Home

コード見たらビックリだね。こんなに潔いプラグインも珍しい。いや、だって、自分でもきっとこう書く。

次にデフォルトのコメントシステムはいきなりスパムが来たりするくらいなので、速攻で消してとりあえずFriendConnectにしてみたんだけど、TumblrでTypePad Connectを使ってるの思い出した。

Bloggerもサポートしてるよ！と豪語してるだけあって、設置方法もスクリーンショットでテンプレート編集箇所を書いてあったりして、親切だ。

でも、動かなかった。だいたい、書いてあるとおりにやってみたけどダメだった。Bloggerのテンプレートがどうなってる(構造が)のか調べるのも面倒だしな～。このブログに適用してるブログにはそもそもインストール手順に書いてるような項目もないし。インストール手順がデフォルトテンプレートを基準にするのは、そりゃあたりまえだしね。違うデザインのテンプレートを使ってるんだから致し方なし。

かといって、諦めるのはダンディじゃない。無理矢理にでも動かしてやる。大まかな手順は３つ。

１．コメントフォームとコメント一覧を表示する部分のコードを貼り付け。２．コメント件数を表示するアンカーを貼り付け。３．コメント件数を表示するスクリプトを貼り付け。

１と３の作業は手順書通りに出来そう。ちゃんと該当箇所も見つかるし。２の作業は．．．。今度は手順書の場所が見あたらない。なんか、ちょっとテンプレートが違う。

でも、まぁ、同じようなモンだろう、ってことで、↓こんな感じで貼り付けてみた。

    <b:if cond='data:post.allowComments'>
     <h4>
       <b:if cond='data:post.numComments == 1'>
         1 <data:commentLabel/>:
       <b:else/>
         <data:post.numComments/> <data:commentLabelPlural/>:
       </b:if>
     </h4>
    <b:else/>
     <a expr:href='data:post.url + "#comments"'>Comments</a>

で、動かしてもこれがちゃんと表示してくれないんだよね～。上のコードのリンクは表示されてるんだけど、入力フォームが出てこない。こりゃどうしたものか。出てこないってことは、貼り付ける場所を間違えてるんだろう、と。絶対出てくるところに貼り付ければいいじゃん。ってことで、上記Commentsリンクの直下に貼り付けてみた。

    <b:if cond='data:post.allowComments'>
     <h4>
       <b:if cond='data:post.numComments == 1'>
         1 <data:commentLabel/>:
       <b:else/>
         <data:post.numComments/> <data:commentLabelPlural/>:
       </b:if>
     </h4>
   <b:else/>
     <a expr:href='data:post.url + "#comments"'>Comments</a>
<!-- START TypePad Connect -->
<b:else/>
<div class="comments-content">
～ここに手順書のコード～
</div>
<!-- END TypePad Connect -->

これで、どうかな～。うぬ。ちゃんと出るね。

ということで、Friend Connectは削除して、コメントシステムはTypePad Connectで一本化です！スッキリした。

お楽しみはこれからだ！

2009年2月25日水曜日

Bloggerをいじる

dotnetConf2015 Japan

このブログを検索