おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

はてなブログのサンプルテーマBolierplateとSentenceのCSS差分一覧とまとめ

help.hatenablog.com

僕が作ったはてなブログテーマ Sentenceはてなブログテーマ制作の手引き - はてなブログ ヘルプで紹介されている手順通りBolierplateというサンプルテーマをベースにして作成しております。

この記事ではBolierplateとSentenceの差分を一覧にして公開しています。BolierplateのCSSを一覧通り変更・追記・削除すればSentenceと同じができあがります。

また、ダッシュボードのデザインから追記したHTMLやCSSについてもまとめておきます。

テーマ制作やカスタマイズの参考としてご使用ください。たいした内容ではありませんがお役に立てれば幸いです。

ただし、各変更点についての解説は一切しておりません。もしわからない点がありましたら、コメント欄へお気軽に書き込んでください。答えられる範囲で答えます。

BolierplateとSentenceのCSS差分一覧

スマホ用(モバイルファースト)

Sentenceはモバイルファーストで作っておりますので、まずはスマホ画面でのデザインから記述しております。

横幅320pxのディスプレイでも崩れにくいデザインを考えて作り、画面サイズに比例して表示が変わるフルードデザイン(リキッドデザイン)で大小様々なスマホに対応しております。

Bolierplate側の値が「記述なし」の場合はBolierplateに無かったセレクタやプロパティです。一方でSentence側の値が「記述なし」の場合はBolierplateにあった記述を削除したという意味です。

一覧に無いセレクタやプロパティはBolierplateの記述をそのまま使っています。

セレクタ プロパティ 値(Bolierplate) 値(Sentence)
body background #fff 記述なし
font-size 記述なし 17px
h1 font-size 2em 1em
#globalheader-container position fixed static
#container width 940px 記述なし
margin-bottom 記述なし 30px
margin-right auto 記述なし
margin-left auto 記述なし
padding-top 37px 記述なし
overflow 記述なし hidden
word-wrap 記述なし break-word
#main float left none
-webkit-box-sizing 記述なし border-box
-moz-box-sizing 記述なし border-box
box-sizing 記述なし border-box
width 600px 100%
margin-bottom 記述なし 10px
padding 記述なし 30px 3.125%
border-top 記述なし 1px solid #aaa
border-bottom 記述なし 1px solid #aaa
background-color 記述なし #fff
#box2 float right none
width 300px 93.75%
padding 記述なし 0 3.125%
#box2-inner width 960px 100%
- 記述なし .clearfix
overflow 記述なし hidden
#blog-title -webkit-box-shadow 記述なし 0 1px 7px #aaa
box-shadow 記述なし 0 1px 7px #aaa
margin 30px 0 記述なし
margin-bottom 記述なし 10px
padding 20px 0 記述なし
background-color 記述なし #fff
#blog-title-inner padding 記述なし 10px 3.125%
#top-box margin 10px auto 20px 記述なし
margin-top 記述なし 20px
font-size 90% 80%
#top-box .breadcrumb margin-top 記述なし 20px 0 5px 0
padding 10px 0 3.125%
border 1px solid #dddddd 記述なし
.entry margin-bottom 100px 30px
.entry-title font-size 160% 150%
.entry-header-menu top 記述なし -2px
bottom 0px 記述なし
left -60px 95px
.entry-content color 記述なし #333
font-size 95% 記述なし
color 記述なし #000
.entry-content p margin 0 0 1em 0 0 0 1.5em 0
.entry-content h1〜h6(※1) padding 記述なし 10px 0
color 記述なし #000
.entry-content h1 font-size 160% 120%
.entry-content h2 padding-left 記述なし 10px
border-left 記述なし 2px solid #454545
background-color 記述なし #f5f5f5
font-size 150% 120%
.entry-content h3 border-bottom 記述なし 2px solid #000
font-size 140% 110%
.enrty-content h4::before margin-right 記述なし 10px
color 記述なし #22b24c
font-size 記述なし 120%
text-shadow 記述なし 1px 1px 3px #666
font-family 記述なし “blogicon"
content 記述なし “\f029”
.entry-content h4 font-size 130% 110%
.entry-content h5 font-size 110% 110%
.entry-content h6 font-size 100% 100%
.entry-content table display 記述なし block
overflow-x 記述なし auto
.entry-content ul, ol(※2) padding-left 記述なし 20px
.table-of-contents:before font-size 記述なし 120%
color 記述なし #000
font-weight 記述なし bold
content 記述なし “【目次】”
ul.table-of-content list-style-type 記述なし decimal
list-style-position 記述なし inside
-webkit-box-sizing 記述なし border-box
-moz-box-sizing 記述なし border-box
box-sizing 記述なし border-box
width 記述なし 100%
padding 記述なし 3%
border 記述なし 1px solid #aaa
background 記述なし #f5f5f5
font-size 記述なし 90%
line-height 記述なし 2
.table-of-content li list-style-type 記述なし decimal
.hatena-module float 記述なし none
.hatena-module-search-box .search-form background 記述なし #fff
width 記述なし 100%
margin-bottom 60px 30px
.hatena-module-title font-size 記述なし 130%
line-height 記述なし 2.5em
.page-archive .archive-entries .entry-description font-size 95% 85%

