[Pz-LkC]「WordPress」と「紙がめくれた効果」と「リンクカード」

Pz-LinkCard

「紙がめくれた効果」というのがあって、右下にナナメの影を入れることで「紙の右下が持ち上がっているように見える」というものです。

Pz-HatenaBlogCard」とか「Pz-LinkCard」にこの効果を実装したかったのですが、これがなかなか厄介でした。

CSS3のbox-shadowを使ってdiv要素に影をつけ、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートを紹介します。

自分でもHTMLとCSSのファイルをローカルで用意して実験してみると、ちゃんと右下に影ができるのですが、いざWordPress上でやってみると「背景より下」に影が表示されてしまっているようです。

z-index をあれこれいじってみても表示されません。

というか、z-index を0とか1とかにすると、本体のボックスそのものよりも上に影が表示されてしまいます。

 

テーマの背景をいじってみるとちゃんと影は表示されるのですが、背景が無いのではカードの見栄えどうこうでは無いですね(^-^;

 

とりあえず、諦めていたのですが。

もう一度チャレンジです。

「ボックスの上に影が出ちゃうなら、その上にもうひとつボックス置けばいいんじゃ?Σ(゚ロ゚)o゙」

とは思っていたので、それをやってみます。

※最初はHTMLで直接書いていたのですが、ビジュアルエディタで編集するとHTMLタグが消えちゃうので画像にしました。

curling

「できたっΣ(゚ロ゚)o゙」

外側を class=”box1″ にして position: relative の影部分が飛んでいかないように囲っています。 class=”box2″ が影を作るための空っぽの div 。一番内側が class=”box3″ 、枠付けて色塗って、z-index を高くしているので、影よりも上位に表示されています。

でも、影付けたいがために、無駄に <div>~</div> が増えちゃいます(^-^;

ただでさえ、無駄な <div>~</div> が多くて見直さないと…と思っていたのに、もうひとつ増やすのもちょっと抵抗があります。(^-^;

それと、一番外側の div で width と margin を指定して、一番内側の div で height と padding を指定して…という感じになってしまって、なんかもう、普通に CSS がごちゃごちゃになりそうです。

やっぱり、「WordPress」で「紙がめくれた効果」は無理なのかなぁ(^-^;

と思っていたところに、ピンポイントな記事が!Σ(゚ロ゚)o゙

記事「[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス」等において、紙がめくれたようにするためのCSSが紹介されていますが、私の認識だと、ほとんどのテーマでは適用できません。

そうそう、「ほとんどのテーマでは適用できません」、そのまんまの認識でした。

そして、「親要素に『z-index:1;position:relative;』を追加すれば適用できるように」と書いてありました。

ここでの「親要素」っていうのは、つまりは記事が表示される領域、自分が「背景」と呼んでいたところです。

テーマ「Twenty Eleven」を使っていたら .entry-content と .entry-summary に position: relative; z-index: 1; を与えて、うまく表示されたようです。

んー、これをなるべく開く適用されるように…こんな感じにしてみます。

おお、この状態だと、無駄に影用の div と、カード表示用の div とか用意しなくてもちゃんと表示されました!Σ(゚ロ゚)o゙

 

というわけで、定型書式「紙がめくれた効果」を選んだときには、 article の z-index をいじるように変更しました。

定型書式「テープと紙めくれ」も追加しました。

テーマによっては表示に不具合が出る場合があります。その場合、「紙めくれ」とは組み合わせられません。

次回のバージョンアップで「Pz-LinkCard」に実装します。

では(^-^)o

コメント

タイトルとURLをコピーしました