ガレコレ [Garage Collection]
2019年11月20日(水)
ブログのレイアウトの見直し ■子猫の手
※ガレコレHPでは、すでに修正済みです。表示幅320pxのデバイスでも、一般的なAndroidスマホの表示幅360px相当で表示しますので、文字レイアウトの悩みがかなり軽減されました。


 現在、子猫の手のブログは、上左1px、下右2pxの線の枠で、1ブログことに区切っています。

 スマホの表示幅が320pxの場合、ブログの表示幅が317pxとなり、3px損しています。フォントサイズ12pt(16px)で表示していますが、一行に全角20文字表示できるところ19文字しか表示できなくなります。

 ブログで、カレンダーを簡易的に表示したい場合があります。等幅フォントが無茶苦茶になった今、全角と半角を混合で使用することは、かなり難しくなりました。数字の部分を全角にして、日の区切りを半角スペース等にすれば、今の設定でも出来ないことはないのですが、窮屈に見えます。

1行に約全角17文字分
全全
 
全全
 
全全
 
全全
 
全全
 
全全
 
全全

1行に全角20文字
全全 全全 全全 全全 全全 全全 全全
全全│全全│全全│全全│全全│全全│全全
──┴──┴──┴──┴──┴──┴──

 つまり、ブログの枠を無くして、背景色および上下の影で区切りを明確する設定であれば、1行に全角20文字が表示できて、簡易カレンダーも改行しない訳です。

【全全半カレンダー】
現在の設定でも、表示幅320px以上で表示可能。
1行全角17文字分
2019年11月
─────────────────
 日
 
 月
 
 火
 
 水
 
 木
 
 金
 
 土
─────────────────
  
 
  
 
  
 
  
 
  
 
 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
  
 
  
 
 画
 
  
 
 画
 
  
 
 学
─────────────────

【両側罫線落ちカレンダー】
1行全角20文字
2019年11月
──┬──┬──┬──┬──┬──┬──
 日│ 月│ 火│ 水│ 木│ 金│ 土
──┼──┼──┼──┼──┼──┼──
  │  │  │  │  │ 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
  │  │ 画│  │ 画│  │ 学
──┴──┴──┴──┴──┴──┴──

【フル罫線カレンダー】
現在の設定でも、表示幅360px以上で表示可能。
1行全角22文字分(352px余り8px)
2019年11月
┌──┬──┬──┬──┬──┬──┬──┐
│ 日│ 月│ 火│ 水│ 木│ 金│ 土│
├──┼──┼──┼──┼──┼──┼──┤
│  │  │  │  │  │ 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│
│  │  │ 画│  │ 画│  │ 学│
└──┴──┴──┴──┴──┴──┴──┘
※これぐらいは、表示したいですよね。


 現在、かなりのスマホが表示幅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
││
│└──────────┘│
│            │
└────────────┘
 
お問い合わせ


by Network Communication Note