レスポンシブデザインへの変更＠ココログ－その１－

以前の記事に書きましたが，ブログをレスポンシブデザインに変更しました。
変更にあたって，いくつか悩むところもあったので，備忘も兼ねて，手順を公開しておきます。
（※　プランはココログプロを使用しています。）

ビューポートの設定

まずは，設定→「ブログのサブタイトル」に以下のとおり記述します。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0">

スタイルシートの記述

レイアウトは，ココログのテンプレートのうち「両サイドバー付」を使っていましたが，レスポンシブデザインに変更するにあたって，

• ブレイクポイントは480px，800pxで区切る。
• カラムの並び順を記事→右サイドバー→左サイドバーとして，縦並びにする。
• 右サイドバーの並び順を，最近の記事→カテゴリー→バックナンバーとして，カレンダーを非表示にする。
• バナー画像はオリジナルのものを用いる。

とすることにしました。

これらを踏まえたスタイルシートが以下のものになります。

@media screen and (max-width: 480px) {
#container {
font-size: 105%;
width: auto;
}

#header {
width: auto;
}

#header-inner {
width: auto;
}

#banner {
background: url(http://kmrysyk.cocolog-nifty.com/banner-m1.png) no-repeat top left;
background-size: auto;
width: auto;
height: auto;
min-height: 120px;
}

#banner-inner {
width: auto;
padding: 28px 0 0 90px;
}

#banner-header {
font-size: 18px;
width: auto;
}

#banner-description {
font-size: 13px;
width: auto;
}

.entry-header,
.entry-header a {
font-size: 17px;
width: auto;
}

.layout-three-column #pagebody {
width: auto;
}

.layout-three-column #pagebody-inner {
width: auto;
display: flex;
flex-direction: column;
}

.layout-three-column #alpha {
order: 3;
width: auto;
}

.layout-three-column #gamma {
order: 2;
width: auto;
}

.layout-three-column #beta {
order: 1;
width: auto;
}

.layout-three-column #beta-inner {
padding: 0% 4% 0% 4%;
width: auto;
}

.layout-three-column #gamma-inner {
width: auto;
display: flex;                  
flex-direction: column;
}

.layout-three-column #recent-entries {
order: -2;
width: auto;
}

.layout-three-column #archive-category {
order: -1;
width: auto;
}

.module-header {
font-size: 1em;
width: auto;
}

.module .module-header a,
.module-header .edit a {
font-size: 1em;
width: auto;
}

.module-content {
font-size: 1em;
width: auto;
}

.module-calendar {
display: none;
width: auto;
}

#footer {
width: auto;
}

#footer-inner {
width: auto;
}

}

@media screen and (min-width: 481px) and (max-width: 800px) {
#container {
font-size: 125%;
width: auto;
}

#header {
width: auto;
}

#header-inner {
width: auto;
}

#banner {
background: url(http://kmrysyk.cocolog-nifty.com/banner.png) no-repeat top left;
background-size: container;
width: auto;
height: auto;
min-height: 170px;
}

#banner-inner {
padding: 55px 0 60px 195px;
width: auto;
}

#banner-header {
font-size: 24px;
width: auto;
}

#banner-description {
width: auto;
}

.layout-three-column #pagebody {
width: auto;
}

.layout-three-column #pagebody-inner {
width: auto;
display: flex;         
flex-direction: column;
}

.layout-three-column #alpha {
order: 3;
width: auto;
}

.layout-three-column #gamma {
order: 2;
width: auto;
}

.layout-three-column #beta {
order: 1;
width: auto;
}

.layout-three-column #beta-inner {
padding: 0% 4% 0% 4%;
}

.layout-three-column #gamma-inner {
width: auto;
display: flex;                  
flex-direction: column;
}

.layout-three-column #recent-entries {
order: -2;
}

.layout-three-column #archive-category {
order: -1;
}

.module-header {
font-size: 1em;
}

.module .module-header a,
.module-header .edit a {
font-size: 1em;
}

.module-content {
font-size: 1em;
}

.module-calendar {
display: none;
}

#footer {
width: auto;
}

#footer-inner {
width: auto;
}

}