はてなブログのスマホサイトのHTMLとCSSの構成メモ

こんにちは、つばさ(@tsubasa123)です。

これは完全に私向けの記事。スマホサイトのHTML・CSSコードをメモっておきます。ヘッダー部分限定です。もしスマホサイトのデザインをカスタマイズしたい方がいましたら少しはお役に立てるかもわかりませんが、本当に私向けのメモです。

HTML

<!--画像を登録(領域に合わせる)-->
<div class="header-image-wrapper">
<a href="" class="header-image-anchor">
<div class="header-image" style="background-image: url('');"></div>
</a>
</div>
<!--画像を登録(画像の高さに合わせる)-->
<!--
<div class="header-image-wrapper">
    <a href="" class="header-image-anchor">
        <img src="" class="header-image-src">
    </a>
</div>
-->
<!--文字を表示するとき-->
<header id="header" data-brand="hatenablog">
<div class="header-blog-icon">
<a href="">
<img src="" alt="ばさのーと">
</a>
</div>
<h1 id="title">
<a href="" class="blog-title">
<span class="change">ばさのーと</span>
</a>
</h1>
<h2 id="blog-description">つばさの日常を綴るのーと</h2>
</header>
<!--タイトル下のカスタマイズエリア-->
<div id="top-editarea">
<div class="section">
</div>
</div>

スマホサイトのHTML構成はこんな感じになっています。画像の登録方法によって若干ソースコードが変わりますが外側のクラス名は同じになっているみたいです。デフォルトではアップロードした画像は背景画像として登録されます。これはCSSのスタイルの関係でこのようになっているのかな。

カスタマイズエリアはタイトル下の要素内に収められます。スタイルの都合で外側に出したいときはJavaScript等を利用してなんとかする必要がありそうです。全幅の要素を追加したい場合などは工夫しないといけないかも。

CSS

@media screen and (max-width: 320px)
.header-image {
height: 180px;
}
@media screen and (max-width: 480px)
.header-image {
height: 200px;
}
@media screen and (max-width: 768px)
.header-image {
height: 250px;
}
.header-image {
width: 100%;
height: 350px;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
body.header-image-enable #header {
margin: -35px auto 15px;
}
#header {
text-align: center;
margin: 15px auto;
width: 93.75%;
}
#header .header-blog-icon {
height: 68px;
}
#header .header-blog-icon img {
width: 60px;
height: 60px;
border-top-right-radius: 60px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius: 60px;
background-clip: padding-box;
border: 4px solid #fff;
background: #fff;
}
#header #title {
font-size: 130%;
margin: 0;
}
#header #title a {
color: #3d3f44;
line-height: 1.3;
word-wrap: break-word;
}
#header #blog-description {
font-size: 80%;
color: #9aa5ab;
font-weight: 400;
margin: 0;
line-height: 1.5;
margin-top: .5em;
}
#top-editare {
overflow-x: auto;
}
.section {
width: 93.75%;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}

こんな感じのスタイルがデフォルトで適応されています。

これとは別に、

body.header-image-enable
body.header-image-only

画像の登録の有無とタイトルの表示の有無でこのようなクラスが<body>タグに加えられます。これによりヘッダーの表示が切り替わっています。

さいごに

とりあえずHTMLの構成とデフォルトCSSの設定は把握できました。後はカスタマイズあるのみ。目指せはてなブログっぽくないデザインです。

ではでは、最後までお付き合いいただきありがとうございました。