おきがるみがる

お気軽&身軽に趣味や資産運用(インデックス投資)を楽しむ雑記ブログです。

はてなブログテーマ Sentenceのカスタマイズ最新版まとめ

Sentence - テーマ ストア

僕が公開しているはてなブログのテーマ Sentence用に、カスタマイズ用のHTMLとCSSをまとめた記事を紹介していました。

ただ、それ以来テーマCSS自体を修正・改良したり、「ここをこうした方がいいんじゃないか」と自分で手直しすることもありました。

それに紹介しているコードをコピペして、果たしてちゃんと動作するのかというところも疑問ではありました。

そこで、僕が現在設定しているHTMLとCSSのコードをそのままコピペしてまとめました。

圧縮して使っているので見やすいように改行や空白、コメントは使っていますが、生のコード(?)です。

いざとなったらコピペするだけで動作するはずですし、自分用のバックアップにもと思い

用意するアドセンス

アドセンスで用意しておく広告は4種。

  • レスポンシブ広告(H2上・記事下・サイドバー用の3つ)
  • リンク広告(記事タイトル下・記事下用の2つ)
  • インフィード広告
  • 自動広告(記事内広告)
  • 関連記事

上にあるものほど重要度が高いと思っています。

レスポンシブ広告とリンク広告は1つずつあればいいのですが、設置場所ごとにアナライズするならばカッコ内の数を用意しておいてください。

アドセンスの広告スタイル

広告のスタイルは以下のように設定するとテーマのデザインに馴染むと思います。

  • 枠線:#454545
  • タイトル/リンク:#1487BD
  • 背景:#FFFFFF
  • テキスト:#333333
  • URL:#1487BD
  • 表示済みURL:#789dae
  • フォントファミリー:最適化

headに要素を追加

<!-- 著者のメタ情報 -->
<meta name="auther" content="shimehitsu14" />

<!-- シェアボタン用のウェブフォント -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<!-- 自動広告のHTML -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-****************",
          enable_page_level_ads: true
     });
</script>

タイトル下

<!-- ナビゲーションメニューのHTML -->
<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="https://www.okigaru-migaru.net/archive/category/デジカメとスナップ写真">デジカメとスナップ写真</a></li>
      <li><a href="https://www.okigaru-migaru.net/archive/category/乗り物とお出かけ">乗り物とお出かけ</a></li>
      <li><a href="https://www.okigaru-migaru.net/archive/category/簡単・安全な資産運用">簡単・安全な資産運用</a></li>
      <li><a href="https://www.okigaru-migaru.net/sentence-information">Sentence(はてなテーマ)</a></li>
    </ul>
  </div>
</div>
<div style="clear:both"></div>
  • liタグを追加・削除することでメニューの数を調節できます
  • 数を調節した場合、デザインCSSで#menu-content liのwidthの数値を変える必要があります

記事上

<!-- シェアボタンのHTML -->
<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>

<!-- 記事タイトル下のリンク広告 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-link -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="link"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

記事下

<!-- 記事直下にダブルレクタングル広告設置のHTML -->
<div id="my-footer">
  <div class="res-align">
    <div class="ad-l">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- okigaru-migaru-res1 -->
      <ins class="adsbygoogle ad-res"
           style="display:inline-block"
           data-ad-client="ca-pub-****************"
           data-ad-slot="**********"
           data-ad-format="rectangle"
           data-full-width-responsive="true"></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-res1 -->
      <ins class="adsbygoogle"
           style="display:inline-block"
           data-ad-client="ca-pub-****************"
           data-ad-slot="**********"
           data-ad-format="rectangle"
           data-full-width-responsive="true"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <p style="font-size:70%;display:block;">スポンサーリンク</span>
  </div>
</div>

<!-- シェアボタンのHTML -->
<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>

<!-- 記事下のリンク広告のHTML -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- okigaru-migaru-link2 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-****************"
     data-ad-slot="**********"
     data-ad-format="link"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- 記事下の関連記事広告のHTML -->
<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>

