エキサイトブログでは、スマホ対応スキンはユーザー側でアレンジできません。 しかし、Html編集でのアレンジはスマホ表示に反映するので、リッチリンクを両環境でアレンジするには、
①スマホ表示をHtml編集でアレンジ
➁PC表示をブログスキンのCSS編集で修正アレンジ
という手順が鉄則です。
2017年春以降に、リッチリンクの生成コードに仕様変更があり、今後はこの仕様に落ち着くと私は推測しています。 そこで、仕様変更された現状の生成コードを前提として、再度リッチリンクのアレンジ基準をチェックしました。
+
以下は仕様変更後のスマホ表示の検証です。
PC表示は改善された様ですが、スマホ表示はリッチリンク下方が異常にアンバランスです。 生成コードの最後に<br>が入りますが、それを省いても inline-block 要素なので必ず後方にこの隙間が出来ます。
下方の隙間はリッチリンクの height 調節で改善できますが、初期値「180px」を減らして行くと「146px」以下ではリッチリンク自体にスクロールバーが出てしまいます。 そこで、他環境での表示安定を期して「150px」とした場合が以下です。
「height: 140px」まで高さを下げると、下図の様に上下間隔をほぼ均一に出来ますが、スマホ操作で上下にズレます。 これを抑止するには「scrolling="no"」を追記する必要が出て来ます。
また、上の様にする別の方法があります。 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値の変更は、文書全体の行間隔に合せたもので、必須ではありません)
また以下の様に「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表示をブログスキンの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表示は以下の様になります。
上はリッチリンクの下部を省略したスリムタイプですが、マスクの高さを拡げたい時は、生成コードを下の様な複数クラス指定の<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 と、高さが拡がって表示されます。
+
以上の ①、➁ の両方をリッチリンク設置ごとに行います。 ブログスキンは一旦CSSを登録しておけば済みます。 設置時のHtml編集は、慣れてしまえば簡単です。 しかし、Htmlが不得意な人の為に、もう少しスリムなリッチリンクが簡単に置ける様にすれば、利用者がもっと増えるのではないかと思います。
下は。このページの方法で設置したリッチリンクの実物です。