Plain

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

レイアウトを変える(1カラムなど)

Plainはデフォルトでは2カラムで#blog-titleの位置を#mainに合わせてありますが、簡単に変えることができます。

ここではいくつか他のレイアウトを紹介します。デザインCSSを追加で貼ってください。(貼り方

※このページのCSSは、他のすべてのカスタマイズよりも上に貼ってください。

サイドバーを左へ

f:id:simonsnote:20171213165956p:plain:w400
このあとのサイドバーを下げるスタイルと両立できます(両方貼れば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カラムにする

f:id:simonsnote:20170802104447p:plain

構造的に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カラムのままサイドバーを下げる

サイドバーを左にする場合は先にそちらのコードを貼ってください

f:id:simonsnote:20170801140524p:plain
f:id:simonsnote:20170801140544p:plain


左の写真のように#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カラム

f:id:simonsnote:20170802110439p:plain
f:id:simonsnote:20170802110501p:plain
このテーマのもともとのレイアウトは、画面がけっこう狭くなっても頑張って2カラムをキープします。(理由はテーマレベルでメディアクエリ設定が多いとカスタマイズ時に面倒だからです)
そんなせまい画面にサイドバーいらないよ、という方はこちらをどうぞ。

/* ---------- タブレットサイズから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カラムにする----------*/