goods and life +

6月はじめ頃の花とか。(WordPress のギャラリー機能を使ってみました)

WordPress のギャラリー機能を使ってみたよ(*゜▽゜*)♪

ギャラリーは今まで使った事がなかった機能なんですけど、ちょこっと使ってみました。
使い方はとっても簡単です。
投稿の編集画面のどこか任意の場所(ギャラリーを置きたい場所)にカーソルを置いて、上にある「メディアを追加」をクリックし、あとはメディアにアップロードしてある画像を選ぶだけのお手軽さ。

「メディアを追加」ボタンをクリックすると、下の画面が出てきます。
はじめに左のメニューで「ギャラリーを作成」を選んで、メディアライブラリの中にアップロードしてある写真を選んでいくだけ。
選んだ画像をドラッグすることで、表示させる順番も簡単に入れ替えられます。

ギャラリー

ここで使った写真は全部 iPod touch のカメラで撮ったもので、一部の画像の幅を 300px にリサイズしたものもいくつかあるんですけど、なぜか 300px 以上のサイズで表示されてしまうものがあったりしてよくわからない…

…と思ったら!

Jetpackプラグイン「タイルギャラリー」を有効にしていました。
タイルギャラリーが有効になっていると、こんな感じでマガジン風に表示されて、マウスオーバーした時だけ説明のテキストが表示されます。

タイルギャラリー

これはこれでいいんだけど普通に並べたい…。
Jetpack の「タイルギャラリー」を OFF にすると 自動的に WordPress のデフォルトのギャラリーを読み込むので、ショートコードの中に columns="3" と入れて、gallery columns の値を 3 に指定すると、ちゃんと横 3カラムで表示できるようになりました。

ギャラリーはレスポンシブデザインにも自動で対応しているので気軽に使えます、楽。
あと、ちょと凝ったことをしようと思えば CSS で指定すれば OK です。

なかなかいい感じ。
「jQuery Lightbox」プラグインをインストールして、ギャラリーを作成したときに生成されたショートコード中に link="file" と入れると、画像をクリックすれば Lightbox で画像が開くようになります。
これを使えば、わざわざメディアの画像ページ URL に遷移しないので便利。
実際、写真を一枚見るたびに違うページに遷移するのは面倒だし、ユーザに不親切ですよね。

5月半ばから 6月はじめ頃ってこんな感じのお花とか虫たちの季節

jQuery Lightbox にはスライドショー機能もついているので、Lightbox で表示された画像が自動で切り替わるタイミング(時間)の指定がおこなえます。
play slideshow という文字をクリックするとスライドショーが始まり、pause slideshow の文字に切り替わるので、クリックすれば停止させることもできます。

スライドショー機能

ギャラリーのショートコードを複数作っておき、その間に文章や他の画像などを入れても、Lightbox の進む icon-angle-right 、戻る icon-angle-left をクリックしたり、スライドショーで表示させれば、ギャラリーの写真はすべて連続して通しで見ることができるようになっています。

これなら、300px にリサイズしたものをメディアに追加するよりも、500px 幅以上の大きな写真サイズで載せた方がきれいで見栄えがするかもしれない。

本当ならカラム幅以上の写真サイズにしたいところだけど、WebKit のブラウザならちゃんと表示できても、なぜか Gecko レンダリングエンジンブラウザではサムネイルもクリック後に表示される画像も正常に表示できないので、カラム幅以内にしとかなきゃマズいみたい。

Jetpack のもいいけどね
Jetpack の「タイルギャラリー」のいいところは、マガジン風にランダムな大きさに表示されるところ。
…なんだけど、使う写真そのものを 300px にリサイズしたりしていると、記事スペースのカラム幅によっては元画像よりも大きなサイズで表示され画像が荒れたり、大小足した全体の幅がなぜか中途半端なサイズに決めうちされて不細工になったりすることがあります。

ギャラリーを使用するページそのものを 1カラムで表示させないんだったら Jetpack のタイルギャラリーは使わないで、WordPress デフォルトのギャラリー機能を使った方が調整が簡単かもしれないですね。

梅雨の間の晴れ間〜(*゜▽゜*)

お買いもの忘れはないですか?

URL :
TRACKBACK URL :

コメントはこちらから

Return Top