Studio TA Subsite の案内とお知らせ

インスタグラム・リッチリンク・YouTube の中央寄せ(ブログスキン)/ エキサイトブログ

2017年 06月 18日
インスタグラムの中央寄せ配置をブログスキンで指定すると、いちいち「埋め込みコード」をHtml編集する必要がなくなります。

インスタグラムの「埋め込みコード」は、リッチリンクと同類で、リッチリンクシステムの応用と思われます。 更に、インスタグラム、リッチリンク、Youtubeの実体は、いずれも「iframe要素」です。 現在、エキサイトブログでユーザー選択で利用できるiframeはこれら3種と限られます。(ブログパーツ等は未確認です) エキサイトの「iframe要素」の制限基準が微妙に更新されている事などから、この3種を纏めて扱う事は気が利いていると思います。 以下の内容は、将来に追加されるiframe機能にも応用できるでしょう。

このブログスキンによる修飾手法は、以下のことを考慮する必要があります。
● ブログスキン指定はブログ全体のデザインに影響するので、過去に設置した3種の要素への影響は要チェックです。
● 但し、ブログスキン指定は基本的にデザインの上書きなので、過去の左右に寄せた設置分のみ考慮すれば良いと思われます。
● ブログ全体で中央寄せ配置が統一されるが、個別に左寄せや右寄せをしたい場合は、少しやりにくくなります。
● ブログスキンの修飾はPC表示にのみ有効で、スマホ表示(スマホスキン)には影響しません。

以下は、この3種の「埋め込みコード」の一般的なサンプルです。(改行して判り易くしています)

リッチリンク
<iframe 
src="//bp.exblog.jp/richlink/?url=http%3A%2F%2Fatstudiota.exblog.jp%2F26931974%2F"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 180px; display: inline-block; max-width: 520px;">
</iframe>
インスタグラム
<iframe 
src="//bp.exblog.jp/richlink/instagram/?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBVAErG7jcgL%2F"
scrolling="no"
style="margin: 10px 0px; border: 0px currentColor; border-image: none; width: 100%; height: 400px; display: block; max-width: 400px;">
</iframe>
ユーチューブ
<iframe 
width="480"
height="360"
src="//www.youtube.com/embed/8TpcBDJZsJA?rel=0"
frameborder="0"
allowfullscreen="">
</iframe>

「iframe」はブログ画面の構成要素として色々と使われるので、「iframe」を無差別に修飾するわけには行きません。 これら3種に固有の特徴を指して、他と区別できるセレクタ表記が必要です。 上の「埋め込みコード」を見比べると、各iframeの「src」の太字の部分は、それぞれを区別するのに適当そうです。

セレクタ記述の方法で、《 iframe要素で、その属性の src に「~」の文字列を含むもの 》という、記述方法があります。
  20. E[foo*="bar"] (属性の値が指定した文字を含む場合に適用する)

この記述方法を使って、3種のiframeの中央寄せを指定するCSS修飾を書いてみました。 これらのCSS項目をブログスキンのCSSに追加すると、ブログ文書内での中央寄せが実現します。

/* ● リッチリンクとインスタグラムを中央寄せ */
iframe[src*="richlink"] {
display: block !important;
margin: 0 auto !important; }

/* ● リッチリンクのみ中央寄せ */
iframe[src*="richlink/?url"] {
display: block !important;
margin: 0 auto !important; }

/* ● インスタグラムのみ中央寄せ */
iframe[src*="instagram"] {
display: block !important;
margin: 0 auto !important; }

/* ● ユーチューブのみ中央寄せ */
iframe[src*="youtube"] {
display: block !important;
margin: 0 auto !important; }

(注)
◎「richlink」の文字列は、リッチリンク・インスタグラムの両方に出て来ます。 そこで、リッチリンクのみを区別する文字列を「richlink/?url」としています。 3種のiframeを中央寄せとする場合、上記1項と4項をブログスキンに追加すれば、スマートに指定出来ます。
◎ リッチリンクが「inline-block」指定に仕様変更されたので、他のiframeが同様の仕様変更をされる可能性が考えられます。 その場合、margin値の中央寄せが無効になるので、現在は重複指定になりますが「display: block !important;」を加えています。

下図は、3種とも中央寄せとした例です。

b0174191_14534633.jpg



お使いのブログスキンに、このページで紹介したCSS項目を追加する手順は、以下のリンク先を参照ください。 初回にブログスキンをアレンジする時だけ少しコツがあり、それを説明しています。




[PR]
# by Ataron | 2017-06-18 13:31 | ブログスキンのアレンジ | Comments(0)