HOME > BLOG > Modula PROで、ホバーエフェクト付ギャラリーを作成

Modula PROで、ホバーエフェクト付ギャラリーを作成

  • プラグイン
    •

    当サイトでは、先日のリニューアルで、トップページとABOUTにModula PROのギャラリーを設置しました。今回は、Modula PROのダウンロード〜有効化の簡単な手順と、ホバーエフェクト付ギャラリー作成方法を紹介していきます。

     出典 : Modula Image Gallery

    今回のDEMOは3種のタイトル付きエフェクトギャラリーです。1つ目はモノクロ、2つ目はボーダー、3つ目はフレームです。画像は、以前のModulaのDEMOでも紹介した、フランス旅行の写真を使用しました。

    HOVER EFFECT GALLERY

    GALLERY

    PCでは、カーソルを合わせると、ホバーエフェクトが発動します。クリックするとライトボックスで表示されます。

    SPではタップすると、ライトボックスで表示されます。

    ダウンロード

     出典 : Modula

    まず、ModulaのWebサイトから、プランを選択し、PRO版を購入します。プランによって使用できるアドオンが違います。

    購入後、ダウンロードページが表示されるのですが、「Modula PRO」のみダウンロードします。ダウンロードしたフォルダを圧縮します。ライセンスキーは控えておきます。

    Modula PROをダウンロードし、圧縮

    アップロード

    まず、Modula無料版を有効化していない場合は、ダウンロードして有効化しておきます。

    WordPressダッシュボードのプラグイン＞新規プラグインを追加をクリックします。「プラグインのアップロード」をクリックし、Modula PROの圧縮フォルダをアップロード、有効化します。Settingで、ライセンスキーを入力します。

    「プラグインのアップロード」をクリックし、Modula PROの圧縮フォルダをアップロード、有効化

    アドオン有効化

    Modula＞Extensionsをクリックし、使用したいアドオンを有効化します。全て有効化する必要はありません。現在、当サイトで使用しているものは、下記リストの通りです。

    • Fullscreen
    • Pagenation
    • Zoom
    • Lightbox Slideshow
    • SpeedUp
    • Video

    アドオンによる不具合

    アドオンを有効化することでサイトに不具合が出る場合があります。その場合、アドオンを無効化し、削除します。また、当サイトでは、スライダーはSmart Slider Proを使用するので、Covert Gallery to Sliderは有効化していません。

    ギャラリー作成

    Pro版とアドオンの設定項目が追加されますが、基本的な設定方法は、無料版とほぼ同じです。

    Modula＞Galleries＞Add Newをクリックし、新規ファイルを作成。タイトルを入力し、Gallery＞Select from Libralyをクリックし、メディアから画像を12点選択します。

    サムネイルにカーソルを合わせると表示される、鉛筆マーク (Edit Image) をクリックします。Titleに画像のタイトルを入力し、下のSave & Closeボタンをクリックして保存します。

    サムネイルの鉛筆マーク (Edit Image) をクリック

    Titleに画像のタイトルを入力

    Save & Closeボタンをクリックして保存

    General

    高さ(Height)は、PC、タブレットは、1画面で見れるように、SPは画面が小さいので、スクロールして見れるように値を大きくしました。

    項目設定値
    Gallery TypeCreative Gallery
    Gutter0
    Width100%
    Image SizeMedium
    HeightPC：1000px
    タブレット：1000px
    SP：1500px
    Random factor50
    Shuffle imagesチェック有

    Lightbox & Links

    画像をクリックした時のスライドショーのスタイルを設定します。今回は、ほぼデフォルト設定ですが、Loop navigationにチェックを入れて、矢印をクリックしていくと、スライドがループしていくように設定しました。

    ライトボックスの背景色、透明度は、Lightbox background color で変更できます。 今回は、色をデフォルトのダークグレーから、黒に変更しました。

    項目設定値
    Navigation arrowsチェック有
    Loop navigationチェック有
    Show image titleチェック有
    Tool barチェック有
    Close buttonチェック有
    Close on slide clickチェック有
    Infobarチェック有
    Lightbox background colorrgba(0,0,0,0.9)

    Captions

    タイトルのスタイル設定をします。

    まず、Hide Titleのチェックを外します。Title Colorをモノクロはローズレッドに、ボーダー、フレームは白に設定します。Title Font Sizeは、PCのフォントサイズ、Moble Title Font SizeはSPのフォントサイズになります。Title Font Sizeを20px、Moble Title Font Sizeを15pxに設定します。

    項目設定値
    Show Gallery Titleチェック無
    Hide Titleチェック無
    Title Colorモノクロ：#d30094
    ボーダー：#ffffff
    フレーム：#ffffff
    Title Font Size20px
    Mobile Title Font Size15px
    Title FontDefault
    Title Font WeightRegular
    Hide Captionチェック有

    Hover effects

    Hover effectsは、無料版では選択肢が、2つしかありませんでした。PRO版では、40種類以上の中から選ぶことができます。今回のDEMOでは、3種の異なるエフェクトを選択しました。

    また、Hover Opacityを0に設定しました。

    項目設定値
    Hover Opacity0
    Hover effectモノクロ：1. Grayscale
    ボーダー：7. Reflex
    フレーム：40. Tilt Effect 1

    SpeedUp

    PRO版のアドオンで追加した項目です。

    今回3つのギャラリーを作成しましたが、モノクロのみLazy Loadのチェックを外しました。これは、ページが読み込まれた時にローディングエフェクトを表示させるのを防ぐためです。

    項目設定値
    Lazy Loadモノクロ：チェック無
    ボーダー：チェック有
    フレーム：チェック有

    以上で今回の説明は終了です。PRO版では、Hover effectsは、使える種類が多くなったので、デザインの幅が広がりますね。また、ライトボックの背景色を変更できるので、サイトのデザインに合わせることができます。

    Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。

    RECOMMEND

    CONTACT

    Webサイト作成は、是非
    CXG DESIGNへご検討ください。