メイン | 横幅を指定したい »

2012年7月11日 (水)

ZenbackのHTML/CSSコード 図解付き解説 【2013/08/29 更新】

  • 2013/08/29 おしらせ欄まわりなどアップデートしました。

ZenbackのHTML/CSS構造は下図のようになっています。

Css_structure
※画像をクリックすると大きい画像を閲覧できます。

  • #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;
}

■ Zenback

ここは何のブログ?
ここは、Zenbackっていうブログパーツのデザインカスタマイズをご紹介するブログです。Twitter @zenback のなかのひとが運営しています。

設定方法など、よくわからなくなっちゃったら、「Zenback デザインハックブログ: 【最初に読んでね】このブログの使い方」の記事をご覧ください。

サイト内検索

Twitter

RSS登録