実際にBlogを書くときの作業効率UPと記事の見栄えを良くする方法など、Google Bloggerだけではなく、便利なブックマークレットを利用してUsabilityを上げるTipsなど紹介しますので参考にして頂ければ幸いです。
Twitterのツイートをブログなどに埋め込む「BlackBird bookmarklet」
Real-time curation » Blog Archive » Blackbird bookmarklet: publish a tweet in html 
Twitterの個別Tweetページで、こちらのブックマークレットを利用すると背景から内容、TwitterのIDまで綺麗にブログに貼り付けることができます。
しかし読み出しているAPIに問題があり、最近のTweetで実行するとPost URLの末尾の2ケタが四捨五入され正しくコピーされない状態でした。
また、Tweetした内容部分のLinkは「target="_new"」が追加されるので、クリックした時に新しいタブで開くようになっていますが、「Twitter ID」「timestamp（日時）」「source（via ○○）」の部分は「target属性」は無く、ページがそのまま開くようになっており記事の外部リンクとしては今ひとつな感がありました。
日時についても、アメリカのサービスのためタイムゾーンが日本のGMTとズレて表示される問題がありました。
そこで、+Takehiro Takahashi 氏の協力のもと新しくブックマークレットを修正いたしました。
下記Linkをブックマークバーにドラッグ＆ドロップしてください。
使用方法は、個別のTweetページでブックマークレットを実行するとHTMLタグが生成されます。
Sample 元のブックマークレットを使用したもの
Sorry for the long wait. Blog updated at http://t.co/i9c8VjbD
p0sixninja
BlackBird JPを使用したもの
Sorry for the long wait. Blog updated at http://t.co/i9c8VjbD
p0sixninja
Going to the UK vs. Portland game tonight. Blogpost also coming later tonight on greenpois0n.com
p0sixninja
Link先を見ると、Chronic-Dev teamが発見したiOS 5の5つのUserland Exploitは発表したのが早すぎたのか、5.0.1でAppleに塞がれてしまったようです。
このような形で使用することができます。WordPressの「Blackbird Pie」というサービスが終了して「BlackBird bookmarklet」を利用するようになった方は、そのまま使用されてるかと思いますので、正しいURLとなるこちらをShareして広めてもらえるよう協力お願いします(*･ω･)*_ _))ﾍﾟｺﾘﾝ
ブログやサイトのリンクをサムネイル付きで表示させるブックマークレット
ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記 
ShareHtmlはお気に入りのサイトのブログで紹介する為のBookmarklet、FocusHtmlはGoogleリーダーの共有メモを一括でブログで紹介する為のBookmarkletです。
ウェブページのサムネイル画像を作成するサービス『HeartRails Capture』を利用して、上記のような綺麗で分かりやすいLinkを作成してくれるサービス『ShareHtml』です。
文字だけでは目立たないLinkも、サムネイルとちょっとした説明文があることで(￣ー￣)ｂｸﾞｯ!っと見やすくなりますね。好みのスタイルにカスタマイズできるので、Link先を参考に『ShareHtmlメーカー』でブックマークレットを作成しておくと便利です！
Google IMEなどの単語登録を利用して、よく使うタグを登録しておく
ブログを書くときの時間短縮とタイプミス防止のテクニックとして、単語登録を有効活用する方法がお勧めです。
<a href="" target="_blank"></a>
<span style=""></span>
<p style="text-align:center;"></p>
<div id=""></div>
<blockquote></blockquote> ...etcFirefoxのアドオンを利用して作業を効率化する
Blogを書くときのツールはユーザーにより変わってくるかと思いますが、ぼくの場合「Firefox」を普段利用しています。
実際にBlogを書く上で使っているアドオンは2つだけです。
Make Link | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト 
コンテキスト (右クリック) メニューから、HTML、Wiki 記法、あるいはプレーンテキストなどの形式で、リンクをクリップボードへコピーできるようにします。独自のリンク形式を作成することも可能です。
参考：使用しているショートカット
アンカータグの作成
<a href="%url%">%text%</a>
アンカータグにtarget="_blank"を付ける
<a href="%url%" target="_blank">%text%</a>
アンカータグにtarget="_blank"を付けListタグで囲む
<li><a href="%URL%" target="_blank">%text%</a></li>
アンカータグ（target="_blank"）にはてブ数追加
<a href="%url%" target="_blank">%text%</a> <a href="http://b.hatena.ne.jp/entry/%URL%"><img src="http://b.hatena.ne.jp/entry/image/%url%"></a>
画像imgタグの作成
<img src="%url%">
imgタグで75pxに指定
<img src="%url%" width="75" height="75">
Rainbow Color Tools :: Add-ons for Firefox 
ブラウザ上の表示色を調べてくれるColorPicker
StatusBarに虹のアイコンが追加され、クリックした時にブラウザ上の色を調べることができる。
参考Link：Mozilla Re-Mix: ウェブページの色を抽出・分析できるFirefoxアドオン「Rainbow」
モバイル用テンプレートをカスタマイズしてスマートフォンでの視認性を上げる
設定＞メールとモバイル＞モバイル テンプレートを選択から「カスタム」を選択
（新しいデザインの場合：テンプレート＞「モバイル」の歯車をクリックして「カスタム」）
PC用テンプレートをできるだけ引き継いだモバイルテンプレートが作成されます。
本文に記述したJavascriptも適用されるので、SNSボタンやSyntaxhighlighterなど好みのページ構成を作成することができます。また、HTMLの編集で「mobile='yes'」とすることで、ウィジェットも表示させることができます。
「ブログアーカイブ」ウィジェットをモバイルテンプレートに表示する例
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>他に「.mobile」とすることで、モバイル用のCSSも調整することができるようになりました。
画像は「width」を指定することにより自動的に縮小されていましたが、Youtubeやtableなどは指定した大きさの幅になっていたため、モバイル環境で閲覧する際に横にはみ出した状態で見栄えが悪くなってしまうという問題がありました。
そこで「.mobile」を使用しCSSで調整することで、画面内に収まった表示が可能となりました。
.mobile table, .mobile iframe{
height:auto !important;
width:auto !important;
}Kuriboさんが詳しく解説されているので、参考にして下さい。
クリボウの Blogger Tips: モバイルテンプレートもカスタマイズ可能に 
iPhone や Android 端末からブログにアクセスしたときに表示されるテンプレートのことですが、今回新たにこちらもカスタマイズ可能になりました。 ...
個別ページから前後の記事への表示をタイトル名に変更する
通常は「次の投稿」「前の投稿」といった表示で、クリックして開いてみないと前後の記事が何か分かりません。
もし、気になる記事タイトルが表記されていれば、ユーザビリティUPと共に直帰率改善にもつながると考えられます。そこで、zerippeさんの作成したjQueryプラグイン 「bLinker」を使用するとリンク先の記事タイトルを表示させるようにすることができます。
リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker" : とある変人の超備忘録 
リンク先の記事タイトルを自動挿入するjQueryプラグイン "bLinker" ...
設置方法はリンク先にて説明されていますが、アレンジを加えてみたので簡単に紹介します。
1．デザイン＞HTML の編集から <head> タグ内にjQueryを読み込むCodeを追加
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>2．『bLinker v1.0』こちらからプラグインをDownloadして外部ファイルとして置く
<head> タグ内にbLinkerを読み込むCodeを追加
<script src="（ファイルのURL）/blinker.js"></script>3．ウィジェットのテンプレートを展開にチェックし、以下のように変更する
「Ctrl+F」で「b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'」を検索
この部分を変更します。
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable><b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blinker blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blinker blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<script>$(function(){$.blinker().load();});</script>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>4．CSSで表示の調整をする
sampleとして、このBlogで使用しているCSS
#blog-pager-newer-link, #blog-pager-older-link {
background: -moz-linear-gradient(center top , #657E95 0%, #586D84 40%, #586D84 60%, #657E95 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #657E95), color-stop(40%, #586D84), color-stop(60%, #586D84), color-stop(100%, #657E95)) repeat scroll 0 0 transparent;
background-color:#586D84;
border-radius: 3px 3px 3px 3px;
font-size: 60%;
padding: 5px;
height: auto;
width: 35%;
}
#blog-pager-newer-link a, #blog-pager-older-link a {
color: #FFFFFF;
display: block;
height: 30px;
}
#blog-pager-newer-link:hover, #blog-pager-older-link:hover {
opacity: 0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
#blog-pager-newer-link a:hover, #blog-pager-older-link a:hover {
text-decoration: none;
}
おわりに
ブログは個人の日記的なものであると共に自分自身のデータベースにもなり、その内容が見た人にとって有用なものであれば重要な情報源にもなります。
ホームページなど特定のジャンルに絞ったウェブサイトと違って、時事性の高いものを容易に情報共有できることから、第三者の視点で創り上げていくと自然と読者も集まってくるものと考えています。かと言って、あまりにジャンルがバラバラな記事になってくると全体のコンテンツとしてバランスが崩れてしまうので、その辺りは上手くつながりを持たせていく必要がありますね。
つまり一つの個人的データベースであると共に、第三者から見ても「分かりやすい」「読みやすい」ページの作成を心がけて書くと、後々の自分自身が見た時にも役立つものが出来上がると考えます。
そのためには、他の様々なウェブサイトを参考にすることと過去の記事を見直し悪い部分を改善していくことがポイントになってきます。僕自身まだまだ勉強不足なので、他の方のBlogや企業サイトなど参考にさせて貰っています。
ですが、やはり自分が書きたいと思うものを形にすることが一番大切で楽しいものですね。
という訳で、長くなりますのでこの辺で…少しでも参考にしてもらえれば幸いです。
関連記事
- Bloggerに最適 Picasa画像のフルサイズリンクをHTMLタグで表示させるUserScript
- Blogger カスタマイズ Tipsまとめ
- 自分の指定した任意の場所でJavascriptを実行させる Tipsまとめ
- 知っておきたいFacebookのOGPをBloggerに対応させる活用法
Newer Post
