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

リッチリンクのアレンジ:ブログスキンのCSSによる / エキサイトブログ

2016年 10月 06日
新機能リッチリンクは <iframe> で構成されています。 一般にCSSで<iframe> の内部の要素を修飾出来ませんが、外殻の <iframe> 自体にはブログスキンからCSS修飾が可能です。

ここで注意が必要なのは、<iframe> のコードが他の場所でも使われている事です。 エキサイトのブログページをざっと調べたところでは下の様な箇所で使用されてました。

<iframe name="cmtviewfrm"…
<iframe name="trbviewfrm"…
<iframe id="rufous-sandbox"…
<iframe id="twitter-widget-0"…  ブログパーツ(twitter)
<iframe width="320" height="240" src="http://www.youtube.com…  YouTube動画

普通は表に出ないパーツもあり、これ以外の場所や今後の新しいパーツで <iframe> が利用される事も考えられます。 そこで、それらに影響が出ない様に、リッチリンクの <iframe> のみを特定するセレクタ表記が必要です。 今回のリッチリンクは「name」「id」「class」等の特定出来る指定がないので、HTMLで小細工をします。 リッチリンクの <iframe> を <div class="name">で囲い、「クラス名がnameの<div> 子要素の <iframe>」というセレクタ表記をして、目的の <iframe> を修飾します。



〔リッチリンクのCSSによるアレンジ〕

下はHTMLの基本型のサンプルで、自動的に生成されたリッチリンクの末尾の <br>を削除し、クラス名「rlink」の <div> で囲っています。 <iframe> 内部のHTML記述に手を加える必要はなく、グリーンの部分はデフォルトという事です。

<div class="rlink">
<iframe src="http://bp.exblog.jp/richlink/?url=http://atstudiota.exblog.jp/26237767/"
style="border:0; display: block; width: 100%;
height: 180px; max-width: 520px; margin: 10px 0px;">
</iframe>
</div>

記事編集時は、この様な下準備をHTML側でしておきます。 毎回書くのがめんどうなら「<div class="rlink">」を単語登録すれば良いでしょう。 これにスキンに追記したCSSで修飾をします。


 アレンジ(1) 左寄せ ・ 中央配置・右寄せ 

左寄せはデフォルトですが、上下の余計なマージンを省きましょう。 CSS修飾はデフォルト値のあるものは上書きが必要なので「!important」が付きます。
.rlink iframe {
margin: 0 !important; } /* 左寄せ */

.rlink iframe {
margin: 0 auto !important; } /* 中央配置 */

.rlink iframe {
margin: 0 0 0 auto !important; } /* 右寄せ */


 アレンジ(2) 横幅の変更 

下の「?px」に必要な横幅値を指定します。 520px以下でないと反映しません。 横幅の減少で行あふれすると、縦スクロールバーが出ます。
.rlink iframe {
max-width: ?px !important; }


 アレンジ(3) 縦幅の変更 

下の「?px」に必要な縦幅値を指定します。 縦幅の増減で縦スクロールバーが出たり、消滅したりします。
.rlink iframe {
height: ?px !important; }


 アレンジ(4) 文字の周り込む左寄せ・右寄せ 

画像の左右寄せ配置と同様に、横に文字の流し込みをさせるレイアウトが可能です。 幅の小さなリッチリンクをこの指定で並べるとタイル状に並びます。 但し、スマホからの参照では、これらの効果は無化します。
.rlink iframe {
float: left; } /* 左寄せ周り込み */

.rlink iframe {
float: right; } /* 右寄せ周り込み */



このページの(1)~(4)は基本的なCSS修飾ですが、各項目を組み合わせたり、他の修飾を追加してアレンジを豊富にすることが可能です。 以上のCSSは、下のページのHTML編集によるアレンジの説明に対応させたものです。ブログスキンのCSSを使っても、HTML編集でアレンジしても、出来る事は基本的に同じです。

一般には、ブログスキンからCSS修飾する方が、HTMLの「style=""」として書き込むより推奨される方法です。 ただ今回の場合は微妙で、HTMLは投稿ごとにアレンジを自由に選べます。 これに対して、ブログスキンの方は以前や将来の文書内のリッチリンクにデザイン変更が影響します。 それを考えて、色んな条件で問題の無い様にCSSを決める必要があります。

リッチリンクのCSSによるアレンジの実用的な使い方は、クラス名「rlink_l」で左寄せ、「rlink_c」で中央配置、「rlink_fl」で左寄せ周り込み、等と、良く使うデザインのCSSを幾つか登録して、記事作成時にHTML編集でそれらを使い分けるのが良いと思います。

以上のことをまとめると、

 ◌ 定型デザインを固定化し、複数のコードを毎回書かず済ませたい → スキンにCSS登録
 ◌ 状況で時々簡単なアレンジをするだけ  → HTML編集

と方法を選べばよいでしょう。 これは、リッチリンクの利用度合いによって変わってきそうです。

リッチリンクのアレンジ:ブログスキンのCSSによる / エキサイトブログ_b0174191_21521074.png




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

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