タブレット用 @media (min-width:768px)

続いてタブレット用のデザインです。横幅が768〜1023pxであればこのデザインが適用されます。

この一覧に無いセレクタやプロパティはスマホ用デザインから引き継がれます。

スマホ用の値の「記述なし」は、スマホ用デザインで値を指定しなかったセレクタやプロパティを意味します。

セレクタ プロパティ 値(スマホ用) 値(タブレット用)
h1 font-size 1em 150%
#globalheader-container position static fixed
#container padding-top 記述なし 37px
overflow hidden auto
word-wrap break-word normal
#container #content width 記述なし 100%
max-width 記述なし 800px
margin 記述なし 0 auto
#main margin-bottom 10px 30px
padding 30px 3.125% 60px 7.375%
border-left 記述なし 1px solid #aaa
border-right 記述なし 1px solid #aaa
#box2 width 93.75% 92.5%
padding 0 3.125% 0 0 0 7.5%
#blog-title-inner width 記述なし 97.5%
max-width 記述なし 800px
margin 記述なし 0 auto
padding 10px 3.125% 10px 1.25%
#top-box width 記述なし 100%
max-width 記述なし 800px
margin 記述なし 20px auto 0 auto
font-size 80% 90%
#top-box .breadcrum padding 0 3.125% 0 1.25%
.entry-title font-size 150% 2em
.entry-content h1 font-size 120% 160%
.entry-content h2 padding 記述なし 20px 0 20px 20px
font-size 120% 150%
.entry-content h3 font-size 110% 140%
.entry-content h4 font-size 110% 130%
.entry-content h5 font-size 110% 120%
.entry-content ul, ol(※) padding-left 20px 40px
.hatena-module float none left
width 100% 40.541%
margin 記述なし 0 9.46% 60px 0
.page-archive .archive-entries .entry-title font-size 130% 180%
.page-archive .archive-entries .entry-description font-size 85% 95%

PC用 @media (min-width:1024px)

最後にPC用です。横幅が1024px以上でこのデザインが適用されます。

この一覧に無いセレクタやプロパティはタブレット用、あるいはスマホ用デザインから引き継がれます。

タブレット用の値の「記述なし」は、スマホ用とタブレット用デザインで値を指定しなかったセレクタやプロパティを意味します。

セレクタ プロパティ 値(タブレット用) 値(PC用)
#container #content max-width 800px 1130px
#main float none left
width 100% 70.797%
margin-bottom 30px 0
padding 60px 7.375% 60px 5.222%
#box2 float none right
width 92.5% 26.549%
padding-left 記述なし 2.655%
#box2-inner overflow hidden visible
#blog-title-inner width 97.5% 98.231%
max-width 800px 1110px
padding 10px 1.25% 10px 0.885%
#top-box max-width 800px 1130px
#top-box .breadcrumb padding 0 1.25% 0
.entry margin-bottom 30px 100px
.hatena-module float left none
width 40.541% 100%
margin-right 記述なし 0

※印の補足

同一ID・クラスのセレクタ内で、複数のプロパティに同じ値を入れる場合は一括りにして記述しています。

ただ、一覧の中で同じように書くと見にくくなるので各※印のセレクタは、実際には以下のように記述しています。

※1 entry-content h1〜h6
↓
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6

※2 .entry-content ul, ol
↓
.entry-content ul,
.entry-content ol

追記したHTMLとCSSまとめ

www.okigaru-migaru.net

www.okigaru-migaru.net

ダッシュボードのデザインから追記したHTMLやCSSをまとめておきます。

これはどちらかと言えば自分用ですが、実際にどんなコードを書いているかの参考になればと思います。

なるべくそのまま記述しておりますが、アドセンスのIDなどに関しては一応伏せ字にしておきます。

headに要素を追加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

