リッチリンクをブログスキンのCSSでアレンジした場合は、スマホ環境の表示には反映しません。 スマホ環境に対しては、エキサイト指定のスマホ仕様のスキンが適応されるからです。 一方、HTML編集によるアレンジはスマホ環境の表示にも反映します。 これは、スマホ環境のリッチリンクの表示をコントロール出来る唯一の手段です。
で、スマホ環境のリッチリンクのデフォルトのデザインを見てみると、思った以上に適当です。 これは、スマホ仕様のスキン整備の途中だからかもしれません。 スキンの修正等があれば追加対応するとして、現状を前提にスマホ表示に対応したアレンジを考えてみます。
(注)このページのスマホ環境の表示は、Chrome のディベロッパー・ツールで「iPhone 6」を設定して確認したものです。 スマホ機器の表示幅やフォント等により、実際の表示に違いがあり得ることは勘案ください。
+
先ず、デフォルトのリッチリンクを文中に設置してみました。 但し、自動付加される末尾の <br>は削除しています。
PCの表示は下図の状態で、後ろの <br>を削除しているので、文字と少し隙間が開きますがバランスはOKです。
これをスマホの表示とすると、前後の行との間隔が無駄で、特に後方の間隔がずいぶん広くアンバランスです。
先ず、設置したデフォルトのデザインで、PC環境とスマホ環境の表示の違いを確認しておきます。
リッチリンクの PC環境とスマホ環境の表示の違い
|
〔表示される内容〕 リッチリンクの横幅 横幅を狭くした時の縦幅の変化 横幅を狭くした時のスクロールバー サムネイルのサイズ タイトル文字列のフォントサイズ タイトル文字列の折り返し 本文導入部の文字列のフォント
| 〔PC環境〕 520px 縦幅が変化する 表示あり 100 × 100px 16px 折り返しなし 13px | 〔スマホ環境〕 340px など機種依存 縦幅は変化しない 表示なし 80 × 80px 15px 折り返し行送り 12px
|
スマホ環境では、やはりサイズを全体に小型化しています。 これは、PCとスマホの縦幅などは別個の調節が必要という事を意味します。 おまけに、スマホの下部の空白は、最初からPCと全く異なります。
この両者のアレンジを首尾よく行うには、
(H)HTML編集で <iframe>タグ内のstyle指定で行う
(C)ブログスキンのCSSで指定する
という、反映する範囲が異なる指定方法を使い分ける必要があります。(H)は両方に(C)はPC表示にのみ反映します。
▶スマホとPCで共通に反映出来るアレンジは(H)で指定し、その範囲のアレンジで留めるなら(C)は不要です。
例1(H)でPCの中央配置や右寄せの指定は、スマホは両端に達しているので表示に影響がありません。
例2(H)で上下マージン調節をしても、スマホの下側のアンバランスは諦める。
▶スマホのアレンジを(H)で指定し、PC表示の不具合は(C)で補正。 その上で(C)のアレンジをスマホとは独立して自由に行う。
両環境をある程度まともにアレンジしたいなら、基本的にこの方針となります。 以下に、それを具体的な例で示します。
+
上下行との間隔を両環境で調整する① スマホ表示の下側の空白を調節するには、height値(180px)を
150px とするのがベストです。 後でCSS修飾をするので、<iframe>を <div class="rlink">で囲っています。 太字が加筆部分です。
<div class="rlink">
<iframe
src="http://bp.exblog.jp/richlink/?url=http://atstudiota.exblog.jp/26237767/"
style="border:0; display: block; width: 100%;
height: 150px; max-width: 520px; margin: 10px 0px;">
</iframe>
</div>
これでスマホ表示は、下の様に上下行と適当な間隔になります。(文字背景色を濃くしてリッチリンクの範囲を判り易くしています)
しかし、このままではPC表示は妙な事になってしまいます。
PC表示を改善するために、
CSSによるマスクでスリム化のテクニックを使った下のCSS修飾を登録しました。
.rlink {
overflow: hidden;
width: 484px;
margin: 10px 10px; }
.rlink iframe {
width: 520px !important;
height: 164px !important;
margin: -10px 0 0 -10px !important; }
上手くマスクするために調整の指定値はけっこうシビアです。 この指定で、PC表示は下の様に改善されます。
「.rlink」で「
margin: 10px auto;」を指定すると、中央配置に出来ます。 更に、角丸め・枠線・影などの指定を「.rlink」に追加して修飾可能です。
上下行との間隔を両環境で調整する➁ リッチリンク下部を削るために「
height: 110px;」とし、上下部の間隔調節のために「
margin: 0 0 10px;」としています。 太字が加筆部分です。
<div class="rlink">
<iframe
src="http://bp.exblog.jp/richlink/?url=http://atstudiota.exblog.jp/26237767/"
style="border:0; display: block; width: 100%;
height: 110px; max-width: 520px; margin: 0 0 10px;">
</iframe>
</div>
これで、スマホ表示は下の様にスリムなものとなります。
やはりこのままではPC表示はダメで、スキンに以下のCSSを登録して修正しました。
.rlink {
overflow: hidden;
width: 484px;
height: 118px;
margin: 10px 10px; }
.rlink iframe {
width: 520px !important;
height: 128px !important;
margin: -10px 0 0 -10px !important; }
この調整値もシビアです。 PC表示は下の様になります。
このアレンジもPC表示に、角丸・枠線・影などを追加修飾可能です。 スマホ表示には反映しないので、自由に修飾できます。
下は「.rlink」に
border で枠線、
border-radius で角丸、
margin(em単位)で文字列との正確な位置合わせ、を指定して、PC表示をより充実させたCSSの例です。 配置は左寄せで2文字分のインデントをしています。(下の項は上と同じです)
.rlink {
overflow: hidden;
width: 484px;
height: 118px;
margin: 0.72em 2em 0.88em;
border: 1px solid #aaa;
border-radius: 6px; }
.rlink iframe {
width: 520px !important;
height: 128px !important;
margin: -10px 0 0 -10px !important; }
PC表示は下の様になります。(これは文字背景色を素に戻しています)
PC環境のアレンジを拡張する 中央配置、右寄せ、左右横配置と文字周り込み、縦長デザイン等、PC表示だけの修飾と割り切って「.rlink」に指定しても良いでしょう。 ブログスキンへCSS登録する修飾方法は、全くスマホ表示と無関係に拡張できます。 リッチリンクのデザインを何種かのバリエーションに纏め、class名を変えて登録して、リッチリンクを書き込むごとにHTML編集で使いたいclassを指定するのが、実用的な使い方でしょう。