はてなダイアリーに関連記事、Evernoteのクリップを表示させる。
はてなダイアリーには自動で関連記事を表示する機能がない。
そのため、カテゴリを指定して、手動で設定する必要がある。
まだ、Evernoteのクリップ(Site Memory)のブログパーツにも対応していない。
zenbacなら、その2つを一気に解決だ。
「zenback」とは?
zenbackは、Six Apartが提供するブログパーツ。
ブログの記事の下や横に、ブログの記事に関連する情報を表示ができる。
(はてなの機能と重複してる部分も多いけど。)
- ソーシャルボタン(12/1 新機能)
- その記事に関係する自分のブログ記事
- その記事に関係する他のzenbackユーザーのブログ記事
- その記事についての最新のTwitterのつぶやき
- その記事についてのはてなブックマーク
- その記事の最新のアクセス元(リファラ)
はてなダイアリーでもブログパーツとして使用可能。
利用方法は以下に記載してあるが、使用しているデザインによって多少CSSの変更が必要。
はてなダイアリーでのzenback利用方法
1.zenbackからコードを取得する
「新規登録 & コードを取得する」からメールアドレスとパスワードを登録して
コードを取得する
8)スクリプトコード取得
<!-- X:S ZenBackWidget --><script type="text/javascript">document.write(unescape("%3Cscript")+" src='http://widget.zenback.jp/?base_uri=http%3A//d.hatena.ne.jp/orangeclover/&nsid=92504041938015211%3A%3A92504051064793614&rand="+Math.ceil((new Date()*1)*Math.random())+"' type='text/javascript'"+unescape("%3E%3C/script%3E"));</script><!-- X:E ZenBackWidget -->
10)カスタマイズ
表示項目の選択と表示する順序を入れ替えることができる。
関連記事と関連リンクの違いは、前者が、自分のブログの中にある関連記事へのリンクで
後者が、(zenbackに登録されている)他のブログでの関連記事へのリンク。
11)デフォルトのCSSを取得する
ブログパーツのid/class構造についてから、デフォルトのCSSをの設定を取得する。
現在のCSSの設定は以下になっている。
/* zenback default style ----------------------------------------------------------------------*/ .zenback { font-size:13px; background:#ffffff; padding:12px 0; line-height:18px; } .zenback .zenback-module{ clear:both; padding-bottom:12px; } .zenback .zenback-heading{ font-size:14px; margin:0 0 0 10px; padding-left:23px; float:left; display:inline; } .zenback .zenback-entries .zenback-heading { background:url(images/icon-article.png) 0 center no-repeat #7fc527; } .zenback .zenback-links .zenback-heading { background:url(images/icon-link.png) 0 center no-repeat #f5b868; } .zenback .zenback-referrer .zenback-heading { background:url(images/icon-referrer.png) 0 center no-repeat #d3be5d; } .zenback .zenback-entries ul { border-top:1px solid !important; border-top-color:#7fc527 !important; padding-top:7px !important; } .zenback .zenback-links ul { border-top:1px solid !important; border-top-color:#f5b868 !important; padding-top:7px !important; } .zenback .zenback-referrer ul { border-top:1px solid !important; border-top-color:#d3be5d !important; padding-top:7px !important; } .zenback img { border:none !important; } .zenback .zenback-pending{ background:#f6f6f6 !important; text-align:center !important; margin:0 0 10px 0 !important; color:#555 !important; padding:5px 0 !important; clear:both !important; border-top:1px solid !important; border-top-color:#7fc527 !important; } .zenback .zenback-heading span {/* tab */ color:#ffffff !important; padding:0 5px 0 27px !important; padding:0 5px !important; line-height:170% !important; font-weight:bold !important; vertical-align:middle !important; display:block !important; float:left !important; border-left:1px solid #fff !important; } .zenback .zenback-entries .zenback-heading span{ background:#7fc527 !important; } .zenback .zenback-links .zenback-heading span{ background:#f5b868 !important; } .zenback .zenback-referrer .zenback-heading span{ background:#d3be5d !important; } .zenback .zenback-module ul { padding:5px 10px 0 10px !important; margin:0 0 10px 0 !important; clear:both !important; word-wrap:break-word !important; zoom:1 !important; } .zenback li { list-style:none !important; /*display:block !important;*/ text-align:left !important; float:none !important; } .zenback ul.zenback-list{ zoom:1; margin:0 !important !important; } .zenback ul.zenback-list li {/* icon list */ padding-left:24px !important; margin-bottom:5px !important; background:url(images/icon-listmark.gif) 0 3px no-repeat !important; } .zenback .zenback-links ul.zenback-list li { background:url(images/icon-listmark-link.gif) 0 3px no-repeat !important; } .zenback .zenback-referrer ul.zenback-list li { background: none !important; padding-left:0 !important; } .zenback .zenback-referrer ul.zenback-list li img{ margin:0 3px 0 0!important; } .zenback li img { margin-right:3px !important; vertical-align:middle !important; } /* more read */ .zenback .zenback-morereadbtn{ text-align:center !important; border:1px solid #c5c5c5 !important; } .zenback .zenback-morereadbtn a{ color:#9e9e9e !important; text-decoration:none !important; font-weight:bold !important; display:block !important; padding:3px 0 !important; background:url(images/bg-moreread.gif) 0 bottom repeat-x !important #fff; } .zenback .zenback-morereadbtn a:hover{ background:url(images/bg-moreread_on.gif) 0 bottom repeat-x !important #f3f3f3; } .zenback-itemdate { font-size:11px; color:#999; } /* powerd by */ .zenback .zenback-powered { border-top-style:solid; border-top-width:1px; border-top-color:#7fc527; padding:0; text-align:right; zoom:1; } .zenback .zenback-powered:after { content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both; } .zenback .zenback-powered span { background-color:#7fc527 !important; color:#ffffff !important; padding:0.3em 0.4em !important; font-weight:bold !important; display:block !important; float:right !important; } .zenback .zenback-powered span img { vertical-align:middle !important; } .zenback-hatebu,.zenback-twitter{ } /* Twitter hatebu common */ .zenback .zenback-hatebu .zenback-heading,.zenback .zenback-twitter .zenback-heading{ } .zenback .zenback-heading a{ background:none !important; text-decoration:none !important; } .zenback .zenback-hatebubtn,.zenback .zenback-twitterbtn{ clear:both; padding:5px 0 !important; margin:0 0 5px 0!important; background:#f4f4f4 !important; text-align:center; } .zenback .zenback-hatebubtn img,.zenback .zenback-twitterbtn img{ vertical-align:bottom !important; } .zenback .zenback-headingwrap{ display:inline; } /* Twitter */ .zenback .zenback-twitter .zenback-heading { background:url(images/icon-twitter.gif) 3px center no-repeat #44c2e4; } .zenback .zenback-twitter .zenback-heading span { background-color:#44c2e4; } .zenback .zenback-twitter .zenback-heading span em{ font-weight:normal !important; font-style:normal !important; font-size:86% !important; text-align:right !important; margin:0 !important; padding:0 !important; text-decoration:none !important; } .zenback .zenback-twitterbtn{ border-top:1px solid #44c2e4; } .zenback .zenback-twitter-name { margin-right:5px; } .zenback-twitter ul.zenback-list li { margin-bottom:5px !important; background:none !important; padding-left:0 !important; } /* Twitter design */ .zenback .zenback-twitter ul{ /*border-top:1px solid #44c2e4 !important;*/ padding-top:5px !important; color:#000 !important; } .zenback-twitter ul.zenback-nodesign li { min-height:48px !important; margin-bottom:10px !important; padding-bottom:7px !important; border-bottom:1px solid #eeeeee !important; padding:0 0 5px 55px !important; text-indent:0 !important; } * html .zenback-twitter ul.zenback-nodesign li { height:48px !important; } .zenback-twitter ul.zenback-nodesign li img { float:left !important; margin:0 0 0 -55px !important; } .zenback-twitter ul.zenback-nodesign li a { text-decoration:underline !important; font-weight:normal !important; background:none !important; font-style:normal !important; color:#0000FF !important; } .zenback-twitter ul.zenback-nodesign li a:hover { text-decoration:none !important; background:none !important; font-weight:normal !important; background:none !important; font-style:normal !important; } .zenback-twitter ul.zenback-nodesign li .zenback-itemdate a{ font-size:11px !important; color:#999 !important; text-decoration:none !important; font-weight:normal !important; font-style:normal !important; background:none !important; padding:0 !important; } .zenback-twitter ul.zenback-nodesign li .zenback-itemdate a:hover{ text-decoration:underline !important; color:#999 !important; font-weight:normal !important; font-style:normal !important; background:none !important; } /* hatebu */ .zenback .zenback-hatebu .zenback-heading { background:url(images/icon-hatebu.gif) 3px center no-repeat #5279e7; } .zenback .zenback-hatebu .zenback-heading span { background-color:#5279e7 !important; } .zenback .zenback-hatebu .zenback-heading span em{ font-weight:normal !important; font-style:normal !important; font-size:86% !important; text-align:right !important; margin:0 !important; padding:0 !important; text-decoration:none !important; } .zenback .zenback-hatebubtn{ border-top:1px solid #5279e7 !important; } .zenback .zenback-hatebu ul { /*border-top:1px solid #5279e7 !important;*/ padding-top:5px !important; color:#000 !important; } .zenback .zenback-hatebu ul li{ margin-bottom:5px !important; } /* hatebu design */ .zenback-hatebu ul.zenback-nodesign { background:#edf1fd !important; margin:0 0 5px 0!important; padding:5px 10px 5px 10px !important; } .zenback-hatebu ul.zenback-nodesign li { font-size:85% !important; margin-bottom:2px !important; background:none !important; padding-left:0 !important; } .zenback-hatebu ul.zenback-nodesign li img { vertical-align:middle !important; margin:0 !important; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-date { margin-right:3px; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-name { margin-right:3px; } .zenback-hatebu ul.zenback-nodesign .zenback-hatebu-tag { font-size:80%; margin-right:3px; } .zenback-hatebu ul.zenback-nodesign a { text-decoration:underline !important; font-weight:normal !important; background:none !important; font-style:normal !important; color:#0000FF !important; } .zenback-hatebu ul.zenback-nodesign a:hover { text-decoration:none !important; background:none !important; font-weight:normal !important; background:none !important; font-style:normal !important; } /* zenback-news ----------------------------------------------------------------------*/ .zenback #zenback-news{ border:3px solid #80c527; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:12px; position:relative; margin-top:20px; } .zenback #zenback-news .newstitle{ position:absolute; top:-24px; left:-3px; } * html .zenback #zenback-news .newstitle{ top:-21px } *+html .zenback #zenback-news .newstitle{ top:-21px; } .zenback #zenback-news .zenback-newslist{ padding:5px 10px; margin:0; } .zenback #zenback-news .zenback-newslist .zenback-newsitem{ padding:0; margin:5px 0; } .zenback #zenback-news .zenback-newslist .zenback-newsdate{ padding:3px 10px 3px 0; } .zenback #zenback-news .zenback-newslist .zenback-newsdate img{ vertical-align:middle; } /* zenback customize style ----------------------------------------------------------------------*/ /* module background color */ .zenback { background:#ffffff; } /* title color */ .zenback .zenback-heading span, .zenback .zenback-powered span { color:#ffffff; } /* title background color */ .zenback .zenback-heading { border-bottom-color:#7fc527; } .zenback .zenback-entries .zenback-heading span, .zenback .zenback-entries .zenback-heading { background-color: #7fc527; } .zenback .zenback-entries ul { border-top-color:#7fc527; } .zenback .zenback-links .zenback-heading span, .zenback .zenback-links .zenback-heading { background-color:#f5b868; } .zenback .zenback-links ul { border-top-color:#f5b868; } .zenback .zenback-referrer .zenback-heading span, .zenback .zenback-referrer .zenback-heading { background-color:#d3be5d; } .zenback .zenback-referrer ul { border-top-color:#d3be5d; } .zenback .zenback-powered { border-top-color:#7fc527; } .zenback .zenback-heading span, .zenback .zenback-powered span { background-color:#7fc527; }
4.問題点の対処
1)サイドバーと重ならないようにする
.zenback { font-size:13px; background:#ffffff; padding:12px 0; margin:0 250px 0 0; ★ここを追加 line-height:18px; }
2)最新の記事ではなく、5日分の記事のしたに表示されるので気づかない
管理 > 記事の設定
表示設定 で 1ページの表示日数を1にした。
Firefoxで、アドオンのAutoPagerやGreasemonkeyのAutoPagerizeみたいに
ページを自動で読み込んでしまう場合はダメ。
いつまでもフッター部分は表示されない。( ̄_ ̄ i)