INAWEB

大阪府のデザイン・ホームページ制作
(Web制作)

画像が大きすぎる事件

ひとつ前の記事で取り上げましたが、

画像が大きすぎてかなり見づらくなっております。

↓参考画像(クリックして全体表示、同じテイストで少し見づらいですね)

 

問題点は?

画像を小さくする方法はかなりあります。

リサイズ、必要な部分以外切り取る、などなど…。

リサイズできれば解決ですが、そもそも小さくして見えなければ元も子もありません。

「小さくする且つ見やすくする」が目的です。

 

ライトボックスを使用して省スペース化

そこでライトボックスという技術を使います。

ライトボックスとは、簡単にいうと「クリックすると拡大して表示されるアレ」です。

これを使って画像をコンパクトにしていきたいと思います。

 

Easy FancyBox

ちなみにライトボックスといってもかなりの種類があります。

このブログがwordpressでできているということもあり、

「プラグインで簡単に実装できてしまわないものか…」と考えました。

めんどくさがったわけですが、手間が少ないに越したことはありません。

 

今回使用するのは『Easy FancyBox』という実装すれば簡単にライトボックスが使用できてしまうというwordpressのプラグインです。

 

実装手順

気になる実装手順ですが、大前提にwordpressでホームページが作成されている、組み込まれている事が条件です。

まず最初に、管理画面へ行きます。

左のメニューの『プラグイン』をクリックして検索窓で「Easy FancyBox」を検索し、インストールします。

インストールすると左のメニューの『設定』の『メディア』に『Easy FancyBox』の項目が追加されます。

これがEasy FancyBoxの設定です。

ちなみにこれでもう記事やページに実装できます。簡単ですね!( ゚Д゚)

 

実際に使ってみた

さて、準備ができたので実際に使ってみます。

方法はとても簡単です。

『投稿』や『固定ページ』の新規作成、編集画面に『メディアを追加』というボタンがありますよね。

これを押すと画像を選ぶ画面に変わります。

画像を選び『投稿に挿入』を押すと、画像が入りますね。

これで完了です。

 

少しHTMLの知識がある方向けに記述すると、
「imgタグをリンク先(href属性)がwordpressのメディアにアップしてある画像のaタグで囲むだけ」です。

 

簡単ですね。これで実装が完了しました。

今後はこれをバンバン使っていきます。

 

もし、他に実装に挑戦してみてほしいことや改善してほしい点があればお気軽に教えてください。

宜しくお願いします。

コメント

コメントを残す

ブログ新着記事

> 一覧をみる