【WordPress】画像クリックで拡大表示にする方法 (Easy FancyBox)

WordPress

【やりたいこと】記事の画像拡大表示されるようにしたい!

記事で手順を説明するときの画像ってとても大切ですよね。

文章だけで説明するより、画像もあった方が分かりやすくて親切ですよね。

ですが、画像の使い方って、けっこう悩みませんか。

画像を見やすくするために、大きく表示させると、画面いっぱいが画像になってしまって、文章の説明が見えなくなってしまいます。

逆に画像を小さく表示させると、画像内の文字など細かいところの確認ができなくなってしまいます。

う~ん、悩ましい問題です。時には、大きく、時には、小さく表示されればいいのだけれど、、、

お客様、画像の表示でお困りのようですね。良ければ、こちらのプラグイン「Easy FancyBox」を使ってみてはいかがでしょうか。

画像をクリックすることで、拡大表示が可能になりますよ(^^♪

あらま、急な登場ですね。

ということで、今回は、画像を拡大表示にする方法です(^^)/

【10分でできる!】ポイントはリンク先の設定

※ダウンロード時間は10分の中に含まれていません。

0.概要

プラグインEasy FancyBoxを使用して、記事の画像をクリックすることで拡大表示できるようにします。また、画像のリンク先設定のデフォルトを変更する方法をお伝えします。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman
Hueman テーマはサイトのトラフィックを増加させ、訪問者のエンゲージを増やす手助けをします。ロードが早く、100%モバイルフレンドリーであると Google にも認識されています。また、WordPress.org 内のブログ / マガジン用テーマで最高レートを獲得し、世界中の7万以上のウェブサイトが使用しています。

・プラグイン Easy FancyBox

Easy FancyBox
ほぼすべてのメディアリンクで FancyBox の jQuery 拡張機能を簡単に有効にします。マルチサイト対応。 iFrame および Flash ムービーをサポートします。

2.手順

①Easy FancyBox のインストール

プラグインの新規追加をクリックします。 Easy FancyBoxを検索し、インストールします。 インストール後、有効にします。

②画像の設定

本文に追加した画像をクリックし、鉛筆アイコンをクリックします。

画像詳細画面が表示されます。

設定を表示のリンク先をメディアファイルに変更しましょう。

③確認

②の完了後、ブログに投稿されている画像をクリックしてみてください。

下記の画像のように拡大表示されていれば成功です。

お疲れさまでした(^^♪

すべての画像をクリックで拡大表示にするためには、各画像のリンク先をメディアファイルに変更しなければいけません。

④デフォルトの変更

画像のリンク先のデフォルトをメディアファイルに変更することができます。

~~/options.php を開きます。

Image_default_link_typeをfileに変更します。

変更を保存をクリックします。

これで、画像のリンク先のデフォルトがメディアファイルに変更されました。

3.追記

プラグインを使用せずとも、画像のリンク先をメディアファイルに変更するだけで、画像クリックで拡大表示できます。

(プラグインありだと、表示のされ方が気持ちいいよね。)

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

SHOWROOM(ショールーム)
SHOWROOMはアーティストやアイドル、タレント等の配信が無料で視聴でき、さらに誰でもすぐに生配信が可能な、双方向コミュニケーションの仮想ライブ空間です。

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

※無料版あり Unity学習100日記念本(0~30日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! これからUnityをはじめる人、Unityの勉強が続かなかった人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(30~60日編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習30~60日編です! Unityのスクリプトを読んでみたい人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(60~100編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習60~100日編です! 主に、Unityでのアウトプット法について書きました 無料版もありますので、気軽にどうぞ!(^^)!
※無料版あり Unity学習100日記念本(Progate編) - hide21のお店 - BOOTH
Unityの学習をはじめて、 100日が経過しましたので、 これまでのUnity学習の経験をまとめてみました! 今回は、Unity学習Progate編です! これから、Progateをはじめる人に向けて、書きました。 無料版もありますので、気軽にどうぞ!(^^)!

コメント

タイトルとURLをコピーしました