更新の期間が結構空いたので、モチベーションをあげるためにblogのデザインをちょっといじってみました。

やったこと

以前はこんな感じのデザインでした。

Blogger Templates
http://btemplates.com/

このサイトでテンプレ落としました。

ブログだけじゃなくてほかにもいろいろ使えそうなものがあって、すごく素敵な感じ。

デザインの勉強したい時に見ても良いかもしれません。

テンプレのzipをDLしたら解凍して、blogger編集ページ内の

テンプレート＞バックアップ/復元＞ハードドライブ上のファイルからテンプレートをアップロードする

でアップロードすると使えるようになります。

そのまま使うのもちょっとあれなので、少しだけ手を加えました。






１、ブログタイトルの変更

言い忘れてましたがブログのタイトル変えました。

変更と言っても

「頭の掃き溜め」→「Atama no hakidame」

とローマ字表記になっただけなんですが。

理由としては、Google Web Fontsを使ってみたかったからです。

豊富な種類のフォントを無料でつかえるwebフォントですが、残念ながら日本語には対応していないようなので、英字表記のタイトルに変更してみました。フォントの変更も気軽にできるので楽ですね。

今回はlinkタグの中で

@import url('フォントのURL');
site-title {
        font: bold 66px 'フォント名', cursive;
}

を設定してフォントを変更しました。ちなみにサイトタイトルのフォントはLimelightです。






２、SNS系ボタンをまとめて追加

twitterやfacebookなどのソーシャル系のボタンは、忍者おまとめボタンというツールで一括管理、設定できます。

忍者ツールズ
http://www.ninja.co.jp/

このページから忍者おまとめボタンを選択して、自分が設置したいボタンをセットにしました。

ボタンセットのソースを取得したら、それをbloggerで適用させます。

テンプレート＞HTMLの編集＞続行

で、blogのソースを直接いじることができるので、

上記のタグ内に、忍者おまとめボタンのソースを貼付けちゃえばOKです。

ちなみにblogger自身にもソーシャルボタンを表示する機能があります。

ただ、サービスが限られているので、今回は使いませんでした。

重複している場合は以下のチェックを外すと、消すことができます。

レイアウト＞ブログの投稿（編集）＞[共有]ボタンを表示する

３、ソースコードハイライトを入れた。

これからソースコードの一部をUPすることもあるかと思いますが、

そのまま記事本文と同じように表示すると見づらくてたまらないので、ソースコードハイライトとやらを導入してみました。

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html
ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve
http://wada811.blogspot.com/2012/02/syntaxhighlighter30.html

上記のサイト様の手順をそのまま実行したらできました。

４、投稿テンプレートを作った。

なんか設定できるらしいです。

blogger編集ページの

設定＞投稿とコメント＞投稿テンプレート

のテキストエリアにソースを貼付けておくと、記事編集時に本文に最初からそいつらがいるみたいです。

いつも使う見出しなどの設定はこちらに書いておくと良いみたいですね。

５、テンプレのcssとHTMLをちょっといじった。

記事タイトルの表示の仕方があんまり好きじゃなかったので、borderやら何やらcssをいじって現在のスタイルに変更。

また、ブログの左上にある「HelloWorld.」というリボンみたいなやつを、cssで作ってみました。

プレビュー時に出てくるやつを参考に、３色ラインみたいな感じにしてみました。
ちょっとお気に入り。

６、ページの追加

bloggerさんすごいなーと思ったんですが、なんとデフォルトでページ機能がついてるらしいです。

折角なのでaboutページとworksページを追加してみました。

（中身ほとんど何もないけど）

ブログをいじるの楽しいですねー。

テンプレ作りとか、やってみると結構勉強になりそう。

時間かけて設定したので、今後はちゃんと備忘録として活用していけたら良いな…。

そういえば

新しく我が家にMacBook Air（Mac OS X 10.7.4）が来ました。かわいいです。

・参考

Bloggerの記事下に忍者おまとめボタンを設置するにはどうしたらいいですか？

http://www.ninja.co.jp/omatome/help/faq/5726/

Google Web Fonts

http://www.google.com/webfonts/

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する 

http://wada811.blogspot.com/2012/02/bloggersyntaxhighlighter.html

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす 

http://wada811.blogspot.com/2012/02/syntaxhighlighter30.html