象と散歩

Post Date：2010年11月15日　

Evernoteにクリップするボタンを追加する

SNS連携ではありませんが、日頃お世話になっているEvernote（エバーノート）なので、ブログに簡単にコンテンツをクリップできるEvernoteサイトメモリーのボタンを追加してみました。

Evernoteサイトメモリーページにある『GET STARED』をクリックするか、画面をスクロールして『サイトメモリーを設置する』で幾つかのパラメータをセットするだけで簡単にコードが生成されます。

Evernoteサイトメモリーの使い方（設定方法）

ボタンの選択

ブログに使用するボタンを選択します。

クリッピングの設定

『Webサイト名』にブログ名（ブログタイトル）を入れます。説明にあるように設定していないとクリップするときにドメイン名となります。

『クリップするコンテンツ』は「main」とします。設定していないとブログ全体がクリッピング対象となります。このブログの場合は、設定していないとサイドバー含めてクリップされてしまいます。

コードのコピー

コードをテスト＆コピーとありますが、カット＆コピーの間違いでしょうか。

生成されたコードは下記となります。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

このコードをそのまま利用してもよいのですが、画像に枠線が残るため、<img>タグに style='border: none' を追加します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" style="border: none" /></a>

BloggerにEvernoteサイトメモリーを設置する

Blogger利用者が、Evernoteサイトメモリーを設置する場合には下記の手順により、ヘッダー部に表示されます。クリップされたときの題名には、<title>タグに設定されている内容が反映されます。

1．Bloggerの『デザイン → HTMLの編集』からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

Evernoteクリップボタンを試してみる

ブログに表示されたEvernoteサイトメモリーを試してみます。

クリップがクリックされると、Evernoteにログインしていなければ、ログイン画面が表示されます。

Evernoteにログインするとクリップの確認画面が表示されます。『Clip from』には、上記設定の『Webサイト名』が表示されます。左下の『クリップ』をクリックするとEvernoteの新規ノートに登録されます。

クリップが成功すると下記の画面が表示されます。

-- iPadから送信

Post Date：2010年11月3日　

引用（blockquote）を格好よく表示する

blockquote（引用）がカッコよいサイトが多いので真似してみようと思いましたが、自分にはスタイルシートを変更する能力もないので、参考になるサイトを探してみました。

MIYA氏のCSS Lectureのblockquote(引用部分)をCSSでデザインするサンプル集に掲載されていた「サンプル2」を利用させていただきました。サンプルコードと画像も一括ダウンロードできます。

引用文は下記のように表示されるようになりました。

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

blockquote(引用部分)をCSSでデザインするサンプル集

Bloggerでblockquoteのスタイルシートを変更する

デザイン >> HTMLの編集を開いて、最初に『テンプレートをすべてダウンロード』でバックアップを取得します。

『ウィジェットのテンプレートを展開』をチェックし、blockquoteでソースを検索して現在の設定内容を確認します。

利用しているテンプレートに依存すると思いますが、自分の使っているテンプレートでは、下記のようになっていました。

変更前

.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

blockquote(引用部分)をCSSでデザインするサンプル集のサンプル2をベースに下記のように変更します。

画像のURLには上記サイトからダウンロードしたimage2.gifを事前にpicasaにアップロードするか、bloggerの下書きに画像を挿入して取得したURLを指定します。

変更後

.post blockquote {
background: url(http://画像のURL) no-repeat 2% 6%;
padding: 10px 20px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
font-size: 90%
color: #696969;
}
.post blockquote p  {
margin-bottom: 12px;
}
.post blockquote .origin    {
text-align: right;
margin-bottom:0;
}   
.post blockquote .origin a  {
color: #2D88B3;
}

スタイルシートの説明

■【background: url(image/blockquote2.gif) no-repeat 2% 6%;】の「％」部分は、画像の表示位置です。ピクセル（px）でも指定できます。

■【padding: 10px 20px】は内側の余白で、10pxが上下の余白、20pxが左右の余白になります。

■【fontsize: 90%】は引用文のフォントサイズです。本文とのメリハリを付けるために本文で使用しているフォントサイズより少し小さくして90％にしています。

■【color: #696969】は引用文の文字色です。こちらも本文とのメリハリを付けるために色を薄くしてDim Grayにしています。

変更後に『テンプレートを保存』をクリックすれば完了です。

下記のようにhtmlを記載すると上記の表示例のように表示されます。

<blockquote>
<p>ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。
そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。</p>
<p class="origin">
<a href="http://www.css-lecture.com/log/css/blockquote.html" target="new">blockquote(引用部分)をCSSでデザインするサンプル集</a></p>
</blockquote>

Post Date：2010年11月1日　

Bloggerで関連記事（関連ブログ）を表示する

Google Analyticsの解析データからみると、自分のブログの流入は、70%が検索エンジンからで、GoogleとYahooの比率は85:15です。再来訪は25%、平均参照ページ数が1.4ページ、直帰率は85%（新規訪問86%、再訪問84%）にもなります。

ランディングページとしては、トップページが20%なので、上記結果を踏まえて考えると大半のブログ訪問者は、検索した結果でサイトに訪れて、当該ページだけを見て離脱ということになります。

ブログの内容はさて措き、もう1ページをみてもらうためには、閲覧している内容に関連するブログ記事を表示するのが一番良いのではないかと考えました。Bloggerには関連記事を表示するような機能は実装されていないので、ググってみると、blogger-related-posts という吻合するネーミングのサイトを見つけました。ここに記載されているSmarter Related Posts Widget for Google Blogger - v2.0を使うと簡単に関連記事（若しくは最新記事）を表示するウィジェットが作成できるので記しておきます。