あまり主張しないようアピールエリアを網点で覆う(マスク)

Cocoon

Cocoon(Wordpressの無料テーマ)にはアピールエリアという都合良い仕組みが用意されていて、任意の画像やテキストを本文最上部に表示できる。

サイトトップのみで表示とか選べて幸せ。

Cocoon設定 > アピールエリア で背景画像を設定する。

以上。なんだけど…素の画像ではインパクトがありすぎる場合があって…

以前ならPhotoshopであーだこーだ画像処理していたのだけれど、今はだいたいのことがcssで片付く。

今風に(笑)画像に網掛けしてソフトな感じにしよう。

網をかけるなら元画像(網の写真)の解像度も低くって良いし。

完成図/こうしたい

普通にcssを弄るだけで網で覆うことはできない。

知らない

jQueryを使い、html(要素)を追加する。

アピールエリア画像を覆う網はpngファイル(見せたい部分は透過しておく)で準備した(svgでも良い)

元のhtmlはこうなっている

要素を足してこうしたい 

網点画像(class=”s_cover” 要素)やアピールエリア(id=”appeal” 要素)を別のクラスclass=”appeal_wrap”で包み込むことが必要。

元のhtmlに足りない要素を足し、class名をつけマークする。

カスタムJavaScript

wrap で id=”appeal” 要素内包
before で id=”appeal” 要素に足す

JavaScriptでマークしたclassに対しCSSでレイアウトする。

カスタムCSS

宣言不要
いきなり書き込める

カスタムJavaScriptや
カスタムCSSは
このページだけに有効