ZenbackのHTML/CSSコード 図解付き解説 【2013/08/29 更新】
- 2013/08/29 おしらせ欄まわりなどアップデートしました。
ZenbackのHTML/CSS構造は下図のようになっています。
- #zenback → Zenback全体を囲っています
- #zenback-widget → Zenbackウィジェット全体を囲っています
- #zenback-各モジュール名.zenback-module → 各モジュール全体
- .zenback-module-label → 「関連するみんなの記事」といったタイトル
- .zenback-module-content → 各関連記事のアイテム
Zenback側では、#zenback-widget以降の各要素に対してスタイルを記述しています。 皆さまの環境でCSSを書かれる際には、さらにその上位の#zenbackを付与して、次のように書いていただくと、ZenbackのCSSより優先して適用されます。
#zenback #zenback-widget { /* ここにスタイルを書く */ }
実際のHTML/CSSのコードは以下をご覧ください。
HTML
<div id="zenback"> <div id="zenback-widget"> <div id="zenback-social-button" class="zenback-module"> <div class="zenback-module-content"> <div class="zenback-module-item item-twitter">【ツイートボタン】 </div> <div class="zenback-module-item item-hatena-bookmark">【はてなブックマークボタン】 </div> <div class="zenback-module-item item-mixi-check">【mixiチェックボタン】 </div> <div class="zenback-module-item item-evernote-clip">【Evernoteクリップボタン】 </div> <div class="zenback-module-item item-google-plus">【Google+1ボタン】 </div> <div class="zenback-module-item item-facebook-like">【Facebook いいねボタン】 </div> <div class="zenback-module-item item-twitter-follow">【Twitterフォローボタン】 </div> </div> </div> <div id="zenback-news-hasimage" class="zenback-module"> <div class="zenback-module-label"> <a target="_blank" href="【おしらせページヘのリンク】">おしらせ</a> </div> <div class="zenback-module-content"> <ul class="zenback-module-list"> <li class="zenback-module-item"> <div class="zenback-module-item-thumbnail"> <a href="【おしらせリンク先】" target="_blank"> <img src="【おしらせ画像】" class="zenback-module-item-image" alt="【おしらせタイトル】"> </a> </div> <div class="zenback-module-item-header"> <a href="【おしらせリンク先】" target="_blank">【おしらせタイトル】</a> </div> <div class="zenback-module-item-content"> <span class="zenback-module-item-text"> <a href="【おしらせリンク先】" target="_blank">【おしらせ本文】</a> </span> </div> </li> </ul> </div> </div> <div id="zenback-related-article" class="zenback-module"> <div class="zenback-module-label"> <span>関連する記事</span> </div> <div class="zenback-module-content"> <ul class="zenback-module-list"> <li class="zenback-module-item hasthumb"> <div class="zenback-module-item-thumbnail"> <a href="【リンク先URL】"> <img src="【リンク先画像】" class="zenback-module-item-image"> </a> </div> <div class="zenback-module-item-title"> <a href="【リンク先URL】">【リンク先タイトル】</a> </div> </li> </ul> </div> </div> <div id="zenback-related-links" class="zenback-module"> <div class="zenback-module-label"> <span>関連するみんなの記事</span> </div> <div class="zenback-module-content"> <ul class="zenback-module-list"> <li class="zenback-module-item"> <div class="zenback-module-item-header"> <img src="【リンク先Favicon画像】" width="16" height="16" class="zenback-module-item-image"> </div> <div class="zenback-module-item-content"> <a href="【リンク先URL】" target="_blank" class="zenback-module-item-title">【リンク先タイトル】</a> </div> </li> </ul> </div> </div> <div id="zenback-related-keywords" class="zenback-module"> <div class="zenback-module-content" style="border:0;"> <ul class="zenback-module-list"> <li class="zenback-module-item"> <a href="【リンク先URL】" target="_blank" class="zenback-module-item-title">【キーワード】</a> </li> </ul> </div> </div> <div id="zenback-twitter" class="zenback-module"> <div class="zenback-module-label"> <a href="#">Twitter(最新 100)</a> </div> <div class="zenback-module-content"> <ul class="zenback-module-list"> <li class="zenback-module-item" > <div class="zenback-item-header"> <a href="【ユーザアカウントURL】" target="_blank"> <img src="【ユーザアカウント画像】" width="48" height="48" class="zenback-module-item-image"> <span class="zenback-module-item-username">【ユーザ名】</span> </a> </div> <div class="zenback-module-item-content"> <span class="zenback-module-item-text">【ユーザコメント】 <a href="【リンク先URL】" rel="nofollow">【リンク先URL】</a> </span> <span class="zenback-module-item-time"> <a href="【ツイートURL】" target="_blank">【ツイート時刻】</a> </span> <span class="zenback-module-item-tools"> <a href="#"> <img alt="Reply" src="#"> </a> <a href="#"> <img alt="Retweet" src="#"> </a> <a href="#"> <img alt="Favorite" src="#"> </a> </span> </div> </li> </ul> <div class="zenback-module-more-link"> <a href="#">もっとみる</a> </div> </div> </div> <div id="zenback-hatena-bookmark" class="zenback-module"> <div class="zenback-module-label"> <a href="http://b.hatena.ne.jp/entry/【記事URL】" target="_blank">はてなブックマーク(総数 0)</a> </div> <div class="zenback-module-content"> <ul class="zenback-module-list"> <li class="zenback-module-item" style="display:none;"> <div class="zenback-module-item-header"> <a href="#"> <img src="【画像URL】" width="16" height="16" class="zenback-module-item-image"> <span class="zenback-module-item-username">【ユーザ名】</span> </a> <span class="zenback-module-item-tags">【タグ】</span> <span class="zenback-module-item-time">【ブックマーク時刻】</span> </div> <div class="zenback-module-item-content">【ブックマークコメント】</div> </li> </ul> <div class="zenback-module-more-link" style="display:none;"> <a href="#">もっとみる</a> </div> </div> </div> <div id="zenback-facebook-comment" class="zenback-module"> <div class="zenback-module-label"> <a href="http://www.facebook.com/" target="_blank">Facebook</a> </div> <div class="zenback-module-content"> <div id="zenback-facebook-face"></div> <div id="zenback-facebook-comments"></div> </div> </div> </div> </div>
CSS
#zenback-widget { margin: 1.62em 0; text-align: left; } #zenback-widget div, #zenback-widget img, #zenback-widget ul, #zenback-widget li, #zenback-widget iframe, #zenback-widget span, #zenback-widget a { margin: 0; padding: 0; border: 0; line-height: normal; background: none; font-size: 100%; } #zenback-widget div { display: block; } #zenback-widget li { list-style: none; } #zenback-widget img { -ms-interpolation-mode: bicubic; } #zenback-widget div:after, #zenback-widget ul:after, #zenback-widget li:after { display: none; } #zenback-widget .zenback-module-item { list-style: none; background: none; } #zenback-widget .zenback-module { margin-bottom: 1.62em; text-align: left; } #zenback-widget .zenback-module-content { clear: both; } #zenback-widget #zenback-social-button .zenback-module-content, #zenback-widget #zenback-related-keywords .zenback-module-content { border: 0; } #zenback-widget .zenback-module-list, #zenback-widget #zenback-facebook-face, #zenback-widget #zenback-facebook-comments { margin: 0.62em 0; padding: 0; } #zenback-widget .zenback-module-item { margin: 0 0.62em 0.62em; float: none; } #zenback-widget li.zenback-module-item { list-style-type: none; display: list-item; } #zenback-widget #zenback-social-button .zenback-module-item { float: left; min-height: 30px; margin: 0; padding: 0 10px 0 0; line-height: 18px; vertical-align: middle; } #zenback-widget #zenback-social-button .item-twitter-follow { clear: both; float: none; } #zenback-widget #zenback-related-keywords .zenback-module-item { float: left; margin-right: 0; } #zenback-widget #zenback-related-keywords .zenback-module-item a { display: block; padding: 0.3em 0.62em; border: 1px solid #999999; line-height: 1em; background-color: #ebebeb; border-radius: 5px; text-decoration: none; color: #2b2b2b; } #zenback-widget .zenback-module-item-image { float: left; margin: 0 10px 0 0; padding: 0; } #zenback-widget #zenback-twitter .zenback-module-item-image, #zenback-widget #zenback-hatena-bookmark .zenback-module-item-image { margin-bottom: 0.62em; } #zenback-widget .zenback-module-item-content, #zenback-widget .zenback-module-item-footer { margin: 0.2em 0 0 26px; } #zenback-widget .zenback-module-item-footer { font-size: 90%; } #zenback-widget #zenback-twitter .zenback-module-item-content, #zenback-widget #zenback-ad-hasimage .zenback-module-item-content, #zenback-widget #zenback-ad-hasimage .zenback-module-item-footer { margin-left: 58px; } #zenback-widget #zenback-ad-noicon .zenback-module-item-content, #zenback-widget #zenback-ad-noicon .zenback-module-item-footer { margin-left: 0; } #zenback-widget #zenback-twitter .zenback-module-item-content, #zenback-widget #zenback-hatena-bookmark .zenback-module-item-content { margin-bottom: 0.62em; } #zenback-widget .zenback-module-item-socialcount { display: inline-block; padding: 0.3em 0.3em 0.2em; background-color: #999999; color: #ffffff; font-size: 80%; line-height: 1.2; } #zenback-widget .zenback-module-item-socialcount, #zenback-widget .zenback-module-item-time, #zenback-widget .zenback-module-item-tags { margin-left: 0.62em; } #zenback-widget .zenback-module-message, #zenback-widget .zenback-module-more-link a { display: block; text-align: center; padding: 0.3em 0.62em; } #zenback-widget .zenback-module-item-type { float: right; } #zenback-widget #zenback-news-hasimage .zenback-module-item-text a, #zenback-widget #zenback-ad-hasimage .zenback-module-item-text a, #zenback-widget .zenback-ad .zenback-module-item-text a, #zenback-widget .zenback-module-item-type a { text-decoration: none; } #zenback-widget .zenback-module-item-type a { color: #999999; } #zenback-widget #zenback-twitter .zenback-module-item-tools img { vertical-align: middle; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb, #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail, #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title { width: 110px; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb { float: left; height: 185px; margin: 0 0 1.62em; padding: 0 9px 9px; font-size: 12px; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail { position: relative; height: 110px; overflow: hidden; background-color: #eeeeee; text-align: center; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail a { text-decoration: none; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image { float: none; width: auto; height: 110px; margin: 0; } #zenback-widget #zenback-news-hasimage .zenback-module-item-content, #zenback-widget #zenback-ad-hasimage .zenback-module-item-content { margin: 0.2em 0 0 0px; } #zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail, #zenback-widget #zenback-ad-hasimage .zenback-module-item-thumbnail { width: 110px; height: 110px; overflow: hidden; float: left; background-color: #eeeeee; position: relative; text-align: center; margin: 0 10px 0 0; } #zenback-widget #zenback-news-hasimage .zenback-module-item-image, #zenback-widget #zenback-ad-hasimage .zenback-module-item-image { height: 110px; margin: 0; width: auto; text-align: center; float: none; } #zenback-widget #zenback-loglylift-hasimage li { float: left; width: 46%; height: auto; margin: 0 0 12px; padding: 0 9px 9px; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title { margin-top: 5px; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-socialcount { position: absolute; left: 0; bottom: 0; width: 100px; margin: 0; padding: 3px 5px; text-align: left; font-size: 12px; } #zenback-widget #zenback-social-button .item-twitter, #zenback-widget #zenback-social-button .item-pocket { width: 101px; height: 30px; } #zenback-widget #zenback-social-button .item-google-plus { width: 71px; } #zenback-widget .zenback-module-powered, #zenback-widget #zenback-powered { clear: both; display: block ! important; margin-top: 1.62em; text-align: right; } #zenback-widget #zenback-social-button .zenback-module-content, #zenback-widget #zenback-related-article .zenback-module-content, #zenback-widget #zenback-related-keywords .zenback-module-content, #zenback-widget #zenback-twitter .zenback-module-item, #zenback-widget #zenback-hatena-bookmark .zenback-module-item, #zenback-widget .zenback-ad .zenback-module-item, #zenback-widget .zenback-module-item-footer { zoom: 1; } #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 { display: block; height: 0; visibility: hidden; content: "\0020"; } #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 { clear: both; } #zenback-widget #zenback-ad-hasimage .zenback-module-item-footer, #zenback-widget #zenback-loglylift-hasimage .zenback-module-list, #zenback-widget #zenback-loglylift-hasimage .zenback-module-item-footer { clear: both; } #zenback-widget { } #zenback-widget .zenback-module-label { float: left; background-color: #000000; background-position: 5px center; background-repeat: no-repeat; font-size: 90%; } #zenback-widget .zenback-module-label a, #zenback-widget .zenback-module-label span { display: block; margin-top: 3px; padding: 0 0.62em 0 26px; color: #ffffff; text-decoration: none; font-weight: bold; } #zenback-widget .zenback-module-content { border-top: 1px solid; } #zenback-widget #zenback-related-links .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-relatedlink.png?v=1a4c6); background-color: #b0c906; } #zenback-widget #zenback-related-links .zenback-module-content { border-color: #b0c906; } #zenback-widget #zenback-related-article .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-relatedentry.png?v=67d53); background-color: #7fc527; } #zenback-widget #zenback-related-article .zenback-module-content { border-color: #7fc527; } #zenback-widget #zenback-twitter .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-twitterbird.png?v=76335); background-color: #44c2e4; } #zenback-widget #zenback-twitter .zenback-module-content { border-color: #44c2e4; } #zenback-widget #zenback-hatena-bookmark .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-hatebu.png?v=33759); background-color: #5279e7; } #zenback-widget #zenback-hatena-bookmark .zenback-module-content { border-color: #5279e7; } #zenback-widget #zenback-facebook-comment .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-facebook.png?v=f82ea); background-color: #3b5998; } #zenback-widget #zenback-facebook-comment .zenback-module-content { border-color: #3b5998; } #zenback-widget #zenback-news-hasimage .zenback-module-label { background-image: url(http://widget.zenback.jp/_p/images/icon-oshirase.png?v=ea6fc); background-color: #F2900F; } #zenback-widget #zenback-news-hasimage .zenback-module-content { border-color: #F2900F; } #zenback-widget #zenback-ad-hasimage .zenback-module-content, #zenback-widget #zenback-ad-noicon .zenback-module-content, #zenback-widget #zenback-loglylift-hasimage .zenback-module-content { border: none; } #zenback-widget #zenback-ad .zenback-module-item-text a { color: #000000; text-decoration: none; } #zenback-widget .zenback-module-message { background-color: #eeeeee; color: #555555; font-size: 90%; } #zenback-widget .zenback-module-item-socialcount { border-radius: 2px; } #zenback-widget .zenback-module-item.hasthumb .zenback-module-item-socialcount { border-radius: 0; } #zenback-widget .zenback-module-more-link { border: 1px solid #999999; } #zenback-widget #zenback-hatena-bookmark .zenback-module-item, #zenback-widget #zenback-twitter .zenback-module-item { border-bottom: 1px solid #eeeeee; } #zenback-widget .zenback-module-item-time, #zenback-widget .zenback-module-item-time a, #zenback-widget .zenback-module-item-tags a { color: #999999; } #zenback-widget #zenback-powered { border-top: 1px solid #7fc527; } #zenback-widget #zenback-powered img { padding: 0.2em 0.5em; background-color: #7fc527; }