FancyBox』を使ってみよう。道の駅に行こう!子育て絵本の紹介しまじろう記念フォトブック2020年1月30日より、サイトURLを「kohamama.com」から「mammaridea.net」へ変更しました。FancyBox』を使ってみよう。FancyBox』を使ってみよう。「思ってたより画像が小さいなぁ・・・それに見にくい。FancyBox』です。画像をカチッとクリックするだけで、ボヨヨヨ~ン!と拡大表示されます。画像が拡大されるので、小さな画像を大きく見せたいときや、細かいところを見せたいときに使えるいい奴なんです。拡大画像を閉じるときのシューッって吸い込まれる感じも面白いですよね。インストールをして有効化するだけで、すぐに使うことができます。FancyBox』と入力すると検索がスタートします。プラグインが出てきたら、「今すぐインストール」をクリックするとインストールが始まります。インストールが終わると、「今すぐインストール」の箇所が「有効化」に変わるので、そちらをクリックして有効化しましょう。これで使えるようになっています。簡単でしょ!画像を挿入し、リンク先を設定するだけ!いつも通りの操作方法だけで、拡大された画像を表示することができます。画像の挿入方法(その1)投稿の編集画面で「メディアを追加」をクリック。挿入したい画像を選び、画面右下の「投稿に挿入」をクリック。挿入された画像サイズは「フルサイズ」なのでサイズ変更を行います。画像をクリックするとメニューが表示されます。「鉛筆(編集)」アイコンをクリックすると「画像詳細」ウィンドウが表示されるので、画像のサイズと、リンク先の設定をメディアファイルに変更します。最後に、右下の「更新」ボタンをクリックして終了です。画像の挿入方法(その2)「メディアを追加」画面の右下に「添付ファイルの表示設定」があります。こちらからもサイズやリンク先の変更ができます。こちらで表示設定をして投稿に挿入した場合、次に挿入する画像にも同じ設定内容が引き継がれます。一度挿入してから変更するようにしています。拡大するとき、閉じるときの動きが面白い!拡大時のボヨヨヨ~ン!っていう感じと、閉じる時のシューッ!て吸い込まれる動きが、面白くて、気持ちいい。こはるだけかなぁ・・・。全てクリックで拡大できますこのボヨヨヨ~ン!っていう動きは「エフェクト」といいます。「エフェクト」は設定で変更することが可能です。詳しくは、後ほど解説しますね。拡大されて見える仕組みクリックをして拡大表示された画像は、アップロードしたオリジナルサイズの画像です。記事中で画像を使うときは、投稿ページの横幅に合わせたり、記事に合うサイズに設定をして、小さく見せています。クリックすることで、アップロードした本来の画像サイズで表示されるという仕組みになっているのです。[adcohrd]ポップアップ機能で別ページへ移動しない!この機能が一番のポイント!記事中に挿入された画像が小さくて見にくいなぁ・・・って思うときは、その画像をクリックしますよね。元のページは・・・」たいていの場合、画像をクリックすると画像だけが表示されるページに移動してしまいますよね。拡大された画像が表示され、見やすくなるのはいいんですが、元のページへは「戻る」ボタンを押すというアクションが発生し、ちょっと面倒ですよね。FancyBox』を使えば、同じページ上にポップアップ表示され、別ページへ移動することがないので、閲覧者のストレスの軽減にも繋がります。既存の記事画像にも適用されるので安心!ボヨヨヨ~ン!と表示させるときに、リンク先を「メディアファイル」に設定しましたよね。投稿した記事内において、画像のリンク先をメディアファイルに指定しているものについては、インストールするだけで、ボヨヨヨ~ンと拡大表示されるようになります。他にもできることをピックアップしています。お時間がある方は続きをどうぞ。ボヨヨヨ~ン!以外の設定ができます。Transionの「In」が拡大時、「Out」が閉じる時の設定です。「Elastic」はボヨヨヨ~ン!です。「Elastic」以外に「Fade」の設定ができます。Easingの「In」「Out」の設定は「Elastic」を選んでいる時のみ変更ができます。FancyBox』の設定機能が追加されています。Mediaポップアップしたいメディアにチェックを入れて設定します。画像、動画、PDFについては、リンク先を「メディアファイル」にすることで拡大表示されます。content」にチェックを入れ、次のコードをテキストに埋め込む必要があります。</div></div>「ID-1」の部分は、自由につけることができます(英数字)。実際の表示はこちらです【ここをクリックしてください】クリックすると表示することができる文章の見本です。クリックすると表示することができる文章の見本です。クリックすると表示することができる文章の見本です。同じにしてくださいね。id>で「表示する文章」にIDを付けます。id>で付けたIDを指定すれば、「クリックしたらこのIDへリンクしてね」と設定することができます。FancyBox.ポップアップされた画像の周りを透明化するかどうかを設定します。デフォルトはチェックありです。チェックありとなしのイメージチェックを入れた場合、以下の設定ができます。Opacity透明度の設定。設定できる値は「0」から「1」までの間で、小数点単位で入力します。初期設定は「0.7」です。3ケタのコードで入力します。初期設定は「#777」です。FancyBox.」にチェックを入れて設定しているときに、半透明部分をクリックして画像を閉じる設定をします。button画像の右上に表示させる「×」閉じるボタンを表示させるかどうかを設定します。デフォルトはチェックあり。訪問者が迷わないように表示しておくほうがベストだと思います。FancyBox拡大した画像を閉じるときに、「ESC」キーを使えるかどうかを設定をします。デフォルトはチェックが入っています。clickedポップアップで表示された画像部分ををクリックしても、画像を閉じれるように設定をします。デフォルトはチェックなし。これら全てにチェックを入れておくと、どこをクリックしても画像を閉じることができるようになります。Color画像に表示する「タイトルの文字色」と「画像の枠色」の設定をします。3ケタの色コードで入力します。デフォルトは「#000(黒)」「#FFF(白)」に設定されています。タイトルを「#060(緑)」、枠を「#E62(オレンジ)」に変更した例が下の画像です。画像の周りに表示される枠線の幅を設定します。「0」~「100」で設定ができます。デフォルトは「10」です。空欄にすると枠線は「10」の幅、「0」を入れると枠線なしになります。scrollingスクロールをしたときに、常に表示された画像が中央に表示されるかどうかの設定をします。タッチデバイス(スマホやタブレット)では無効になります。viewport拡大表示された画像が、ブラウザーの画面内に収まるかどうかの設定をします。理由がない限りチェックは入れておきましょう。その方が訪問者に対して親切ですよ~。speed画像が拡大されるとき、閉じるときのスピードを設定します。デフォルトは「300」です。数値が大きいほど、スピードが遅くなります。まとめいかがでしたでしょうか?初心者でもインストールするだけ、設定いらずで使えるっていうのが嬉しいプラグインです。細かな設定をしていけば、自分らしいポップアップ表示を表現できるかもしれませんね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Gutenbergを使いこなせるか不安・・・。管理人Koharu1児のママ。2015年に出産し、子育て真っ最中。仕事をしながら、子育てを続けていましたが、仕事と家庭の両立の難しさを実感し、長年勤めた職場を退職。新しい生活をスタートしました。Ridea(マンマリデア)ー「ママが笑う」毎日を。ride(マンマリーデ):ママが笑う』+『idea(イデア):アイデア』の造語です。ホンの少しの笑顔で、こころも豊かになります。そんな思いを込めてつけました。マンマリデア.ホームシェアメニューTOPへ。