CSSによるオンマウスでの画像変形の違い

画像の説明
HAIK_flat

画像の説明
WordPress賢威7.0



上記の2つのサイトは、CSSによる画像変形、特にオンマウスで様々に変形する画像を、
HAIKの場合とWordPressの場合で検証したページです。
即ち、左がHAIKで作成された検証結果ページで、右はWordPressの結果ページです。

何れの場合も表面的には大差ありませんが、作る側の難易度からみると、Elementorが絡むとWordPressの方が若干難しいかも知れません。普段、Elementorは易しいと言っていた筆者の主張と矛盾する発言ですが、実は、CSSが絡むとElementorでの画面編集に難しい一面が表面化されます。これも多分に慣れの問題でしょうが・・・・


CSSの適用手順に差があります。

[check]HAIKの場合
画像変形させたいページのトップで #beforescript 文でCSSを定義し、実際に画像を表示する箇所で、以下のようなおまじないを設定します。

#html2(<div class="CSSクラス名">)
&show(画像ファイル名,,画像の説明);
#html2(</div>)

[check]WordPressの場合
先ず、プラグイン「Simple Custom CSS」で画像変形のCSS文を事前登録します。
次に、画像表示のソースコードを、以下のHTMLタグで挟むという仕様になります。

<div class="CSSクラス名">
<img src="http://fujigowp.info・・・・画像ファイル名" alt="" width="300" height="225" />
</div>


当方のWordPress塾の前提条件とは?

WordPressのスキルを取得するのなら「ELEMENTOR」の存在は外せません。
「ELEMENTOR」が分かればWordPressのハードルを下げることが可能です。
これさえあれば「鬼に金棒」って言う感じですかね!!