Web ショットのキャプションに透明ラベルを重ねるちょい技【WordPress】


実例

blender

blender

以上のように、cssを使って対応します。

構成

タグは以下の様な出力イメージです。

(.base)
wp-caption
browser-shot
image
wp-caption-text

Web-Shotでキャプションを設定すると以下の様なコードがエディターに出ます。
altではなくショートコードの間の方がキャプション。

※今回の例は、250x250のサイズに限定しています。

blender

blender

 

出力時ユーザへは以下のように変換されます。(.baseのdivはエディター上で手動で囲った(後述))

<div class="base">
    <div class="wp-caption" style="width:260px;"> 
        <div class="browser-shot ">
            <a href="https://blender.jp/" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://blender.jp/', '\n \n ']);" target=&quot;_blank&quot; class="external">
               <img src="https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fblender.jp%2F?w=250&#038;h=250" alt="blender" width="250" height="250" class="alignnone" />
            </a>
        </div>
        <p class="wp-caption-text">blender</p>
    </div>
</div>

 

やり方

外側のタグを位置のベースにして、ラベルを内側に表示するので

wp-caption に relativeを設定

キャプションを画像の上にオーバーラップ表示

キャプション部分の背景(background)を半透明(rgba)にして、上記からの"絶対"(absolute)位置をtop/leftで指定。

コード

cssを  themeの style.css等に書くか、ページに記載してください。ページに記載するときは、ビジュアルエディターで効率よく作業する5つの設定方法 のように対応しておかないとbody内のcssは消されてしまうと思います。

<style type="text/css"><!--
.wp-caption{position:relative;}
.wp-caption .wp-caption-text
{
    position: absolute; 
    top: 215px; left: 9px; 
    background-color: rgba( 222, 200, 200, 0.8 ); 
    width: 240px; 
    font-size: 120%;
}
.base{float:left;}
--></style>

補足

横に並ばせる

この例ではさらに、 WebShotを連続させた時に横に並ばせるために .base で囲い float指定しています。後続分の前に<br clear="all"/>を忘れずに!

画像サイズを柔軟に

上記は250pxで決め打ちし計算して対応しましたが、もう少し画像サイズに対して柔軟にしたい場合、以下のようにcssにtopを追加指定しても良いかもしれません。

    top: calc(100% - 12px);
    top: -webkit-calc(100% - 12px);

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

85 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です