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から送信

2010年11月3日水曜日

引用(blockquote)を格好よく表示する

このエントリーをはてなブックマークに追加
blockquote(引用)がカッコよいサイトが多いので真似してみようと思いましたが、自分にはスタイルシートを変更する能力もないので、参考になるサイトを探してみました。

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

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

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>

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を使うと簡単に関連記事(若しくは最新記事)を表示するウィジェットが作成できるので記しておきます。

Related Posts Widget for Google Bloggerの導入

ウィジェットの設定をするためにSmarter Related Posts Widget for Google Blogger - v2.0の中央にあるDemo1-4の何れかを選択します。

blogger-related-posts

下記の「Related Posts Widget 設定画面」左側のOptionsで幾つかのパラメータを設定するだけで簡単にBlogger用のウィジェットが作成できます。

Blog URL(必須)

対象ブログのURLを入力します。この項目の入力は必須です。

Mode

関連記事を表示するのであれば初期値のRelated Posts Widgetです。
最新記事(直近n件)を表示するのであれば、Recent Posts Widgetを選択します。

Max Posts

表示される記事数で初期値は5件です。

Related Posts Widget for Google Blogger - v2.0

表示内容

『Show Titles?』を「yes (default)」、『Show Thumbs?』を「no」にすると画像なしのブログ・エントリーのタイトルだけが表示されます。Options右下の『Update Demo & Code』をクリックすると右側のDemoの下にサンプルが表示されますが、Blog URLが入力されているとデモ画面が表示されないようです。

Related Posts Widget for Google Blogger - v2.0

『Related Title』は表題になります。初期値は右側デモ画面に表示されている「Related Posts」です。取り敢えず、「関連記事」と入力します。

Related Posts Widget for Google Blogger - v2.0

最後に『Update Demo & Code』をクリックして、右中央の『Add Bloger』をクリックします。

Related Posts Widget for Google Blogger - v2.0

Bloggerにログインしてあれば(すれば)、ウィジェットの追加画面に遷移します。ウィジェットを追加ボタンをクリックして、Bloggerのデザイン画面でウィジェットの配置を決めます。




以上で関連記事を表示するウィジェットの作成は完了です。

実際の表示を確認すると、下記が右二段目が関連記事の表示になります。どの様な条件で類似の内容を抽出しているかは説明を熟読していないのでわかりませんが、それなりのものが候補としてあげられています。

象と散歩:関連記事の表示(右2段目)

ブログ本文の最後(フッター)に含めることができないかと試みましたが、Thumbなしの設定ができなかったのでまた時間があるときにでもリトライしてみます。

-- iPadから送信

 
"));