2019年7月26日こんにちは!フリーランスWebディレクターののせっち@yukinouz1です。画面をクリックしたときに画像を拡大表示してくれるlightbox。Fancyboxというプラグインを使うのが便利です。公式サイトはコチラ基本的な使い方はとても簡単で色々なブログで紹介されています。Fields(以下ACF)で使う場合は少し工夫が必要です。自分への備忘録も兼ねて記します。同じようにハマった人の道しるべとなれば幸いです。やることはとても単純です。それではいってみましょう。Fancyboxについて軽くおさらいACFでは【メディアファイル】を選択できない。Fancyboxについて軽くおさらい基本的な使い方についてはいくらでも記事がありますので、さっくりいきます。画像のリンク先をメディアファイルにするとても簡単です。これでクリックした画像を拡大表示してくれます。商品一覧ページなどで、サムネイル的に小さく画像を並べる場合などに便利です。ACFではこの方法は使えません。ACFでは【メディアファイル】を選択できない。ACFで画像を選択した場合メディアファイルを選択する事ができなません。選択できないというか、項目自体がありませんね・・・。すればいいのか?答え:aタグを使うだけ【コピペOK】とても単純です。拡大させたい画像のimgタグをaタグで囲み、メディアファイルのリンクを貼ればOKです。以下のように記述します。?>ACFで下記を選択している想定です。URL簡単に解説aタグを使って、メディアファイルとリンクを紐づけます。image”が付きます。こんなかんじです!投稿画面で「メディアファイル」を選択すると、自動でaタグでimgタグが囲まれます。それをテンプレートファイルでやっているだけです。?>上記の記述で、画像データが選択されていない場合はimgタグを出力しないようにしています。まとめ・ACFでは画像のリンク先→メディアファイルを選択できない。Fancyboxを使いたい場合はaタグで囲んであげればOK。Barは不便?!オススメ設定を紹介します!【BetterTo...【デザイン留学】モンスターアカデミア体験談(1週目)【セブ】のせっち@バンコク永住系フリーランスバンコク在住6年のフリーランスディレクター兼エンジニアです。早稲田卒でお堅い商社で7年勤務→バンコク駐在→iSara4th普段はバンコクで生活費を下げつつ、Web制作中心に生きています。