最近zenbackの動作が良好なので復活。
デザインを変更しようと思って色々とcssで弄ってみました。
読み込み速度もそんなに気にならないレベルになってた。
ってことでブログをやっている方に再びオススメします。
では早速各ブログの導入方法まとめへ。
各ブログサービスへの設置方法
書こうと思ったら既にまとめられている方がいました。
こちらで色々とまとめられていますね。
■ブログサービスごとのZenback設置方法まとめ - NAVER まとめ
zenbackのデザインの変更方法
■ZenbackのHTML/CSSコード 図解付き解説 - Zenback デザインハックブログ
上記リンクにHTML構造とCSSのクラスが解説されています。
んで自分のzenbackもデザイン変えてみたので、コードを晒します。
あくまで変更した部分だけなので、こういう風なデザインにも出来ますよ～ってことで。
（ちなみにIE対策は一切考慮していません）
全体のデザイン
#zenback-widget .zenback-module{
padding:20px;
background:#ffffff;
-webkit-box-shadow: 0 0 0 100px rgba(255,255,255,0) inset;
-moz-box-shadow: 0 0 0 100px rgba(255,255,255,0) inset;
box-shadow: 0 0 0 100px rgba(255,255,255,0) inset;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
transition: 0.5s linear;
}
#zenback-widget #zenback-social-button .zenback-module-content:before, #zenback-widget #zenback-related-article .zenback-module-content:before, #zenback-widget #zenback-related-keywords .zenback-module-content:before, #zenback-widget #zenback-twitter .zenback-module-item:before, #zenback-widget #zenback-hatena-bookmark .zenback-module-item:before, #zenback-widget .zenback-ad .zenback-module-item:before, #zenback-widget .zenback-module-item-footer:before, #zenback-widget #zenback-social-button .zenback-module-content:after, #zenback-widget #zenback-related-article .zenback-module-content:after, #zenback-widget #zenback-related-keywords .zenback-module-content:after, #zenback-widget #zenback-twitter .zenback-module-item:after, #zenback-widget #zenback-hatena-bookmark .zenback-module-item:after, #zenback-widget .zenback-ad .zenback-module-item:after, #zenback-widget .zenback-module-item-footer:after{
visibility:visible;
}
#zenback-widget div, #zenback-widget img, #zenback-widget ul, #zenback-widget li, #zenback-widget iframe, #zenback-widget span, #zenback-widget a{
line-height:1.4;
}
ここでtransitionを設定していますが実際には共有ボタンエリアにしか使っていません。まだここはどんなアニメーションつけるか考案中（もしかしたらこのままかも）
各見出し
#zenback-widget .zenback-module-label span,#zenback-widget .zenback-module-label a{
font-size:18px;
margin:0 0 20px 0;
position:relative;
}
#zenback-widget .zenback-module-label span:before,#zenback-widget .zenback-module-label a:before{
content: "";
border-top: 5px solid #000;
position: absolute;
top: 2px;
left: -15px;
width: 20px;
}
#zenback-widget .zenback-module-label span:after,#zenback-widget .zenback-module-label a:after{
content: "";
border-top: 5px solid #000;
position: absolute;
top: 10px;
left: -15px;
width: 20px;
}
擬似要素を使って、見出し文字の横にアクセントをつけた。
共有ボタンエリア
#zenback-social-button > .zenback-module-content:before{
content: "To make life fun web Share"!important;
color: #000;
font-size: 18px;
margin: 0 0 30px 0;
font-weight: bold;
}
#zenback-social-button:hover {
-webkit-box-shadow: 0 0 0 0px rgba(255,255,255,0.5) inset;
-moz-box-shadow: 0 0 0 0px rgba(255,255,255,0.5) inset;
box-shadow: 0 0 0 0px rgba(255,255,255,0.5) inset;
background: #f1c40f;
}
css3でマウスオーバー時にアニメーションつけてます。
#zenback-widget #zenback-twitter .zenback-module-item{
border-bottom: 1px solid #e8e8e8;
font-size:14px;
margin:0;
padding:10px;
}
#zenback-widget #zenback-twitter .zenback-module-item a:hover{
text-decoration:underline;
}
#zenback-widget #zenback-twitter .zenback-module-item:nth-child(1){
border-top: 1px solid #e8e8e8;
}
#zenback-widget #zenback-twitter .zenback-module-item:hover{
background:#f5f5f5;
}
#zenback-widget #zenback-twitter .zenback-module-item-image{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#zenback-widget #zenback-twitter .zenback-item-header span.zenback-module-item-username{
font-weight: bold;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif;
color: #333;
}
#zenback-widget #zenback-twitter .zenback-item-header span.zenback-module-item-username:hover{
color:#0084B4;
}
#zenback-widget #zenback-twitter .zenback-module-item-tools a:nth-child(1):after{
content:"返信";
}
#zenback-widget #zenback-twitter .zenback-module-item-tools a:nth-child(2):after{
content:"RT";
}
#zenback-widget #zenback-twitter .zenback-module-item-tools a:nth-child(3):after{
content:"お気に入りに登録";
}
Twitterのタイムラインに似せるように作りました。
はてなブックマーク
#zenback-widget #zenback-hatena-bookmark .zenback-module-item{
border-bottom: 1px solid #e8e8e8;
font-size:14px;
margin:0;
padding:10px;
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-item:nth-child(1){
border-top:1px solid #e8e8e8;
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-item:hover{
background:#f5f5f5;
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-item span.zenback-module-item-tags a{
background: bisque;
padding: 3px;
}
#zenback-widget #zenback-hatena-bookmark .zenback-module-item span.zenback-module-item-tags a:hover{
background:transparent;
text-decoration:underline;
}
若干twitterと同じ感じに。
関連記事
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb{
margin:0 15PX 0 0;
padding: 15px;
font-size: 13px;
background: lavenderblush;
position:relative;
-webkit-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb:hover{
background:#f1c40f;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb:nth-child(1){
margin-left:5px;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail{
position:relative;
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title{
margin-top:10px;
}
#zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title a{
color:#333;
font-weight:bold;
}
あとがき
フラットデザインにしようと思ったので、zenbackもそんな感じにあわせようと思った。
フラットデザインめちゃくちゃ難しい事に気づいた。
あ、そういえばここでgoogle analyticsの流入計測の見方が書いてありました。
■Google Analyticsで、「関連するみんなの記事」（旧：関連リンク）からの流入を 簡単に確認できるようになりました - Zenback ブログ
個人的には共有ボタンにpocketにも対応してほしいな～と思うこのごろでした。