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


実例

blender

blender

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

構成

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

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

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

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

 

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

 

やり方

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

wp-caption に relativeを設定

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

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

コード

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

補足

横に並ばせる

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

画像サイズを柔軟に

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

 

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




コメントを残す

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