タイトル下

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> メニュー</span>
    </div>
    <ul id="menu-content">
            <li><a href="http://www.okigaru-migaru.net">ホーム</a></li>
            <li><a href="http://www.okigaru-migaru.net/archive/category/デジカメとスナップ写真">デジカメとスナップ写真</a></li>
            <li><a href="http://www.okigaru-migaru.net/archive/category/乗り物とお出かけ">乗り物お出かけ</a></li>
            <li><a href="http://www.okigaru-migaru.net/archive/category/ブログ運営記">ブログ運営記</a></li>
            <li><a href="http://www.okigaru-migaru.net/sentence-information">Sentence(テーマ)</a></li>
            <li><a href="https://docs.google.com/forms/d/1Tfq-h5ufNI1rt38Cv2dnd6tqlP14HiNorc2RMGLQS-c/edit" target="_blank">お問い合わせ</a></li>
    </ul>
    </div>
</div>
<div style="clear:both"></div>

記事下

<div id="my-footer">
  <div class="ad-align">
    <div class="ad-l">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-res -->
<ins class="adsbygoogle ad-res"
     style="display:inline-block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>
    <div class="ad-r">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-336 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>
    <p style="font-size:70%;display:block;">スポンサーリンク</span>
  </div>
</div>
<ul class="share-group clearfix">
  <li class="sns-share hatebu"><span><i class="blogicon-bookmark lg"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}"data-hatena-bookmark-layout="simple"></a></li>
  <li class="sns-share twitter"><span><i class="blogicon-twitter lg"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
  <li class="sns-share facebook"><span><i class="blogicon-facebook lg"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"target="_blank"></a></li>
  <li class="sns-share googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"target="_blank"></a></li>
  <li class="sns-share pocket"><span><i class="fa fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"target="_blank"></a></li>
</ul>
<div class="hatena-module-title">おすすめの記事</div>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="sns-follow">
  <div class="hatena-module-title">フォローする</div>
  <a class="hatena" href="http://blog.hatena.ne.jp/shimehitsu14/www.okigaru-migaru.net/subscribe"target="_blank"><i class="blogicon-hatenablog lg"></i> はてな</a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=OkigaruMigaru"target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a><a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.okigaru-migaru.net/feed"target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
 </div>
<div class="ad-align">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-res-bottom -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-*****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
  <p style="font-size:70%;">スポンサーリンク</p>
</div>
<script>
var adsenseCode = (function () {/*
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</scrip>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');
addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h2');
    if ($target.size() > 0) {
        $target.eq(0).before($('.insentense-adsense'));
        $('.insentense-adsense').html(adsenseCode);
    }
}, false);
</script>

サイドバー

(タイトルなし)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-res-box2 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p style="font-size:70%;">スポンサーリンク</p>

フォローする

<div class="sns-follow">
  <a class="hatena" href="http://blog.hatena.ne.jp/shimehitsu14/www.okigaru-migaru.net/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i> はてな</a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=OkigaruMigaru" target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a><a class="feedly" href="http://feedly.com/i/subscription/feed/http://www.okigaru-migaru.net/feed" target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
</div>

フッタ

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 1023;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

デザインCSS

/* 文字装飾 */
.lb {
  font-size: 2em;
  font-weight: bold;
}
.lrb {
  color: #f00;
  font-size: 2em;
  font-weight: bold;
}
.s {
  font-size: 70%;
}

.b {
  font-weight: bold;
}
.rb {
  color: #f00;
  font-weight: bold;
}

/* ナビゲーションバー */
#menu-content {
  display: none;
}
#menu {
  margin: 0 auto 10px auto;
  padding: 0 3.125%;
}
#menu ul {
  list-style-type: none;
  padding: 0;
}
#menu-content li {
  border-bottom: solid 0.5px #aaa;
  display: block;
  font-size: 0.85em;
  text-align: center;
}
#menu-content li:first-child {
  border-top: solid 0.5px #aaa;
}
#menu-content li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
}
#menu-content li a:hover {
  background: #f5f5f5;
}

/* Media Queries - Tablet */
@media (min-width: 768px) {
  #menu {
    padding: 0 1.25%;
    max-width: 800px;
  }
}

/* Media Queries - PC */
@media (min-width: 1024px) {
  #menu {
    padding: 0;
    max-width: 1130px;
  }
  #menu ul {
    display: block;
  }
  #btn-content {
    display: none;
  }
  #menu-content {
    display: block;
  }
  #menu-content li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 16.667%;
    margin-bottom: 15px;
    border-right: solid 1px #aaa;
    border-bottom: 0;
  }
  #menu-content li:first-child {
    border-top: 0;
    border-left: solid 1px #aaa;
  }
}

