Plain

テーマ「Plain」の見本ブログです。

トップ > テーマの説明 > レイアウトの説明

レイアウトの説明

テーマの説明 カスタマイズ

Plainはflexboxによる自由度の高いレイアウトが特長の２カラムテーマです（１カラムにもできます）。
ユーザーによるカスタマイズが前提なので、簡単にレイアウトを載せておきます。

全体

f:id:simonsnote:20170731121353p:plain
#blog-titleの位置を#mainに合わせて、#box2(サイドバー)を上に持ち上げた構造になっています。
持ち上げる距離(margin-topのマイナス量)は#blog-titleのheight(デフォルトでは200px)と同じ分です。

図には書いていませんが、#blog-titleの下に#top-box(パンくずリスト)があります。
が、position:absoluteとなっているので、この分のheightなどは考慮する必要はありません。

#content（flex部分）

f:id:simonsnote:20170801132749p:plain
#content-innerをflexboxとして、#mainと#box2(サイドバー)がflexコンテンツとなっています。
そのためwidthなどを自由にレイアウトでき、また簡単に１カラムにもできます。
この部分のCSSは以下の通りです。

#content-inner {
    display: flex;
    justify-content:center;
    flex-wrap:wrap;
}

テーマでは中央寄せにしていますが、flexレイアウトは簡単にカスタマイズできます。
こちらのページが参考になります。


１カラムにする

こちらのページを参照してください。


#blog-titleと#top-box(パンくずリスト)の位置とwidth

f:id:simonsnote:20170801132727p:plain
#blog-titleと、図には書いていませんが#top-box(パンくずリスト)は#mainと見た目上の位置を合わせています。しかしこれは見た目上でしかないので、#content内の要素（#mainと#box2）のwidthなどを変えた場合は調整する必要があります。
#mainと#box2はflexコンテンツなので、marginは自動で調整されています。そこでcalc()を使います。
この際、box-sizingに注意してください。（デフォルトではbox-sizing:border-box;になっているので大丈夫です）

#blog-title, #top-box
 {margin-left: calc(( 100vw - (#mainのwidth + #box2のwidth + #box2のmargin-left)) / 2);}

デフォルトの値

デフォルトではこのようになっています。（横方向位置の設定のみ抜粋）

#blog-title, #main
 {width:730px;}

#box2
 {width:calc(360px + 2rem); /*box-sizing:border-boxで中身を360pxにするため*/
  margin-left:2rem;}

#blog-title, #top-box
 {margin-left:calc((100vw - (730px + 2rem + (360px + 2rem))) / 2);}


/*--------------------メディアクエリ設定は以下のようになっています--------------------*/
/* Media Queries - smallpc */
@media (max-width: 1175px) {
    #box2
    {width:calc(300px + 2rem);margin-left:1vw;}
    #top-box, #blog-title
    {margin-left:calc((100vw - (730px + 1vw + (300px + 2rem))) / 2);}
}
/* Media Queries - tablet */
@media (max-width: 1095px) {
    #box2
    {width:30vw;}
    #blog-title, #main
    {width:67vw;}
    #top-box, #blog-title
    {margin-left:calc((100vw - (67vw + 1vw + 30vw)) / 2);}
}
/* Media Queries - mobile */
@media (max-width: 767px) {
    #box2
    {width:100%;
     margin-left:0;}
    #blog-title, #main
    {width:100vw}
    #top-box, #blog-title
    {margin-left:0;}
    #top-box
    {padding-left:1em;}
}




ページ上部の余白部分（#containerのpadding-top）

f:id:simonsnote:20170731145820p:plain
#blog-titleや#box2の上に余白を設けています。これは#containerのpadding-topです。
このようになっています。

#container
 {padding-top:calc(37px + 2em);}

余白がいらなければ、2emの部分を0とします。またこの37pxははてなグローバルヘッダの分なので、非表示の場合はpadding-top:0;とします。



#blog-title内のレイアウト

f:id:simonsnote:20170731143000p:plain
#blog-titleはdisplay:tableとなっており、中の#blog-title-innerがdisplay:table-cellとなっています。

CSSは以下のようになっています。
デフォルトでは左上揃えとなっていますが、変える場合は追加で貼ってください。

#blog-title-inner
 {vertical-align: top; /*上揃え：top、中揃え：middle、下揃え：bottom*/
  text-align: left;    /*左寄せ：left、中寄せ：center、右寄せ：right*/
  padding: 2em;}




box2(サイドバー)内のレイアウト

f:id:simonsnote:20170731144745p:plain:h400:left
サイドバー内のプロフィールや関連記事などのモジュールには.hatena-moduleというクラスが割り当てられています。.hatena-module{}に対してスタイルを設定すれば、すべてのモジュールに適用されます。
ここのCSS（レイアウトに関する部分）は以下のようになっています。

.hatena-module
 {margin-bottom:1em;
  padding:1em;}

デフォルトでは.hatena-moduleの中に収まるコンテンツの幅は画面サイズに応じて

360px(Google AdSenseインフィード広告などが収まる)
→300px(Google AdSenseラージスカイスクレイパーなどが収まる)
→30vw(レスポンシブ広告など)
→100%(モバイル時)

となります。メディアクエリ設定の詳細は次の章をご覧ください。

メディアクエリによる設定

メディアクエリ（画面幅）に対応するCSSは以下のようになっています。

/* Media Queries - smallpc */
@media (max-width: 1175px) {
    #box2
    {width:calc(300px + 2rem);margin-left:1vw;}
    #top-box, #blog-title
    {margin-left:calc((100vw - (730px + 1vw + (300px + 2rem))) / 2);}
}

/* Media Queries - tablet */
@media (max-width: 1095px) {
    #box2
    {width:30vw;}
    #blog-title, #main
    {width:67vw;}
    #top-box, #blog-title
    {margin-left:calc((100vw - (67vw + 1vw + 30vw)) / 2);}

    #main
    {padding:0 1em;}
    .page-archive .archive-entries .archive-entry
    {margin-bottom:1em;}
}

/* Media Queries - mobile */
@media (max-width: 767px) {
    #box2
    {width:100%;
     margin-left:0;
     margin-top:2em;}
    #blog-title, #main
    {width:100vw}
    #top-box, #blog-title
    {margin-left:0;}
    #top-box
    {padding-left:1em;
     margin-top:-2em;}

    #container
    {padding-top:37px;}
    #main
    {margin-top:0em;}

    .page-index #main
    {padding-top:0;}
    .page-index .archive-entry
    {margin-bottom:-1px;}

    .page-archive #main
    {padding:0;
     border:none;}
    .page-archive .archive-header-category, .page-archive .search-result
    {padding:0.5em 0 0.5em 1.5em;}
    .page-archive .archive-entries .archive-entry
    {margin:0;
     border-bottom:none;
     border-top: solid 1px #eee;}
    .hatena-module
    {margin-bottom:0;}
}

メディアクエリに対応して広告コンテンツなどの表示・非表示を切り替えたい場合は専用divクラスをご利用ください。




レイアウトの説明は以上ですが、不明点などあればお気軽にコメントにてご質問ください。