CSSカスタマイズへの前提条件
画像にオンマウスした時に、画像が拡大したりするちょっとした画像変形は、CSSのカスタマイズ機能で実現できます。ELEMENTOR環境下では、あるプラグインをインストールすることで、さらに易しく実現できるようになります。
１．CSSの事前登録
ELEMENTORでCSSをカスタマイズするには、プラグイン「Simple Custom CSS」をインストールする必要があります。
Simple Custom CSSをインストールして有効化すると、ダッシュボード上の「外観」に「カスタムCSS」というタグができます。
その「カスタムCSS」をクリックして、CSSを登録する画面が表示されますので、そこに必要なCSSを予め登録しておく必要があります。（左図）
２．ELEMENTORページでCSSクラス名を設定
カスタムCSSに登録したCSSを、実際のELEMENTORページで使用するには、以下の手順を踏みます。
（１）ELEMENTORの画像編集で「詳細」タブを選択する
（２）CSSクラスに前記のカスタムCSSに事前登録したクラス名を設定する
たったこれだけで、画像の変形処理が実現できます。
その画像変形とは、画像にオンマウスした時の画像拡大です。（下記）
３．前記のオンマウス画像にリンク先を設定
前記のオンマウス画像は、文字通りマウスをオンマウスした時に画像が拡大するだけでしたが、その画像をクリックした時、外部のURLにリンクする機能を簡単に追加できます。
即ち、オンマウスで画像変形＋クリックで指定のURLにリンクする機能の合わせ技ですね。ELEMENTORなら朝飯前の簡単技です。
下記のオンマウス画像をクリックしてみて下さい。藤心パソコン倶楽部のサイトにジャンプします。