AmebloEnjoyMethod

アメブロカスタマイズ情報やhtmlやcss、jQuery等やライフハック記事をお届けしています。


テーマ:
$AmebloEnjoyMethod


最近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;
}


擬似要素を使って、見出し文字の横にアクセントをつけた。

共有ボタンエリア


$AmebloEnjoyMethod

#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でマウスオーバー時にアニメーションつけてます。

Twitter



$AmebloEnjoyMethod


#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のタイムラインに似せるように作りました。

はてなブックマーク


$AmebloEnjoyMethod

#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と同じ感じに。

関連記事


$AmebloEnjoyMethod

#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にも対応してほしいな~と思うこのごろでした。
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

ameblogerさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。