2019年5月13日(月)
ガレコレHPの看板とバーナー #■子猫の手

　ガレコレHPのトップページにおいて、看板とバーナーを修正しました。


■ガレコレHPの看板

　看板の文字の行間が間延びしていたので、line-height:1em;として行高を修正しました。文字サイズは、iPhone5cの幅320pxでも折り返しにならないまで、大きくしました。

< 4px .sign
< 36px mobileの場合（バーナー）
ガレコレ <48pt
Garage Collection <20pt
< 10px
< 4px .sign

--
<div class="sign" id="id_sign">

<div id="id_top_margin"></div>

<div style="line-height:1em; font-size:48pt;">ガレコレ</div>

<div style="margin-bottom:10px;line-height:1em; font-size:20pt; text-shadow:2px 1px 3px;">Garage Collection</div>

</div>
--


■ガレコレHPのバーナー

　iPhoneXにおいて、各部署のバーナーをページ最下部に置いた場合、一度のタップではリンクに飛ばず、ホームバーに重ならないように、画面角丸で削れないように配慮しなければなりませんでした。

　そこで、mobile(iPhone, iPad, Android)の場合、バーナーを、ページ最上部に置くことにしました。

　パソコンの場合、画面左右の余白がある場合はバーナーを右に表示して、狭い場合はバーナーを非表示にしました。バーナーは、100%倍率時に幅200pxに表示されるサイズに統一しています。解像度の幅1366pxのパソコンでは、全画面表示の場合、150%倍率までバーナーが表示されます。

mobile
[sanzui][neconote][jujo aikido]

PC・・・右寄せ
[sanzui]
[neconote]
[jujo aikido]

--
<div class="memo" id="line25">

<div style="position:fixed; background:#111111; text-align:center;" id="id_banner"></div>

<script>

var $ua = window.navigator.userAgent.toLowerCase();

_banner();

if($ua.indexOf('mobile') == -1){
window.onresize = _banner;
}

function _banner(){

var $ratio = window.devicePixelRatio;
var $width = (window.innerWidth - 600)/2;

if($ua.indexOf('mobile') != -1){
// mobile (iPhone, iPad, android)
document.getElementById("id_top_margin").style.height = "36px";
document.getElementById("id_banner").style.top = "0px";
document.getElementById("id_banner").style.left = "0px";
document.getElementById("id_banner").style.width = "100%";

document.getElementById("id_banner").innerHTML = '<a href="http://neconote.jp/index.php?page=5#line1"><img src="/image/gc/sanzui.png" style="width:30%; max-width:140px; margin:8px 1% 8px 3%;"></a><a href="http://neconote.jp/index.php?page=6#line1"><img src="/image/gc/neconote.png" style="width:30%; max-width:140px; margin:8px 1% 8px 1%;"></a><a href="http://neconote.jp/index.php?page=7#line1"><img src="/image/gc/jujo.png" style="width:30%; max-width:140px; margin:8px 3% 8px 1%;"></a>';

}else if($width > 150){
// PC（画面左右の余白が150pxより大きい場合）

$width = 200/$ratio;
document.getElementById("id_banner").style.top = "4px";
document.getElementById("id_banner").style.right = "8px";

document.getElementById("id_banner").innerHTML = '<a href="http://neconote.jp/index.php?page=5#line1"><img src="/image/gc/sanzui.png" style="width:'+$width+'px; margin:4px 0px;"></a><br><a href="http://neconote.jp/index.php?page=6#line1"><img src="/image/gc/neconote.png" style="width:'+$width+'px; margin:4px 0px;"></a><br><a href="http://neconote.jp/index.php?page=7#line1"><img src="/image/gc/jujo.png" style="width:'+$width+'px; margin:4px 0px"></a>';

}else{
// バーナー非表示
document.getElementById("id_banner").innerHTML = "";
}

}
</script>

</div>
--


P.S. 既存の子猫の手で、バーナーの固定表示を実現してみました。Version 2 Finalで、簡単に組み込めるようにします。