/* 広告 */
.ad-align {
  display: block;
  text-align: center;
}
.ad-res {
  width: 300px;
  height: 250px;
}
.ad-l {
  display: inline;
}
.ad-r {
  display: none;
}

@media(min-width: 768px) {
  .ad-align {
    text-align: start;
  }
  .ad-res {
    width: 336px;
    height: 280px;
  }
  .ad-r {
    display: inline;
  }
}
/* シェアボタン */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: "";
}
.sns-share {
  list-style: none;
  position: relative;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 3px 30px 3px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #999;
}
.sns-share span {
  position: absolute;
  color: #fff;
  font-size: 30px;
}
.sns-share.hatebu.sns-share span {
  position: absolute;
  padding: 6px 10px;
  color: #fff;
}
.sns-share.twitter.sns-share span {
  position: absolute;
  padding: 9px 9px;
  color: #fff;
}
.sns-share.facebook.sns-share span {
  position: absolute;
  padding: 8px 10px;
  color: #fff;
}
.sns-share.googleplus.sns-share span {
  position: absolute;
  padding: 9px 11px;
  color: #fff;
}
.sns-share.pocket.sns-share span {
  position: absolute;
  padding: 8px 11px;
  color: #fff;
}
.sns-share a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #fff;
  text-indent: -999px;
}
.sns-share a:hover {
  background-color: #fff;
  opacity: 0.5;
}
ul.share-group {
  list-style: none;
  width: 280px;
  margin: auto;
  padding: 0;
}
.sns-share.hatebu {
  background-color: #006fbb;
}
.sns-share.twitter {
  background-color: #00acec;
}
.sns-share.facebook {
  background-color: #265a96;
}
.sns-share.googleplus {
  background-color: #dd4b39;
}
.sns-share.pocket {
  background-color: #EE4256;
}

@media (min-width: 768px) {
  .sns-share {
    width: 20%;
    margin: 0 0 30px 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  .sns-share.hatebu.sns-share span,
  .sns-share.twitter.sns-share span,
  .sns-share.facebook.sns-share span,
  .sns-share.googleplus.sns-share span, 
  .sns-share.pocket.sns-share span {
    padding-left: 38.462%;
  }
  .sns-share a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color: #fff;
    text-indent: -999px;
  }  
  ul.share-group{
    list-style: none;
    width: 100%;
    margin: auto;
    padding: 0;
  }
}

/* SNSフォローボタン */
.sns-follow {
    width: 100%;
    margin-bottom: 10px;
}
.sns-follow a {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.667%;
  height: 60px;
  margin: 0 0.334%;
  border-radius: 5px;
  font-size: 17px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
}
.sns-follow .hatena {
  border: 2px solid #454545;
  background: #fff; 
  color: #454545;
}
.sns-follow .twitter {
  border: 2px solid #00acec;
  background: #fff; 
  color: #00acec;
}
.sns-follow .feedly { 
  border: 2px solid #70ca3b;
  background: #fff;
  color: #70ca3b;
}
.sns-follow .hatena:hover {
  background: #454545;
  color: #fff;
}
.sns-follow .twitter:hover {
  background: #00acec;
  color: #fff;
}
.sns-follow .feedly:hover {
  background: #70ca3b;
  color: #fff;
}

/* 記事下の関連記事一覧 */
.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
  font-size: 95%;
}
.urllist-entry-body.related-entries-entry-body {
  display: none;
}

@media (min-width: 768px) {
  .urllist-entry-body.related-entries-entry-body {
    display: block;
  }
}

/* サイドバーの広告を記事ページでは非表示 */
.page-entry .hatena-module.hatena-module-html {
 display: none;
}

追記したコードは圧縮することをおすすめします

追記したCSSやスクリプトのコードは圧縮することをおすすめします。

コードの圧縮とは人が見やすくするための改行やインデントを省略して、コード全体をキュッと縮めることです。

こうすることで、わずかながらもページサイズが小さくなり、読み込み速度の向上が見込めます。

Refresh-SF - Online JavaScript and CSS Compressor

Refresh-SFはオンライン上でコードの圧縮ができるサービスです。

自動で改行やインデントが省略される他、短縮した記述に変換されます。

Refresh-SF

デザインCSSに追記したコードをコピペして、右上のCSSと書かれたボタンをクリックすると圧縮されたコードが生成されます。

こうして生成されたコードをはてなブログのデザインCSSにコピペして、正常に表示・動作するかを確認しましょう。

JavaScriptも同様に圧縮することができますのでやっておきましょう。HTMLはそんなに圧縮してくれませんね。手でやった方が早いです。

以上です。お疲れ様でした!