WordPress

超オススメ! カスタマイズも可能なLightBox風WPプラグイン「FancyBox for WordPress」

Fancybox for wordpress

記事内の写真をクリックすると、その写真が浮き出るように表示される「LightBox」表示は人気がありますよね。
私もさっそく取り入れました。

LightBox風のプラグインはかなりの数あります。その中でもインストールするだけで使えて、さらに見た目を設定でカスタマイズできる「FancyBox for WordPress」を使うことにしました。

インストール

いつもの手順ですね。

  1. プラグインを検索
  2. ダッシュボードでプラグインの項目から「新規追加」を選択します。
    キーワードに「LightBox」と入力して検索しましょう。
    Fancybox for wordpress 2

  3. インストール
  4. 3番目に出てきました。
    「いますぐインストール」をクリックします。
    Fancybox for wordpress 3

  5. プラグインを有効化
  6. インストールが完了したら「プラグインを有効化」しましょう。
    Fancybox for wordpress 4

  7. 効果を確認
  8. これで記事内のイメージをクリックすると以下のように「LightBox」風に表示されます。インストールするだけでいいのでカンタンですね〜。
    Fancybox for wordpress 5

デフォルト設定だけでもいいのですが、せっかくなのでカスタマイズしてみます。

カスタマイズ

  1. 設定項目を確認
  2. ダッシュボードの設定項目に「Fancybox for WP」というものがあります。
    これでいろいろ設定できますよ。
    Fancybox for wordpress 6

  3. 見た目をカスタム
  4. デフォルトでもいいのですが、私がやったカスタムは以下です。

    • 写真の背景を「黒(#000000)」に
    • 背景の透明度を「0.8」に
    • 写真のタイトルを非表示

    Fancybox for wordpress 7

  5. 機能をカスタム
  6. 記事内の写真を移動できる矢印を表示させるようにしました。
    Fancybox for wordpress 8

  7. カスタム結果を確認
  8. カスタムの結果以下のようになりました。
    背景は黒に近いほうが写真が映えますね。
    写真間の移動もできるようになったので便利になりました。
    満足♪ 満足♪
    Fancybox for wordpress 9

インストールするだけでも使えますが、
カスタムもカンタンなのでお好みに仕上げて使いましょう!
オススメ!

関連記事

  1. WPtouch

    WordPress

    スマートフォン対応してみた

    WordPressのプラグイン「WPtouch」を導入。このプラグ…

  2. WordPressのバージョンを確認する方法

    WordPress

    WordPressのバージョンを確認する方法

    WordPressのバージョンを確認するにはダッシュボードの表示を調整…

  3. 関連記事

    WordPress

    関連記事のCSSデザインをちょっと更新

    以下を使って、リスト部分のマークを削除して、左揃えにしました。l…

  4. 関連記事表示

    WordPress

    関連記事プラグイン導入

    関連記事を記事の下部に表示させるプラグインを入れてみました。いくつ…

  5. WPサーバー移行が楽すぎ!「All-in-One WP Migration」

    WordPress

    WPサーバー移行が楽すぎ!「All-in-One WP Migration」

    WordPressのサーバー移行の方法は何種類もありますが、簡単なほう…

  6. Google AnalyticsのWPプラグイン「Google Analyticator」を導入してみた

    WordPress

    Google AnalyticsのWPプラグイン「Google Analyticator」を導入して…

    Google Analyticsを導入したいと考えたときにWordPr…

アーカイブ

  1. 3段組

    WordPress

    3段組の準備完了
  2. 日常

    香港政府観光局
  3. 2段組

    WordPress

    個別ページだけ2段組にしてみた。
  4. google_ban.jpg

    ブログ

    Google BANされたかも!? と思ってGoogle Analyticsのプ…
  5. fnm005-1.jpg

    MTG

    【MTG】FNMの3月プロモゲット! でも全敗
PAGE TOP