レイアウトを変える(1カラムなど)
Plainはデフォルトでは2カラムで#blog-title
の位置を#main
に合わせてありますが、簡単に変えることができます。
ここではいくつか他のレイアウトを紹介します。デザインCSSを追加で貼ってください。(貼り方)
※このページのCSSは、他のすべてのカスタマイズよりも上に貼ってください。
サイドバーを左へ
このあとのサイドバーを下げるスタイルと両立できます(両方貼ればOKです)。
その場合先にこちらを貼ってください。
/*----------サイドバーを左に----------*/ #content-inner {flex-direction:row-reverse;} #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (730px + 2rem + (360px + 2rem))) / 2) + (360px + 4rem));} #box2 {margin-left:0; margin-right:2rem;} /* Media Queries - smallpc */ @media (max-width: 1175px) { #box2 {margin-left:0; margin-right:1vw;} #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (730px + 1vw + (300px + 2rem))) / 2) + (300px + 2rem + 1vw));} } /* Media Queries - tablet */ @media (max-width: 1095px) { #top-box, #blog-title, .ontitle-menu {margin-left:calc(((100vw - (67vw + 1vw + 30vw)) / 2) + 31vw);} } /* Media Queries - mobile */ @media (max-width: 767px) { #top-box, #blog-title, .ontitle-menu {margin-left:0;} #box2 {margin-right:0;} } /*----------/サイドバーを左に----------*/
1カラムにする
構造的に1カラムにしている部分は/*1カラムにする*/
だけです。他は細部の調整なので、必要な部分だけ使ってください。
/*---------- 1column ----------*/ /*1カラムにする*/ #content-inner {-webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -o-flex-direction:column; flex-direction:column;} #content-inner > * {margin:0 auto;} #blog-title, .ontitle-menu {margin:0;width:100vw;} /*#blog-titleを幅いっぱいに*/ #container {padding-top:37px;} /*上の隙間をなくす(はてなグローバルヘッダ非表示の場合は0px)*/ /*パンくずリストの調整*/ #top-box {margin:0 auto auto 2em; padding:0.4em;} @media (max-width:1175px) {#top-box{margin:0 auto auto 2em;}} @media (max-width: 767px) {#top-box{margin:-3.4em auto auto 0;}} /*#mainのwidth調整*/ #main {width:71vw;} @media (max-width:1130px) {#main{width:80vw;}} @media (max-width: 894px) {#main{width:90vw;}} @media (max-width: 767px) {#main{width:100vw;}} /*サイドバー調整*/ #box2 {width:100vw;padding-top:4em;} #box2-inner {display:flex;justify-content:center;flex-direction:row;align-items:flex-start; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap;} .hatena-module {width:500px;margin:1em;background:none;border:solid 1px #aaa;} @media (max-width:1130px) { .hatena-module {width:360px;box-sizing:content-box;margin:0.5em;} } @media (max-width: 816px) { .hatena-module {width:336px;} } @media (max-width: 767px) { .hatena-module {width:100%;margin:0;border:none;} #box2 {padding-top:0;} #container {margin-bottom:0;} } /*----------/ 1column----------*/
2カラムのままサイドバーを下げる
※サイドバーを左にする場合は先にそちらのコードを貼ってください
左の写真のように#blog-titleのスタイルをキープする場合はこちらのコードを貼ってください。
/*サイドバーを下げる*/ #box2 {margin-top:2rem;} /*#blog-titleの幅の調整(box-sizingに注意)*/ #blog-title, .ontitle-menu {margin:0 auto;width:calc(730px/*#mainのwidth*/ + 2rem/*#box2のmargin-left*/ + (360px + 2rem)/*#box2のwidth*/);} @media(max-width:1175px){#blog-title, .ontitle-menu{width:calc(730px + 1vw + (300px + 2rem));}} @media(max-width:1095px){#blog-title, .ontitle-menu{width:calc(67vw + 1vw + 30vw);}} @media(max-width: 767px){#blog-title, .ontitle-menu{width:100vw;}}
右の写真のように#blog-titleを画面幅いっぱいにする場合は上は貼らずにこちらを↓貼ってください。
/*サイドバーを下げる*/ #box2 {margin-top:2rem;} /*#blog-titleを幅いっぱいに*/ #blog-title, .ontitle-menu {margin:0;width:100vw;} #container {padding-top:37px;} /*上の隙間をなくす(はてなグローバルヘッダ非表示の場合は0px)*/
折衷:タブレットサイズくらいから1カラム
→
そんなせまい画面にサイドバーいらないよ、という方はこちらをどうぞ。
/* ---------- タブレットサイズから1カラムにする ----------*/ /* Media Queries - tablet */ @media (max-width: 1095px) { #content-inner {-webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -o-flex-direction:column; flex-direction:column;} #content-inner > * {margin:0 auto;} #blog-title, .ontitle-menu {margin:0;width:100vw;} /*#blog-titleを幅いっぱいに*/ #container {padding-top:37px;} /*上の隙間をなくす(はてなグローバルヘッダ非表示の場合は0px)*/ /*パンくずリストの調整*/ #top-box{margin-left:1em;} /*#mainのwidth調整*/ #main {width:80vw;} /*サイドバー調整*/ #box2 {width:100vw;padding-top:4em;} #box2-inner {display:flex;justify-content:center;flex-direction:row;align-items:flex-start; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap;} .hatena-module {width:360px;box-sizing:content-box;margin:0.5em;background:none;border:solid 1px #aaa;} } @media (max-width:841px) { .hatena-module {width:334px;} } @media (max-width: 802px) { #main{width:90vw;} } @media (max-width: 767px) { #top-box{margin:-3.4em auto auto 0;} #main{width:100vw;} .hatena-module {width:100%;margin:0;border:none;} #box2 {padding-top:0;} #container {margin-bottom:0;} } /* ----------/ タブレットサイズから1カラムにする----------*/