このサイトはデザインテーマに無料なのに、高機能な「Cocoon」を使用させて頂いてます。
以前は「Themeforest」という海外サイトの有料テーマをよく使用していたのですが、こちらのテーマは見栄えのするエフェクトが盛り沢山で、簡単にデザイン性の高いサイトを構築できたのですが、多少問題があって使用を控えています。
比較的安価で追加やすいのですが、使いたいエフェクトをセットするには、テーマ独自のエディタを使用せねばならず、そのソースはショートコードだらけでした。解析すると殆どがjQueryで書かれていて、phpやjQueryのバージョンが上がると、デザインが乱れる現象が発生しました。こうなると全てを書き換えるか、システム・テーマのバージョンアップを行わず現行のまま放置する事になります。
バージョンアップを行わない事は出来ませんので、対象のサイトを全て無償対応という事でリニューアルした経験があります。
そんな時、無料なのに適宜更新されている高機能テーマ「Cocoon」を知って以来、全てにこのテーマを使用させて頂いています。
「Cocoon」にはエフェクトボタンや、パララックス等は独自でCSS・Javascriptを用意する必要に迫られました。
そんな時に見つけたのたのが、海外のテーマ等使用しなくても、ハイクオリティなエフェクトボタンが利用できるプラグインの一つが「Image Hover Effects Ultimate」です。
Image Hover Effects Ultimate
Image Hover Effects Ultimateのインストール
「Image Hover Effects Ultimate」のインストールから始めます。
「今すぐインストール」をクリックして、完了後「有効」ボタンをクリックしてインストール完了です。
インストールが完了したら早速作成です。
welcomeページにYoutubeで簡単な使用方法が紹介されています。これを見れば簡単に理解できます。
左のメニューから「Image Hover」をクリックするとこちらのメニューに遷移します。無料で使用できるのが８つの「Image Effects」。下段の「Extention」を利用するには有料のProバージョンが必要なようです。
ボタンエフェクトを選択して、プロパティの設定
全てのエフェクトの解説はできませんので、今回は「Bottun Effects」の作成方法を例に解説します。ディフォルト設定であれば、細かなプロパティ設定は必要ありませんので、ボタン作成までの手順です。各プロパティはご自身で調査して下さい。
一番上に表示されているエフェクトを作成してみましょう。下部右にある「Create Style」をクリックします。
間違って「Deactive」をクリックすると、消えてしまい選択できなくなります。
再度このパターンを作成したい場合は、一番下にある「Add More Templates」をクリックすると「Active」に戻す事が出来ます。
「Create Style」がクリックされると、横並びになっていた何カラム目のボタンを作成するか選択します。
保存ファイル名を入力し、作成したいボタンを選択後「Save」ボタンをクリックします。
今回は「Test」という名前で、画像を2枚使用する右の「3rd」ボタンを選択しました。
「General Settings」にいろいろプロパティの設定がされていますが、それぞれの効果はご自身でお調べ下さい。今回は上部左にある「Column Size」の説明のみさせて頂きます。
設定項目が多いので下へスクロールすると、「Preview」領域のセンターにボタンが一つ表示されていますが、これが「col1」（カラム1個）という事です。
試しに「Col12」を選択すると、12個のボタンが横並びになるレイアウトになります。
（ボタンはいくつでも作れるようなので、改行されて表示されています。）
今回は「Col2」で解説を進めていきます。
ボタン作成・画像の差し替え／リンクの設定
プレビュー画面のボタンの上にポインターをもっていくと右上に「Edit」「Clone」「Del」の３つのボタンが表示されますで、「Edit」をクリックします。
各設定項目が表示されますので、各々設定していきます。
例として、私がヤフオクに出品している商品と商品画像2枚、それとTwitterのリンクボタンを設定します。
Iconに「Twitter」をセットしたいのですが、ドロップダウンリストには大量のアイコンがあるので、スクロールしながら探すのは大変です。上の窓に「Twitter」と入力すればすぐに候補が表示されるので活用しましょう。
画像の差し替え
リンクの設定が完了したら次に画像の設定です。
選択が「Image」になっている事を確認し、MediaLibraryから画像を差し替えます。
画像の差し替えはディフォルトで表示されている画像の上にポインターを持って行くと、「Choose Image」が表示されるのでそこをクリックして画像を選択して入れ替えます。
次に「Feature Image」に切り替えて、マウスホバー時に表示する画像を設定します。
2カラムの設定でしたので、もう一つ作ります。
作成されたボタンにポインターを持って行くと「Clone」ボタンが表示されますので、その「Clone」ボタンをクリックします。
すると、2カラム目に同じボタンが作成されました。
後は同様にリンクと画像を設定しなおせば横並び2カラムのエフェクトボタンの完成です。
このボタンのショートコードに名前をつけて「Save」ボタンクリックで保存。
右メニューにこの完成したボタンの「Shortcode」が表示されていますので、このショートコードを本文内にコピペすれば完了です。
メニューの「Shortcode」をクリックすると作成したボタンの一覧が表示されます。自分で作ったボタンの複製も簡単に出来ますね。
味気ないデザインでは人の目を惹くことが出来ないので、こんなアクションをしてくれるボタンがあるとデザインにも幅が出てきますね。
コメント