挿入した画像が見づらいなぁ･･･
拡大できる方法はないのかな？
ブログ運営をしていて、ふと画像に関する疑問が浮かんできました。
そう思って調べた結果、プラグインで解決できたので、同じ悩みの方のためにもメモ程度に残しておきます。
本記事の内容
- クリックして画像を拡大する方法とは
- プラグインの設定方法について
使用するプラグインは「WP jQuery Lightbox」です。
今回はテストサイトで試してみたいと思います。
完成後は下の画像みたいな感じになります！
クリックしたら大きくなります。
プラグイン設置方法
step
1プラグインを追加する
Word Pressの「プラグイン」→「新規追加」を選択します。
step
2対象のプラグインを入力する
赤枠で囲ってある部分に、「WP jQuery Lightbox」と入力します。
step
3インストールする
「WP jQuery Lightbox」と入力すると、自動で検索を開始します。
赤枠で囲ってある、「今すぐインストール」をクリックする。
step
4インストール中の画面
インストール中は以下のような画面になっているかと思います。
step
5プラグインを有効化する
赤枠で囲ってある、「有効化」をクリックする。
step
6設定をクリック
有効化したらプラグイン画面に自動で変わるので、インストールした「WP jQuery Lightbox」を探して「設定」をクリック
step
7クリック後
設定画面を開くと以下のような画面になります。
step
8カスタマイズ例
僕の設定カスタマイズは画像のようにしています。
「スクリーンサイズに合わせて画像を縮小」の項目はチェックしておくことをオススメします。
最後に必ず「設定を保存」をクリックすることを忘れずに！
投稿ページ画面の設定方法
次に投稿ページ画面の設定方法についてです。
あとは投稿時に設定さえすれば完了です。
もう少しで終わりますよー！
step
1メディアを追加を選択
画像を追加するために、投稿画面の「メディアを追加」を選択する。
step
2使いたい画像を選択する
画像挿入の仕方は普段やっているやり方で問題ありません。
今回はブログタイトル画像を挿入してみようと思います。
step
3使用画像の決定
「投稿に挿入」をクリックする。
step
4編集をクリック
拡大させたい画像を左クリックして鉛筆マークである編集を選択して下さい。
step
5リンク先を選択する
step
6リンク先の変更をする
リンク先を、「なし→メディアファイル」に変更しましょう。
step
7
変更したら以下の画像のようになるかと思います。
下にある、更新ボタンをクリックして終了です！
まとめ
無事に設定は出来ましたか？
実際に変更をプレビューしてみて、挿入した画像をクリックすると画像が拡大したかと思います。
画像が拡大出来るだけで閲覧者からの印象もだいぶ変わってくるかと思います。
意外と画像を挿入しただけだと見づらかったりもするんですよね。
今回は挿入した画像を拡大する方法について解説してみました。