wordpressにyoutubeを張り付ける際のテクニックで、紹介したyoutubeのタグに、少し飾りつけをしてみようという記事です。

たとえば、こんなタグで表示をかけたとしましょうか。

<div class="youtube">
 <iframe src="//www.youtube.com/embed/vn5Ikcg5mQQ" frameborder="0" allowfullscreen>
 </iframe>
</div>

さてさて、唐突ですが、html／cssは、

タグを目安に、装飾を施す

わけですよね。
ですので、今回紹介した上記htmlは、

• div.youtube
• div.youtube iframe

の２つのタグについて、色々装飾ができるわけです。

まずはこんな工夫から

wordpressにyoutubeを張り付ける際のテクニックでも紹介しましたが、まずはこんな工夫から。

div.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
div.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

横幅いっぱいに広げて、そのサイズ分のyoutube表示をする方法ですねん。

さて装飾ですが・・・

こっから装飾ですが・・・・。
デザインの話をするつもりはないです（笑）
div.youtubeのタグに装飾したりしてください。
同じく、iframeにもね。

装飾のアイデア

htmlでは、htmlのタグに対して、css上で新たに子分タグを作ることが可能です。
いくつでも作れるわけではないですけどね。
先ほどのhtmlとcssでは、下記のようなレイアウトができあがります。

さてさて、このタグに少し特殊な装飾を施すことができます。
div.youtubeのタグに紐づける形で

• 表示する前に、表示するデザインを言える
• 表示した後に、表示するデザインを言える

なんて便利な機能なんでしょ。
イメージでいうと、こんな感じです。

これにより、div.youtubeタグを表示する前後に、div.youtubeで指定したもの以外のものを表示することが出来るというわけですよ。
前後で指定する「内容」は、完全に独立したＤＩＶを張り付けるような感じです。ですので、元になるdiv.youtubeの前後に表示しなくとも、こんなこともできちゃいます。

すばらしい。

サンプル

たとえば、こんな感じでyoutubeに装飾をつけられますよ。
黄色の破線が、「表示する前」「表示した後」の加工をしたデザインです。

css記述方法

記載方法は簡単です。子分タグですよって感じで「:before」や「:after」を付けてあげればいいだけです。

div.youtube:before /*div.youtubeを表示する前*/ {
  css内容
}
div.youtube:after /*表示した後*/ {
  css内容
}

尚、上記デザインの場所を任意にずらしたい場合は、cssのposition属性を下記のようにしてください。

div.youtube {
  position:relative;
}
div.youtube:before /*div.youtubeを表示する前*/ {
  position:absolute;
  css内容
}
div.youtube:after /*表示した後*/ {
  position:absolute;
  css内容
}

おためし

youtubeタグでやると、ちょっと難しいので、＜p＞タグで同じようなことをしてみましょか。
＜p＞タグを表示する前に、左上らへんに「赤い四角」をかいてみましょか。
ソースコードはこんな感じです。

<style type="text/css">
p.sample {
  position:relative;
  font-size:1.5em;
}
p.sample:before {
  position:absolute;
  background-color:#f00;
  content:"";
  left:-10px;
  top:-10px;
  width:10px;
  height:10px;
}
</style>
<p class="sample">タイトルです</p>

下記に出力結果を。

タイトルです

—-

コードの説明

cssの説明です。p.sampleでposition属性をrelativeにして、後続に続くタグの位置を指定できるようにしてます。:before属性がついてるp.sampleで、p.sampleを表示する前のレイアウト定義してます。
さて、実際の:beforeの中をみていきましょ。

p.sample:before {
  position:absolute;
  background-color:#f00;
  content:"";
  left:-10px;
  top:-10px;
  width:10px;
  height:10px;
}

まず、２行目にある position:absoluteは、このデザインの出力位置を、p.sampleの出力位置を起点にしますよーという意味です。実際にp.sampleを表示する際の左上座標を起点として、このデザインは出力しますよと。
で、じゃあ、どこらへんに、どのぐらいの大きさで・・・っていうのが、

1. leftやtop
2. widthやheight

というわけです。

上記では、topやleftにマイナスの位置を指定してますよね。これは、p.sampleの出力位置の「左上」の位置を基準にして、それよりも左側であり上側であるという意味です。右側がプラスで左側がマイナスの表記。右側に１０ピクセル離すのであれば10pxと指定します。今回は左側に１０ピクセル離したかったので、今回は-10pxとしてます。同じように、上下の位置もプラスマイナスで表記します。p.sampleの位置よりも20px下なら、top:20pxと記載し、上ならtop:-20pxです。
尚、位置を指定する属性として、 rightやbottomなんてものもあります。先ほど紹介していたtop・leftは「基準にする位置をp.sampleを左上」にしていたのですが、right・bottomであれば、右下に基準位置がずれます。
右下基準にして、どのぐらい離れるかというような感じでデザインするわけです。
もちろん、left・bottomで指定するのもありですし、right・topで指定するのもありです。前者は左下基準。後者は右上基準ですー。

参考

参考記事