<!-- 記事内のH2直前にダブルレクタングル広告のHTML -->
<script>var adsenseCode=(function(){/*
  <div class="res-align">
    <div class="ad-l">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
      <!-- okigaru-migaru-res3 -->
      <ins class="adsbygoogle ad-res"
           style="display:inline-block"
           data-ad-client="ca-pub-****************"
           data-ad-slot="**********"
           data-ad-format="rectangle"
           data-full-width-responsive="true"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </scrip>
    </div>
    <div class="ad-r">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scrip>
      <!-- okigaru-migaru-res3 -->
      <ins class="adsbygoogle"
           style="display:inline-block"
           data-ad-client="ca-pub-****************"
           data-ad-slot="**********"
           data-ad-format="rectangle"
           data-full-width-responsive="true"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </scrip>
    </div>
    <p style="font-size:70%;display:block;">スポンサーリンク</span>
  </div>
*/}).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>
<div class="insentense-adsense"></div>
  • my-footerで囲まれた範囲が記事直下に表示されます
  • ダブルレクタングルの1つ目で表示する広告のins classにad-resを追加
    • PC・タブレット表示では横幅336px、スマホ表示では300pxで表示するためです
  • ダブルレクタングルの両方のstyleをinline-blockに変更
  • blockのままだと縦に2つ表示されます
  • ダブルレクタングルの両方のdata-ad-formatをrectangleにします
  • ad-rで囲んだ広告1つはスマホ表示で非表示になります
    • display: noneにしているのでレスポンシブ広告以外だとアウトらしいです
  • H2直前の広告コードについて、スクリプトの閉じタグ/scriptのtを抜いてください
    • コメントアウトさせて、あとからスクリプトで正しいコードに置換するみたいです

サイドバー HTMLモジュール

<!-- サイドバーにレスポンシブ広告のHTML -->
<div class="res-align">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- okigaru-migaru-res2 -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-****************"
       data-ad-slot="**********"
       data-ad-format="rectangle"
       data-full-width-responsive="true"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
  <p style="font-size:70%;display:block">スポンサーリンク</span>
</div>
  • res-alignはスマホ表示の時に中央揃えにするためです
  • data-ad-formatをrectangleにしてください

サイドバー プロフィールモジュール

<!-- サイドバーにフォローボタンのHTML -->
<div class="sns-follow">
  <a class="hatena" href="https://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="https://feedly.com/i/subscription/feed/http://www.okigaru-migaru.net/feed"target="_blank"><i class="blogicon-rss lg"></i> Feedly</a>
</div>
  • はてなとFeedlyはURLの設定に注意してください
    • はてな:https://blog.hatena.ne.jp/【はてなID】/【https://を抜いたURL】/subscribe…
    • Feedly:https:/feedly.com/i/subscription/feed/【https://を含めたURL】/feed…

フッタ

<!-- ナビゲーションメニューのボタンで展開スクリプト -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>$(function(){var n=$("#menu-btn"),i=$("#menu-content");n.click(function(){i.slideToggle()}),$(window).resize(function(){var n=$(window).width(),e=1023;n>e?i.show():i.hide()})});</script>

<!-- 記事直下にダブルレクタングルのスクリプト -->
<script>var myFooter=document.getElementById("my-footer"),temp=myFooter.cloneNode(!0);myFooter.parentNode.removeChild(myFooter),document.getElementsByClassName("entry-content")[0].appendChild(temp);</script>

<!-- インフィード広告のスクリプト -->
<script src="//webloglife.github.io/ads_infeed.js" charset="utf-8"></script>
<script>
Ads.Infeed.init('<center><ins class="adsbygoogle infeed_slot" style="display:block" data-ad-format="fluid" data-ad-layout="image-middle" data-ad-client="ca-pub-****************" data-ad-layout-key="**************" data-ad-slot="**********"></ins></center>');
</script>
<style>.infeed_slot{width:100%;height:210px;margin-bottom:54px;padding-top:33px}</style>
  • 圧縮してよくわからなくなっちゃったので、とりあえずコピペでどうぞ

デザインCSS

/* <system section="theme" selected="8599973812276234164"> */
@import "https://blog.hatena.ne.jp/-/theme/8599973812276234164.css";
/* </system> */

/* 文字装飾のCSS */
.lb, .lrb {
  font-size: 2em
}
.lrb, .rb {
  color:red;font-weight: 700
}
.b, .lb, .lrb, .rb {
  font-weight: 700
}
.s {
  font-size: 70%
}

