はてなダイアリーの「シンタックスハイライトが強力」な点を確認してみました。

下記のブログの記事を拝見して、以前より「はてなダイアリーは使いやすそうだな」と思っていたこともあり、「シンタックスハイライトが強力」な点を確認してみました。

ITエンジニア向けブログにはてなダイアリーを勧める理由
http://d.hatena.ne.jp/nullpobug/20110129/1296237810

はてなのアカウントは作っていたのですが、ブックマークぐらいしか使っていませんでした。「はてなダイアリー」のブログを作成して、プログラムのソースを貼り付けました。

のーんびりと Webプログラム はてなバージョン
http://d.hatena.ne.jp/ariki4160/

ソースを、下記の記法に従って記載すれば、

>|プログラムの指定|
ここにソース
||<

各言語にあったハイライトにて、キーワードを色分けして表示してくれます。このBloggerでは、ソースの表示に「Syntax Highliter」を使っていますが、はてな記法の方が書きやすく、編集画面の使いやすさもありました。「はてなダイアリー」の方が優れているように思います。

画面デザインの変更についても、このBloggerでやっている修正ぐらいは出来ました。「はてなダイアリー」がいいことは分かりました。

Bloggerのデータを「はてなダイアリー」にインポートできるのかを検証してみました。Bloggerでは、「Blogger Atom エクスポート形式」でデータをエクスポートします。「はてなダイアリー」では、はてな日記データ形式、Movable Type形式の記事データからのみインポート可能です。移行は出来ないようです。どちらのデータも結局テキストデータ（XML）なので、テキスト加工をすれば、移行はできるかもしれませんが、そこまではしません。

Bloggerと「はてなダイアリー」のメリット、デメリットをまとめました。

Blogger

・無料で利用可能
　・複数ブログ
　・アクセス解析統計情報
　・アフィリエイト制限なし

はてなダイアリー

・はてな記法により、記載が楽、見栄えも良い
・下記のものは有料
　・複数ブログ
　・アクセス解析統計情報
　・アフィリエイト制限解除

Facebookのページも作りたいこともあり、はてなには引かれながらも、Bloggerの方が無料で出来る範囲が広いのでBloggerを利用していきます。

ブログへの投稿を自動でTwitterにツイートできるように設定しました。

ブログを更新したことを、Twitterに投稿する場合、今使っているBloggerであれば、記事の下の方に表示している「Twitterで共有する」ボタンを押せば、ツイートできます。しかし、デフォルトでツイートされる内容にブログタイトルが含まれているため、ほとんど使っていません。

その代わりに、記事タイトルと「【ブログ更新しました】」の文字と、goo.gl URL Shortererで短縮したURLを手動でアップしていました。

もっと楽をしたいと思い、自動でブログの投稿がツイートできる方法を調べてみました。色々なサービスがありました。見つけた中から、friendfeedを使って、自動ツイートの設定をしました。

friendfeed
http://friendfeed.com/

まずトップページから、Twitterのアカウントでログインします。

ログインした画面の「設定」をクリックします。ダイアログが表示されるので、「Twitter」投稿の優先設定をクリックします。

Twitter 関連詳細設定画面にて、「Check 'Cc Twitter' box by default」「FriendFeed での会話ではなくソース サイトにリンクする（コメントには適用されません）」「 Post my FriendFeed entries on Twitter by default」にチェックを入れると、「以下サービスからのエントリーを投稿」の中の「以下で選択したサービス」の選択が出来るようになります。その状態で、自分のブログにチェックを入れます。最後に「保存を変更」をクリックします。

Twitterとfriendfeedの連携認証は必要です。

これで設定完了。あとは、ブログに投稿をするだけで、何もしなくても、ブログの記事タイトルと、短縮したURLをツイートしてくれます。これで少し楽になりました。

今年も一年ありがとうございました。このブログ（Blogger）の記事のタイトル周りのCSSを変更しました。

このブログのデザインについては、「Blogger テンプレート デザイナー」のシンプルカテゴリのブルーを使っています。ただ、デフォルトの記事タイトルの扱いが弱いような気がしていました。気にはなっていたのですが、そのまま使っていました。もう少し、記事タイトルが強調出来るように修正をしました。

編集するのはCSSですが、Bloggerの場合、テンプレートファイルとCSSが一緒になっているので、そのファイルを編集します。管理画面のデザインタブの中にある「デザイン編集」のページにある「テンプレートを編集」の内容を変更します。

記事の部分を目立たせるように、タイトルの横に青いラインを配置して、フォントが弱かったので、フォント指定を変更しました。2箇所のソースを変更しました。

■変更前　その1

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

■変更後　その1

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  padding:  0 0 0 .30em;
  border-left: 7px solid #66bbdd;
}

■変更前　その2

■変更後　その2

変更前

変更後

今年一年、TwitterやBlogでお世話になった皆様、ありがとうございました。来年も宜しくお願いします。

このブログ（Blogger）にFollow meのボタンを付けました。生成したコードを管理画面で貼り付けるときには、HTMLエンコードが必要です。

よく見る「Follow me」のボタンを、このブログに付ける方法を調べてみました。

付け方は、下記のサイトで教えていただきました。

Blogger でサイドに Twitter の Follow me のバッジを付ける
http://jutememo.blogspot.com/2009/12/blogger-twitter-follow-me.html

「Follow me」のボタンは、下記のサイトのサービスを利用して表示しているようです。

Twitter "Follow" Badge for your site/blog
http://www.go2web20.net/twitterFollowBadge/

このサイトで必要な設定をして貼り付けるコードを生成します。
Bloggerの管理画面にて、用意したコードを貼り付けます。

しかし、コードをそのまま貼り付けても、表示されません。タグの「<」や「>」をエンコードしないと、Bloggerでは貼り付けても反映されません。

HTMLエンコードフォーム
http://kawama.jp/php/encode_html.php

上記のサイトにて、 HTMLエンコードをしたコードを貼り付けます。

これでOKです。表示され、正常に動作しました。