サイドバーを右へ

Essayの元になっているテーマPlainは自由なレイアウトが特長なので、Essayもレイアウトを自由にできます。

サイドバーを単純に右にするだけでなく、1カラムにしたり他にも細かくいじれます。


サイドバーを右へ

f:id:simonsnote:20171225161729p:plain:w400
以下のCSSを貼ってください貼り方

/*----------サイドバーを右へ----------*/
#content-inner
{flex-direction:row;}
#top-box
{margin-left:calc((100vw - (730px + 2rem + (360px + 2rem))) / 2);}
#box2
{margin-left:2rem;
 margin-right:0;}
/* Media Queries - smallpc */
@media (max-width: 1175px) {
    #box2
    {margin-left:1vw;
     margin-right:0;}
     
    #top-box
    {margin-left:calc((100vw - (730px + 1vw + (300px + 2rem))) / 2);}
}
/* Media Queries - tablet */
@media (max-width: 1095px) {
    #top-box
    {margin-left:calc((100vw - (67vw + 1vw + 30vw)) / 2);}
}
/* Media Queries - mobile */
@media (max-width: 767px) {
    #top-box
    {margin-left:0;}
    #box2
    {margin-left:0;}
}

#box2
{border:none;
 border-left:solid 1px #666;}
/*----------/サイドバーを右へ----------*/


サイドバーを上げる

サイドバーの位置(右か左か)によってどちらかのみ貼ってください。

サイドバーの位置が左の場合

f:id:simonsnote:20171225161912p:plain:w400
以下のCSSを貼ってください貼り方

/*----------サイドバーを上げる(左)----------*/
#blog-title
{height:160px;}

#box2
{margin-top:-160px;}

#blog-title, .ontitle-menu
{margin-left:calc(((100vw - (730px + 2rem + (360px + 2rem))) / 2) + (360px + 4rem));}

#blog-title, .ontitle-menu
    {box-sizing:border-box;width:730px;}

@media (max-width: 1175px) {
    #blog-title, .ontitle-menu
    {margin-left:calc(((100vw - (730px + 1vw + (300px + 2rem))) / 2) + (300px + 2rem + 1vw));}
}
@media (max-width: 1095px) {
    #blog-title, .ontitle-menu
    {width:67vw;}
    
    #blog-title, .ontitle-menu
     {margin-left:calc(((100vw - (67vw + 1vw + 30vw)) / 2) + 31vw);}
}
@media (max-width: 767px) {
    #blog-title, .ontitle-menu
    {width:100vw}
    
    #blog-title, .ontitle-menu
    {margin-left:0;}
}

#blog-title-inner
{vertical-align:top;
 padding:40px 20px;}

#essaytopmenu
{top:auto;
 right:auto;
 margin-top:-80px;
 padding-right: 0;}

@media (max-width: 767px) {
    #blog-title
    {height:80px;}

    #blog-title-inner
    {vertical-align:middle;
     padding:0 40px;}
 
    #essaytopmenu
    {position:static;
     margin-top:0;
     padding:0.5rem;}
}

.entry-header
{padding-top:60px;}

.page-entry #top-box
{margin-top: 150px;}
/*----------/サイドバーを上げる(左)----------*/


サイドバーの位置が右の場合

f:id:simonsnote:20171225161945p:plain:w400
「サイドバーを右へ」のCSSの後に、以下のCSSを貼ってください貼り方

/*----------サイドバーを上げる(右)----------*/
/*サイドバーを下げる*/
#blog-title
{height:160px;}

#box2
{margin-top:-160px;}

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

#blog-title, .ontitle-menu
    {box-sizing:border-box;width:730px;}

@media (max-width: 1175px) {
    #blog-title, .ontitle-menu
    {margin-left:calc((100vw - (730px + 1vw + (300px + 2rem))) / 2);}
}
@media (max-width: 1095px) {
    #blog-title, .ontitle-menu
    {width:67vw;}
    
    #blog-title, .ontitle-menu
    {margin-left:calc((100vw - (67vw + 1vw + 30vw)) / 2);}
}
@media (max-width: 767px) {
    #blog-title, .ontitle-menu
    {width:100vw}
    
    #blog-title, .ontitle-menu
    {margin-left:0;}
}

#blog-title-inner
{vertical-align:top;
 padding:40px 20px;}

#essaytopmenu
{top:auto;
 right:auto;
 margin-top:-80px;
 padding-right: 0;}

@media (max-width: 767px) {
    #blog-title
    {height:80px;}

    #blog-title-inner
    {vertical-align:middle;
     padding:0 40px;}
 
    #essaytopmenu
    {position:static;
     margin-top:0;
     padding:0.5rem;}
}

.entry-header
{padding-top:60px;}

.page-entry #top-box
{margin-top: 150px;}
/*----------/サイドバーを上げる(右)----------*/


1カラムにしたい場合

こちらの記事を参考に「方法2」でPlainをインストールし、


そして貼ったデザインCSSの一番上の
/*----------サイドバーを左に----------*/から/*----------Global----------*/直前までを削除、その部分にこちらのページの「1カラム」のコードを貼ればOK...と思います


検証はしてないです。あしからず...

リクエストがあればちゃんと1カラム用の追加のCSSを用意するので、お気軽にコメントにどうぞ!