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

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)

2016年 10月 08日
エキサイトブログでは、スマホ対応スキンはユーザー側でアレンジできません。 しかし、Html編集でのアレンジはスマホ表示に反映するので、リッチリンクを両環境でアレンジするには、
  ①スマホ表示をHtml編集でアレンジ
  ➁PC表示をブログスキンのCSS編集で修正アレンジ
という手順が鉄則です。

2017年春以降に、リッチリンクの生成コードに仕様変更があり、今後はこの仕様に落ち着くと私は推測しています。 そこで、仕様変更された現状の生成コードを前提として、再度リッチリンクのアレンジ基準をチェックしました。



以下は仕様変更後のスマホ表示の検証です。

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_12114651.png

PC表示は改善された様ですが、スマホ表示はリッチリンク下方が異常にアンバランスです。 生成コードの最後に<br>が入りますが、それを省いても inline-block 要素なので必ず後方にこの隙間が出来ます。

下方の隙間はリッチリンクの height 調節で改善できますが、初期値「180px」を減らして行くと「146px」以下ではリッチリンク自体にスクロールバーが出てしまいます。 そこで、他環境での表示安定を期して「150px」とした場合が以下です。

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_12245273.png

「height: 140px」まで高さを下げると、下図の様に上下間隔をほぼ均一に出来ますが、スマホ操作で上下にズレます。 これを抑止するには「scrolling="no"」を追記する必要が出て来ます。

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_12295508.png

また、上の様にする別の方法があります。 heightは「150px」とし、「inline-block」を「block」に書換えて、生成コードの最後に付いて来る<br>を削除する方法です。(inline のままでは効きません)

どちらが良いか考え、私はHtml作業が簡単そうな後者を選択しました。 以下に書き換えの雛形を整理しておきます。



 ① スマホ表示をコントロールするHtml編集でアレンジ 

デフォルトの生成コード
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 180px;
max-width: 520px;
margin: 10px 0;">
</iframe>
<br>


スマホ表示の上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: block;
width: 100%;
height: 150px;
max-width: 520px;
margin: 0;">
</iframe>

(注:margin値の変更は、文書全体の行間隔に合せたもので、必須ではありません)

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_12295508.png

また以下の様に「scrolling="no"」の追加すれば、高さのスリムなリッチリンクが可能です。

スマホ表示の高さをスリム化し、上下行との間隔を調整するアレンジ
<iframe
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26908820%2F"
style="
border:0;
display: inline-block;
width: 100%;
height: 108px;
max-width: 520px;
margin: 0;"
scrolling="no">
</iframe>

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_13265545.png



 ➁PC表示をブログスキンのCSS編集で修正アレンジ 

①のアレンジ結果がPC表示に影響し、PC側は不適切な表示になります。「inline-block」の場合に前後の<br>を省くと、リッチリンクは文字列の文字同様に左右位置が定まらず、思わぬ配置になります。 そういう問題を含めて、PCのリッチリンク表示を修正アレンジします。 これはブログスキン上からのアレンジで、スマホ表示には全く無関係です。

アレンジの要領は、「中央配置のブロック内にリンクを配置」「ブロックは角丸の枠線」「ブロックの縦幅を低くしてマスキング」といった手法で、縦幅のスリムなリッチリンクに仕立て、上下行との間隔も調整します。

下準備として、①のアレンジと同時にHtml編集で、生成コード全体を「rlink」のクラス指定した<div>ブロックで囲みます。

<div class="rlink">
<iframe
アレンジした生成コード>
</iframe>
</div>

これを修飾する以下のリッチリンク用の2項目のCSSを、ブログスキンに登録します。

.rlink {
overflow: hidden;
width: 496px;
height: 118px;
margin: 0.72em auto 0.88em;
border: 1px solid #aaa;
border-radius: 6px; }

.rlink iframe {
width: 520px !important;
height: 180px !important;
margin: -10px 0 0 -10px !important; }

.rlink」は、リッチリンクをマスクします。「 width: 496px」「height: 118px」を指定してスリム化。 また、「margin: 0.72em auto 0.88em」は、上下行との間隔を調節した上で中央配置を指定します。 上下マージン値は各ブログスキンに合せて調整します。
.rlink iframe」では、PC表示でリッチリンクが上下スクロールしない様に、iframeに「height: 180px」として、①の指定を修正しています。 こちらの「margin: -10px 0 0 -10px !important」は、マスク範囲を微調整するものです。

<div class="rlink">で囲い、ブログスキンで修復アレンジした結果、PC表示は以下の様になります。

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_14532127.png

上はリッチリンクの下部を省略したスリムタイプですが、マスクの高さを拡げたい時は、生成コードを下の様な複数クラス指定の<div>ブロックで囲みます。

<div class="rlink rlink_ex">
<iframe
アレンジした生成コード>
</iframe>
</div>

この追加クラス「rlink_ex」には、以下の1項目のCSSをブログスキンに登録しておきます。

.rlink_ex {
height: 154px !important; }

複数クラス指定の<div class="rlink rlink_ex">で囲った場合は、下図の様に「.rlink_ex」の「height」指定が優先され、118px → 154px と、高さが拡がって表示されます。

リッチリンクのアレンジ:スマホ表示とPC表示をコントロールする(新仕様に対応)_b0174191_15114606.png



以上の ①、➁ の両方をリッチリンク設置ごとに行います。 ブログスキンは一旦CSSを登録しておけば済みます。 設置時のHtml編集は、慣れてしまえば簡単です。 しかし、Htmlが不得意な人の為に、もう少しスリムなリッチリンクが簡単に置ける様にすれば、利用者がもっと増えるのではないかと思います。

下は。このページの方法で設置したリッチリンクの実物です。





by Ataron2 | 2016-10-08 20:30 | リッチリンクのアレンジ