フォト

プロフィール

お問い合わせ・ご相談

  • お問い合わせ・ご相談のお申し込みにつきましてはこちらのページをご覧ください。

ブログランキング

« 2018年5月 | トップページ | 2018年10月 »

2018年6月

2018年6月29日 (金)

梅雨明け

関東甲信地方で6月中に梅雨明けするのは観測史上初だそうで。

Simg_5532

刑事事件を担当していると,裁判に向けての打合せのために東京拘置所に接見(面会)に行くことになるのですが,最寄りの小菅駅から東京拘置所までの道には日差しを遮るものがほとんど何もないので,夏は接見(面会)に行くたびに汗だくになります。

弁護士は体力勝負,ですね。

2018年6月28日 (木)

事務所リーフレット

経堂綜合法律事務所のリーフレットができました。

Simg_5527_5

事務所の玄関と相談室に設置しておりますので,ご相談等でお越しいただいた際にはどうぞお気軽に持ち帰りください。
(頑張って事務所の外でも配布しないといけないですね。)

Simg_5516

2018年6月12日 (火)

レスポンシブデザインへの変更@ココログ-その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;
}

}

« 2018年5月 | トップページ | 2018年10月 »

2019年1月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31