2019年11月20日(水)
ブログのレイアウトの見直し #■子猫の手※ガレコレＨＰでは、すでに修正済みです。表示幅320pxのデバイスでも、一般的なAndroidスマホの表示幅360px相当で表示しますので、文字レイアウトの悩みがかなり軽減されました。
現在、子猫の手のブログは、上左1px、下右2pxの線の枠で、1ブログことに区切っています。
スマホの表示幅が320pxの場合、ブログの表示幅が317pxとなり、3px損しています。フォントサイズ12pt(16px)で表示していますが、一行に全角20文字表示できるところ19文字しか表示できなくなります。
ブログで、カレンダーを簡易的に表示したい場合があります。等幅フォントが無茶苦茶になった今、全角と半角を混合で使用することは、かなり難しくなりました。数字の部分を全角にして、日の区切りを半角スペース等にすれば、今の設定でも出来ないことはないのですが、窮屈に見えます。
1行に約全角17文字分
全全
全全
全全
全全
全全
全全
全全
1行に全角20文字
全全 全全 全全 全全 全全 全全 全全
全全│全全│全全│全全│全全│全全│全全
──┴──┴──┴──┴──┴──┴──
つまり、ブログの枠を無くして、背景色および上下の影で区切りを明確する設定であれば、1行に全角20文字が表示できて、簡易カレンダーも改行しない訳です。
【全全半カレンダー】
現在の設定でも、表示幅320px以上で表示可能。
1行全角17文字分
２０１９年１１月
─────────────────
日
月
火
水
木
金
土
─────────────────
１ ２
学
─────────────────
３
４
５
６
７
８
９
画
画
学
─────────────────
１０
１１
１２
１３
１４
１５
１６
イ
画
画
学
─────────────────
１７
１８
１９
２０
２１
２２
２３
画
画
学
─────────────────
２４
２５
２６
２７
２８
２９
３０
画
画
学
─────────────────
【両側罫線落ちカレンダー】
1行全角20文字
２０１９年１１月
──┬──┬──┬──┬──┬──┬──
日│ 月│ 火│ 水│ 木│ 金│ 土
──┼──┼──┼──┼──┼──┼──
│ │ │ │ │ １│ ２
│ │ │ │ │ │ 学
──┼──┼──┼──┼──┼──┼──
３│ ４│ ５│ ６│ ７│ ８│ ９
│ │ 画│ │ 画│ │ 学
──┼──┼──┼──┼──┼──┼──
１０│１１│１２│１３│１４│１５│１６
イ│ │ 画│ │ 画│ │ 学
──┼──┼──┼──┼──┼──┼──
１７│１８│１９│２０│２１│２２│２３
│ │ 画│ │ 画│ │ 学
──┼──┼──┼──┼──┼──┼──
２４│２５│２６│２７│２８│２９│３０
│ │ 画│ │ 画│ │ 学
──┴──┴──┴──┴──┴──┴──
【フル罫線カレンダー】
現在の設定でも、表示幅360px以上で表示可能。
1行全角22文字分（352px余り8px）
２０１９年１１月
┌──┬──┬──┬──┬──┬──┬──┐
│ 日│ 月│ 火│ 水│ 木│ 金│ 土│
├──┼──┼──┼──┼──┼──┼──┤
│ │ │ │ │ │ １│ ２│
│ │ │ │ │ │ │ 学│
├──┼──┼──┼──┼──┼──┼──┤
│ ３│ ４│ ５│ ６│ ７│ ８│ ９│
│ │ │ 画│ │ 画│ │ 学│
├──┼──┼──┼──┼──┼──┼──┤
│１０│１１│１２│１３│１４│１５│１６│
│ イ│ │ 画│ │ 画│ │ 学│
├──┼──┼──┼──┼──┼──┼──┤
│１７│１８│１９│２０│２１│２２│２３│
│ │ │ 画│ │ 画│ │ 学│
├──┼──┼──┼──┼──┼──┼──┤
│２４│２５│２６│２７│２８│２９│３０│
│ │ │ 画│ │ 画│ │ 学│
└──┴──┴──┴──┴──┴──┴──┘
※これぐらいは、表示したいですよね。
現在、かなりのスマホが表示幅360px以上になりました。
デバイスの表示幅320pxの場合、強制的に表示幅360pxに変更しようと考えています。フォントサイズが12ptから10.67ptになってしまいますが、『子猫の手』利用者のことを考えれば、妥協できると思います。文字が小さいとお感じならば、横向きにしてご利用頂ければと思います。決して、切り捨てではありません。ガレコレでは、昔のiPhone5c(表示幅320px)できちんと確認して、落としどころを探っています。
P.S.
veiwportをいじっても、文字が思ったようには小さくならないことが分かりました。
veiwportをいじらず、全体のフォントサイズを小さくしても、文字が思ったようには小さくならないことが分かりました。
結論として、veiwportをいじらず、全体のフォントサイズも12ptのままいじらず、部分的に10.5ptにすることで解決するに至りました。
長い長い道のりがありましたが、class="memo"のコンテンツだけ12pt→10.5ptにすれば良かった訳です。罫線の使用を前提としていますので、.memoにもline-height:1em;を記述しておきます。表示幅320pxのiPhone5cでも、フル罫線カレンダーがきちんと表示できています。
--
抜粋
--
<html>
<head>
<meta
name="viewport"
content="width=device-width">
<style>
body
{
font-size:12pt;
line-height:1em;
}
.memo
{
line-height:1em;
}
</style>
<script>
window.onload
=
function(){
$width
=
window.parent.screen.width;
if($width
<=
320){
$target
=
document.getElementsByClassName("memo");
for($i=0;
$i
<
$target.length;
$i++){
$target[$i].style.fontSize
=
"10.5pt";
}
}
}
</script>
</head>
<body>
<div
class="memo">フル罫線カレンダー</div>
</body>
</html>
--
┌────────────┐
│body
12pt
│┌──────────┐
││.memo
12pt→10.5pt
││
│└──────────┘│
│ │
└────────────┘
お問い合わせ