人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ

2016年 10月 07日
リッチリンクをブログスキンのCSSでアレンジした場合は、スマホ環境の表示には反映しません。 スマホ環境に対しては、エキサイト指定のスマホ仕様のスキンが適応されるからです。 一方、HTML編集によるアレンジはスマホ環境の表示にも反映します。 これは、スマホ環境のリッチリンクの表示をコントロール出来る唯一の手段です。

で、スマホ環境のリッチリンクのデフォルトのデザインを見てみると、思った以上に適当です。 これは、スマホ仕様のスキン整備の途中だからかもしれません。 スキンの修正等があれば追加対応するとして、現状を前提にスマホ表示に対応したアレンジを考えてみます。

(注)このページのスマホ環境の表示は、Chrome のディベロッパー・ツールで「iPhone 6」を設定して確認したものです。 スマホ機器の表示幅やフォント等により、実際の表示に違いがあり得ることは勘案ください。



先ず、デフォルトのリッチリンクを文中に設置してみました。 但し、自動付加される末尾の <br>は削除しています。

PCの表示は下図の状態で、後ろの <br>を削除しているので、文字と少し隙間が開きますがバランスはOKです。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_23515096.png

これをスマホの表示とすると、前後の行との間隔が無駄で、特に後方の間隔がずいぶん広くアンバランスです。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_23344655.png

先ず、設置したデフォルトのデザインで、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)で上下マージン調節をしても、スマホの下側のアンバランスは諦める。
これは、HTML編集による(1) 程度に留めたアレンジで、それ以上はどちらかの環境に無理が出る事が殆どでしょう。

▶スマホのアレンジを(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>

これでスマホ表示は、下の様に上下行と適当な間隔になります。(文字背景色を濃くしてリッチリンクの範囲を判り易くしています)

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_12254305.png

しかし、このままではPC表示は妙な事になってしまいます。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_12255394.png

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表示は下の様に改善されます。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_13250544.png

「.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>

これで、スマホ表示は下の様にスリムなものとなります。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_16083693.png

やはりこのままでは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表示は下の様になります。

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_16340869.png

このアレンジも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表示は下の様になります。(これは文字背景色を素に戻しています)

リッチリンクのアレンジ:スマホ表示に対応する / エキサイトブログ_b0174191_09201958.png


 PC環境のアレンジを拡張する 

中央配置、右寄せ、左右横配置と文字周り込み、縦長デザイン等、PC表示だけの修飾と割り切って「.rlink」に指定しても良いでしょう。 ブログスキンへCSS登録する修飾方法は、全くスマホ表示と無関係に拡張できます。 リッチリンクのデザインを何種かのバリエーションに纏め、class名を変えて登録して、リッチリンクを書き込むごとにHTML編集で使いたいclassを指定するのが、実用的な使い方でしょう。



by Ataron | 2016-10-07 22:41 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。