/* ナビゲーションメニューのCSS */
#menu-content {
  display: none
}
#menu {
  padding: 0 3.125%;
  margin: 0px auto 10px auto;
}
#menu ul {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0
}
#menu-content li {
  border-bottom: solid .5px #aaa;
  display: block;
  font-size: .85em;
  text-align: center
}
#menu-content li:first-child {
  border-top: solid .5px #aaa
}
#menu-content li a {
  display:block;
  padding:10px 0;
  text-decoration: none
}
#menu-content li a:hover {
  background: #f5f5f5
}
@media (min-width: 768px){
  #menu {
    padding: 0 1.25%;
    max-width: 800px
  }
}
@media (min-width: 1024px) {
  #menu {
    padding: 0;
    max-width: 1130px
  }
  #menu ul,#menu-content {
    display: block
  }
  #btn-content{
    display: none
  }
  #menu-content li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    margin-bottom: 15px;
    border-right: solid 1px #aaa;
    border-bottom: 0
  }
  #menu-content li:first-child {
    border-top: 0;
    border-left: solid 1px #aaa
  }
}

/* ダブルレクタングルのCSS */
.res-align {
  display: block;
  text-align: center
}
.ad-res {
  width: 300px;
  height: 250px
}
.ad-l {
  display: inline
}
.ad-r {
  display: none
}
@media(min-width:768px) {
  .res-align{
    text-align: start
  }
  .ad-res {
    width:336px;
    height:280px
  }
  .ad-r {
    display: inline
  }
}

/* シェアボタンのCSS */
.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 5px 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: .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 5px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
  }
  .sns-share.facebook.sns-share span,.sns-share.googleplus.sns-share span,.sns-share.hatebu.sns-share span,.sns-share.pocket.sns-share span,.sns-share.twitter.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
  }
}

/* フォローボタンのCSS */
.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.5%;
  height: 60px;
  margin: 0 .334%;
  border-radius: 5px;
  font-size: 14px;
  line-height: 60px;
  text-align: center;
  text-decoration: none
}
.sns-follow {
  width: 100%
}
.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
}
  • ナビゲーションメニューのmenu-content liのwidthはメニューの数に合わせて数値を変えてください
    • 100 ÷ メニューの数
    • このブログではメニューは4つなので100 ÷ 4 = 25 (%)

見出しをH3始まりにする

記事中の見出しはH2からというルールがあるのですが、はてなブログの大見出しにはH3が設定されています。

僕はMarkdownでH2の見出しから使うことをおすすめしていますが、H3から記述したいという方は以下のコードをデザインCSSに貼り付けてください。

.entry-content h3 {
  padding-left: 10px;
  border-left: 2px solid #000;
  border-bottom: 0;
  background-color: #f5f5f5;
  font-size: 120%
}
.entry-content h4::before {
  margin-right: 0;
  font-size: 0;
  content: ""
}
.entry-content h4 {
  border-bottom: 2px solid #000; 
  font-size: 110%
}
.entry-content h5::before {
  margin-right: 10px;
  color: #22b24c;
  font-size: 120%;
  font-family: "blogicon";
  text-shadow: 1px 1px 3px #666;
  content: "\f029"
}

@media (min-width: 768px) {
  .entry-content h3 {
    padding: 20px 0 20px 20px;
    font-size: 150%
  }
  .entry-content h4 {
    font-size: 140%
  }
  .entry-content h5 {
    font-size: 130%
  }
}

CSS圧縮

Refresh-SF - Online JavaScript and CSS Compressor

CSSを圧縮すると余計な改行やスペースを削ることで読み込み速度が速くなります。

ただし、見にくくなるのであとから修正が難しくなります。また、必要な部分が消される可能性も無きにしもあらずなので注意です。

BolierplateとSentenceのCSS差分一覧

Sentenceははてなブログ公式からサンプルテーマとして配布されているBolierplateをベースに作っています。

カスタマイズされる方やこれからテーマを作る方の参考になればと思い、Bolierplateとの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% 130%
.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 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-title font-size 160% 130%
.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%
#box2-inner .hatena-module:nth-child(2n+1) clear 記述なし both
padding 0 3.125% 0 0 0 7.5%
.hatena-module float none left
width 100% 40.541%
margin 記述なし 0 9.46% 60px 0
#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 130% 150%
.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
.page-archive .archive-entries .entry-title font-size 130% 150%
.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
.hatena-module float left none
width 40.541% 100%
margin-right 9.46% 0
#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
.entry-title font-size 150% 180%
.page-archive .archive-entries .entry-title font-size 150% 180%