img+colorシリーズCSS一部修正について
【対象】
00.見本とシリーズ説明、
01.Lost universe、
02.静謐を纏う、
03.雀色時、
04.夢幻を游ぐ、
05.怠惰日和、
06.夏色の記憶、
07.Wonderland、
08.胡蝶の夢、
09.pinky sheep、
10.Silent blue、
11.anthesis、
12.渇仰、
13.よひら、
14.白詰草、
15.夢の浮き橋、
16.懐古主義、
17.沈む、沈む、、
18.レトロ-フォトグラフ、
19.バルーンフェスタ、
20.fioretta、
21.LIFE、
22.Don’t cry baby、
23.forest notes、
24.玉響、
25.Amnesia、
26.Revolve【理由】
タブレットや大画面スマートフォンで閲覧した場合のレイアウト改善。
現状でも不具合が起こっているわけではありませんので、タブレット等を閲覧対象にされている方で、改善したほうがいいと思われる方は、お手数ですが再度コピーページよりCSSをコピーして適用するか、下記部分を修正お願いします。
27.サライ以降については最初から対応しています。
※
21.LIFE以外
▼変更前
/* PC外枠 */
<pc_only>
.waku {
width: 500px;
margin: 1em auto;
}
</pc_only>
▼変更後
/* 外枠 */
<pc>
.waku {
width: 500px;
margin: 0 auto;
}
@media only screen and (max-width: 560px) {
.waku {width: auto;}
}
</pc>
この部分を変更することにより、PC・スマートフォンで閲覧時、画面サイズが560px以上の端末ではそれ以上広がらず、560px以下の端末では画面サイズいっぱいに広がるようになります。
※
21.LIFEは以下
(枠線があるため、他と多少CSSが異なります)
すみません、変更前CSSは、メモをとるのを忘れてしまったため、『/* 外枠 */』の部分のブロックをまるっと変更して下さい申し訳ないです…!
▼変更後
/* 外枠 */
.waku {
border: 1px solid #cdd4db;
}
<nopc>
.waku {margin: 0.4em;}
</nopc>
<pc>
.waku {
width: 500px;
margin: 0 auto;
}
@media only screen and (max-width: 560px) {
.waku {
width: auto;
margin: 1em;
}
}
</pc>
(2014.10.13)