弁護士 木村康之のブログ

世田谷区・経堂の弁護士です。身近な法律問題についての情報を発信していきます。

レスポンシブデザインへの変更@ココログ-その1-

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

ビューポートの設定

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

<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;
}

}