はてなのヘルプページでは教えてくれない、かっこいいはてなダイアリーをつくるための記法TIPS
はてなダイアリーは「はてな記法」という、記事を書くために便利な呪文がいくつもあり、大変重宝しています。ですが、はてなダイアリーのヘルプやはてな記法一覧に載っていない気がする、かっこいい（？）ダイアリーを作るお気に入りTIPSがあるので、まとめてみたいと思います。
はてなフォトライフの画像以外の画像の回りこみ
はてなフォトライフの画像をはてなダイアリーで使う場合は、ワンボタンで回りこみ指定ができます。が、例えば別の場所・・・flickrやTwitPicなどの画像のでも、簡単に回りこみ指定ができます。
＜こんなサンプルで大丈夫か （エルシャダイキャラ弁）
具体的には、画像を貼るときのimgタグ（<img ◯◯◯◯◯◯> の中のどこか）に
class="hatena-fotolife hatena-image-left"
を追加。これは画像を左にしてそれ以降の内容を右に回りこませる呪文なので、画像を右にしたい場合はleftのところをrightにします。
ちなみにTwitPicのやり方は以下。
会話文
- §*╹◡╹)
- せんせー！ガンダムについて教えてよ！
- （◕‿‿◕）
- めんどくさいな
最近ガンダム入門の記事などで使っている会話文風の書き方。これ、はてな記法の「定義リスト記法」というのを使っています。カンタンですね。
:（顔文字１）:台詞台詞台詞台詞台詞 :（顔文字２）:台詞台詞台詞台詞台詞
記事タイトルに反してヘルプには掲載されているのですが、記事作成時のインタフェースにボタンが無いので存在自体を知らなかったのです・・・。長文になっても自動でインデントが綺麗にそろいますし、台詞部分内で<br>で改行もできます。色分けはお好みで。
iPhoneアプリの紹介
こういうiPhoneアプリの紹介て自分でつくろうと思うとめんどうなんですよね・・・iTunes開いてアプリ検索して、リンクURL調べて・・・などなど。しかもアイコン付きとかになるとなおさら。このダイアリーではiPhoneアプリを紹介するときは AppHtmlというブックマークレットを使わせていただいています（大感謝！）。
こちらの「AppHtml 小アイコン付 for Browser」を使っています。ブックマークに登録しておけば、アプリを紹介したいときにクリック→アプリ名検索→結果をコピペ で簡単にアプリ紹介できてしまいます。
さて問題はたいていの場合はてなのCSSにこの書き方に対応したCSS文が入っていないわけで・・・そのまんまコピペだけだと少し不恰好に出力される可能性があります。このダイアリーでは、詳細デザインのスタイルシートに以下のようなCSS文を追加しました。
.AppInfo{
margin: 1em 5px;
padding: 1em;
border: dotted 3px #e0e0e0;
font-size: 85%;
_width: 100%;
}とはいえ今使っているブログデザインに合うかどうかはわからないので、.AppInfo{◯◯◯}の中身は、お使いのデザインの書籍紹介用デザイン「.hatena-asin-detail{◯◯◯}」の中身をコピペするのがいいと思います。
カラフルなキーワードクラウド
最近このブログで書かれたキーワードを、多いのが目立つように表示してくれるキーワードクラウド。これはkeywordcloudモジュールを使っています。サイドバーに入れることができます。楽しいですよね。
ところが、たいていのデザインではカラフルになっていないと思います。このダイアリーではピンク系のカラフルキーワードクラウドにするためのCSS文は以下のような感じになっています。詳細デザインのスタイルシートに追加/編集するとできるかと思います！
/*:: keywordcloud ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
ul.keywordcloud {
margin: 0;
padding: 0;
line-height: 1.5em;
}
ul.keywordcloud li { display: inline; }
.keywordcloud li a{ text-decoration: none; }
.section .keywordcloud li a{ text-decoration: none; }
a.keywordcloud0 { font-size: 80%; color: #567d9d;}
a.keywordcloud1 { font-size: 100%; color: #897c9d;}
a.keywordcloud2 { font-size: 120%; color: #a57c9d;}
a.keywordcloud3 { font-size: 140%; color: #897c9d;}
a.keywordcloud4 { font-size: 160%; color: #897c9d;}
a.keywordcloud5 { font-size: 180%; color: #bf79b5}
a.keywordcloud6 { font-size: 200%; color: #bf79b5}
a.keywordcloud7 { font-size: 220%; color: #e771b4;}
a.keywordcloud8 { font-size: 240%; color: #e771b4}
a.keywordcloud9 { font-size: 260%; color: #db00aa;}
a.keywordcloud10 { font-size: 280%; color: #db00aa;}
.section a.keywordcloud0 { font-size: 80%; color: #567d9d;}
.section a.keywordcloud1 { font-size: 100%; color: #897c9d;}
.section a.keywordcloud2 { font-size: 120%; color: #a57c9d;}
.section a.keywordcloud3 { font-size: 140%; color: #897c9d;}
.section a.keywordcloud4 { font-size: 160%; color: #897c9d;}
.section a.keywordcloud5 { font-size: 180%; color: #bf79b5}
.section a.keywordcloud6 { font-size: 200%; color: #bf79b5}
.section a.keywordcloud7 { font-size: 220%; color: #e771b4;}
.section a.keywordcloud8 { font-size: 240%; color: #e771b4}
.section a.keywordcloud9 { font-size: 260%; color: #db00aa;}
.section a.keywordcloud10 { font-size: 280%; color: #db00aa;}
