【デジタル】Easy Fancy Boxの設定について、ちょっと詳しく

実際の話、このテーマの場合埋め込み式のギャラリーがあるのですが、個人的にモーダルについてはリッチであるべきだと思っている人なので、Easy Fancy Boxを使っています。このツールの利点は、何と言ってもリダイレクトというか画像だけの時に別ページ飛ばすようなことがなく、モーダルで浮かび上がってくるので、見た目的にもいい感じに収まるかと思ってます。

まずは、3タイプの画像の規格サイズを設定することから。

まずは、プラグインを「有効化」することがスタートライン。これが終わったところで、上記にある画像サイズを設定します。ここの設定は、僕が入れてる数字あたりが実際のターゲットとなりますので面倒だったら、同じ数字にしておいてもいいと思います。基本で入っている数字ですが、まぁ一般的な数字に近いと思います。

ここは、個人的にかなり重要だと思っています。とはいえ、前段日本語だったのに、いきなりここから英語。ここで詰まる人も多いのではないかと思います。

次のステップは結構重要。モーダルでのギャラリー設定なんですが、ここはスレなりにきっちり設定したいなと。まず「画像ギャラリーカルーセル」のコーナーですが、ここではモーダルギャラリーの色やメタデータの埋め込み可否などを聞いてきます。注意しておきたいのが、このメタデータ下記の画像を見て頂くととわかりますが、「絞り」「焦点距離」「シャッタースピード」これに「カメラの情報」が入ります。カメラの情報出しを控えている方は、使わない方がいいかなと思っています。

この右下みたいな感じで、撮影関連情報が出てきます。

ここからが英語。細かく網羅する必要はありませんが、ざっと全体を見渡して内容を掴む感じでいいと思います。

【Media】
サイトの中に格納しモーダルで表示したいデータの種類を選ぶ場所。僕は、Youtubeとimgのみを指定していますただ、今後PDFの方がいいかななどがあったら、後付けで選ぶことも可能です。

【Overlay】
ここでは、Fancy box実際に動かす時「記事に重ねていいか」や「実際のオーバーレイで動かした時、写真をクリックしたらどうなるか?」などを整備しているイメージ。

【Window】
これは、実際にモーダルで表示される窓の大きさの設定を行う場所。ここは、シンプルでいいのでは?とは思いますが、Behaviorで「Esc key stroke closes FancyBox = Escボタンを押すと閉じる」とか「Scale large content down to fit in the browser viewport.=ブラウザサイズに合わせて縮小する」などがあるので、きちんと目を通してみるといいと思います

【Miscellaneous】
結構細かいことが書いてあるのですが、僕はスルーしています。自動ポップアップとかは、興味のある方はあえて設定するといいかもです。あとはテーマによってコンフリクトするかもだけど、事前に確認しておいてね的なことが書かれています。

とにかく、えらい組み立て方で複雑すぎて。ただ、この読み込み時の設定をみると色々重要なので、きちんと設定した方がいいです。

【Images】
ここで、ファイル種別などを登録できます。ここでは、古いタイプのブログでよく使われる、webpも登録可能なのできちんと入れておきましょう。そのた色々と書いてありますが、明確な目的がない限りあまり触らなくてもいいかなと思います。

とまぁ、こんな感じで意外に触る部分は多くないです。もし悩んでいるようでしたら、英語は辞書引きつつ使ってみてはいかがですか?何事も、やってみることで覚えるというのが持論です。

では、また!

P.S.ヘッド画像は、この話とは何の関係もない「シノアリス」の写真です。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください