アメブロの記事は、パソコンやスマホやタブレット、はたまたモバイル（フィーチャーフォン、つまりガラケー）で、同じ記事でも見え方が違う場合がある。
主に使うのは、ブラウザのインスペクター
パソコンでchromeを使っているなら、調べたいページで、Ctrl + Shift + J
パソコンにデータ転送ケーブルで繋がっているスマホやタブレットを調べたいなら、
chrome://inspect/#devices
といった感じです。
因みに、スマホやタブレットと、パソコンやUSB電源につなぐケーブルですが、
データ転送ケーブルと、充電ケーブルと、用途が違うものがあります。
一般的に、データ転送系ブルは黒、充電ケーブルは白、ということですが、カラフルなケーブルもあるので、多少、データ転送ケーブルのほうが太いかと思いますが、外見で見分けるのは難しいかと思う。
さて、インスペクターに話しを戻して、インスペクターというと、ミシェランとかの星を、隠密に検査したり監視したりする人のことを指したりします。
ブラウザのインスペクターは、検査・監視ツールということでしょう。
これは、chromeだけのことではなくて、他のブラウザにも搭載されている機能ではありますが、呼び出し方法は異なるかと思います。
例えば、アメブロでは記事の一番上に来る画像が、その記事のリンク画像になります。
この記事の1つ前の記事は、「ペットの歴史」ですが、エメラルドかめの画像が使われているかと思います。
このページの下部でも確認出来るかと思います。
しかし、エメラルドかめの画像は、パソコンではトップにあるようには見えないはずです。
誰しもが、使われる画像を選びたいが、その画像は必ずしも先頭に来る画像とは限らないってことは、結構あるかと思います。
そういうときのテクニックとして、トップに隠し画像として仕込むというテクニックですね。
アメブロで、画像を貼り付けると、
<a href="エメラルドかめの画像のurl"><img src="エメラルドかめの画像のurl" /></a>
のような構造になります。
これに、style=で、
style="display:none;"
というcssをhtmlタグに追加します。
簡単に説明すると、このタグは表示しないってことです。
例1)
imgタグに追加した場合
<a href="エメラルドかめの画像のurl"><img src="エメラルドかめの画像のurl" style="display: none;" /></a>
例2)
aタグに追加した場合
<a href="エメラルドかめの画像のurl" style="display: none;"><img src="エメラルドかめの画像のurl" /></a>
パソコンのブラウザでみるかぎり、どちらもエメラルドかめの画像はトップに現れません。
しかし、スマホやタブレットでみると、例1ではエメラルドかめの画像が表示されてしまいます。
インスペクターで調べてみたところ、スマホやタブレットでは、タグが改ざんされていて、
<a href="エメラルドかめの画像のurl">
<span>
<img src="エメラルドかめの画像のurl" />
<noscript>
</noscript>
</span>
</a>
のように、imgタグがspanタグで囲まれていて、そのspanタグの中には、imgタグの後にnoscriptタグもあります。
おそらくはnoscriptタグが画像の実態なのだと思われ、これが原因で、例1ではstyle="display: none;"が効かなかったということです。
また、タグのネスト構造について、どこに原因があるのかを探るために、いろいろ仕込んだりします。
ペットの歴史記事の中で、大きな表組みを作っていて、表のセルには、スクロールバーで色違いのペットが閲覧出来るようにしてあります。
構造的には、
<table id=#pet>
<thead>
<tr>
<td></td>
…
</tr>
</thead>
<tbody>
<tr>
<td></td>
…
</tr>
…
</body>
<tfoot>
<tr>
<td></td>
…
</tr>
</tfoot>
</table>
のようになっています。
theadタグや、tfootタグには、ペットの種類（柴犬、ネコ、パンダ、…）がtdタグに書いてあります。
tbodyタグには、ペットの画像を載せてあります。
tbodyタグはheightを指定して、オーバーフローしたらスクロールバーがでるようにcssで設定してあります。
例1) ペットが1種類の場合のtdタグ配下の構造
<td>
<img src="ペットの画像のURL" />
</td>
例2) ペットが数種類の場合のtdタグ配下の構造
<td>
<div>
<div>
<img src="ペット1の画像のURL" />
<img src="ペット2の画像のURL" />
<img src="ペット3の画像のURL" />
…
<img src="ペットnの画像のURL" />
</div>
</div>
</td>
のように記述してあります。
どちらにしても、パソコンのブラウザでは思った通りの挙動を示してくれていたが、スマホやタブレットでみると、ペットの画像の上下に妙な隙間が出来て、表組みが美しくない。
どこに問題があるのか、わかりにくかったので、調査用に、各タグの背景色を変えてみることにした。
<style type="text/css">
table#pet td { background-color: black; }
table#pet span { background-color: red; }
table#pet img { background-color: red; orange; }
table#pet td>div { background-color: blue; }
table#pet td>div>div { background-color: green; }
</span>
結果は、どの色が出るかで、マージンやパッディングを設定ことをし、なんだかんだ落ち着きました。
落ち着いたけど、この背景色の設定は残したままにしてあります。
実は、このcssの記述は、結構面倒なんですよ。
アメブロのHTMLタグを表示で書いている分には問題はありませんが、タグの非表示との切り替えをしていると、どんどんと伸びてしまうのです。
「td>div」や「td>div>div」という階層構造の記述は正しいのですが、アメブロでは「>」を「>」に置き換えようという操作が自動的に行われます。
更に、「&」を「&」に置き換えるから、どんどんと長くなっていき、厄介です。
私は、<style>～</style>の部分をメモ帳で編集し、貼り付けるという作業で回避しています。
4000文字オーバーの場合は、すべてをメモ帳で編集し、貼り付けるということもやってます。
とにかく、こういうブラックボックスの中身を探らないと、自分が見据える理想の形に近づかないという話しでした。
ではでは
↧
パソコンとスマホやタブレットでの見え方の違いに悩む
↧