シンプル＆クリーンなBloggerテンプレート集と導入手順：Simple and Clean Blogger Templates

I've just renewed my theme. There are very simple and clean XML based Blogger templates out there, and changing the look and feel of your blog can be done effortlessly. Make sure you download the current design for backup, before uploading the new XML template.

If you're happy with current design and only need a quick and simple customization, add your favorite image to your header. Here's how (screencast).

Where to Find Cool Templates

Searched by 'Blogger Template,' you may land the followings;

Blogger-Templates
BlogCrowds
BlogspotTemplates
Final Sense
Mashable's best 50
FreshBloggerTemplates


I picked Web 2.0 focused 'Mr. Techie' converted from Free CSS templates by FreshBloggerTemplates, and deleted the header image and downsized the right column width by 70px to keep 500px for entry body.

I was a bit uneasy with its max width of 950px, but nowadays it seems that 1024px is the new 800px for Web Design.


Get code for "AddThis" bookmarking button: Visit iMessengr and click on 'get this code' and Select All to save it. Open your Dashboard > Edit Layout > Edit HTML > Expand HTML > Copy the code right under 'div class='post-body entry-content' and save.

Drop Down link list: Visit here to get your code. Open Dashboard > Add and Arrange Page Elements > Add the code as 'HTML/Java' element.

Snap Page Preview: Visit here to get your code. Save it right below the dropdown link list.


ブログのデザインを変えてみた。今回使ったのは、無料CSSテンプレートをこちらの方がBlogger用に変換した「Mr. Techie」というデザイン。

新テンプレート導入手順

1. スクリーンショット下のDOWNLOADボタンでファイルを保存
2. Bloggerダッシュボード > Edit Layout > Edit HTML > 一番上「Download Full Template」で今のテンプレートを保存（重要）
3. すぐ下の空欄脇の参照ボタンで(1)で保存したXMLファイルを選んでUploadクリック
4. 編集画面下「Preview」クリックで「なんか違うな～」と思ったら左の「Clear Edit」でチャラに。他のテンプレを探し(1)(3)の手順を繰り返します（これが楽しいのよね）。後悔したら(2)で保存した前のデザインを(3)のようにアップロードするといつでも戻れるので大丈夫。
5. 納得したら右の「Save Template」を押します。

因みにここのテンプレでは「メニューバー変更」が必須。これは下から10分の1ぐらいんとこ（div id='header-wrapper'（なんたらかんたら）div id='menu'　の下、ul li でどうぞ。目がチラチラする人はheader-wrapperとブラウザ検索窓入れてハイライトするとはやい。




It's fun to browse through cool designs.これも良さげ。デザインって見るだけで楽しい。
TerraFirma by ~nodethirtythree on deviantART

覚えとくと便利なコツ

「本文の幅を広げたい」
これは上から3分の1ぐらいの　*Outer-Wrapperの下にある「main-wrapper width: 440px;」の数字を500pxとかに増やし、その下の下「#sidebar-wrapper2　width: 160px;」の数字をその分減らします。引き算間違えないで。

「過去アーカイブとアドセンス諸々を入れたい」
Page Elementsで好きな要素をジャンジャン追加、嫌いなウィジェットは削除できるんだけど、Bloggerはjavascript入れると「Add a Page Element」のボタンが隠れて見えない場合も。そんな時はURLの欄に「draft.blogger.com」と入力すると青のDraftのダッシュボードに切り替わって、そっからEdit Layout入ると何故か出てきやがります。

「ブックマークのそのボタンはどこで？」
これはAddThis.comですね。ここで拾うのが手っ取り早い。好きなボタンの下で「get this code」で出てくるコードをSelect Allで全文保存したら、あとはダッシュボード > Edit Layout > Edit HTML > Expand HTML > 編集画面で「div class='post-body entry-content」のすぐ下にコピー＆保存するだけ。（追：日本のブックマークボタンはAddClips.orgで10秒で入手 可能。ここではdivclass='post-footerとp class='post-footer-line post-footer-line-1と2行並んでる上に置きました）

「うちもリンクが増える一方です！ドロップダウンのコードはどこで？」
自動生成マシンでリンクの名前とURL入れて「generate」押すだけ。私は横幅ないから「no button」選んで「text on button」は「LINK」にしてます。日本語も化けないのでオススメ。10個で足りない人は生成したコード見て、option valueから丸ごとコピーしてURLと名前入れ替えて増やして。コードはBloggerではEdit layout > Page Elements で「Java/HTML」として追加します。

「リンクをマウスオーバすると画面が見えるソレはどこで？」
Snapのプレビュー機能です、導入方法はこちら。上記ドロップダウン用コードの下とかに保存。

「クールなテンプレはどこで？」
Blogger-Templates
BlogCrowds
BlogspotTemplates
Final Sense
Mashable's best 50
FreshBloggerTemplates


「なんかすごい面倒くさいんだけど。もっと簡単にできないの？」
クールな横長の写真・イラストをヘッダに埋めるとガラリと印象が変わりますぜい。これは自分や犬の写真・会社のロゴ・落書きでOK。画像にブログ名入ってるんならブログタイトル削除もできるし、導入手順はスクリーンキャスト（英語）で見てね。マウスの動き見るだけで理解できるはず。

-enjoy!