画像サイズに自動で強弱をつけて配置するプラグインTiled Galleries Carousel Without Jetpack

画像サイズに自動で強弱をつけて配置するプラグインTiled Galleries Carousel Without Jetpack


画像サイズを大小いろいろで雑誌風のブロックレイアウトにするには?

コンテンツ部分に画像を表示する際、「一枚画像をどーんと大きく」とか「画像を右寄せ・左寄せにして、隣にテキストを流し込む」みたいなレイアウトは、わりと簡単にできます。
でも、こんなレイアウトにするとき、どういう風に作りますか?

マウスホバーすると、写真のキャプションが表れたり、クリックすると画像が拡大ポップアップされてスライドショーで見る事も可能です。
これをゼロから作るとなると、かなりの難易度ですね・・・
さらに、レスポンシブにするときどうするか?を考えると気が遠くなります。

そこで、とっても便利なプラグインがあります!その名も・・・

Tiled Galleries Carousel Without Jetpack

スクリーンショット 2015-11-24 20.33.37

プラグインの詳細はこちら

プラグインのダウンロードと有効化

まずは、ダウンロードして有効化しましょう!
ダッシュボード>プラグイン>新規追加
で、検索窓に「Tiled Galleries Carousel Without Jetpack」と入力してエンターキーを押します。
tiled-gallery02

インストールできたら、プラグイン一覧の画面で有効化します。

tiled-gallery03

プラグインの使い方

ギャラリーを作成

「設定」 > 「メディア」で「Display all your gallery pictures in a cool mosaic.」にチェックを入れます。

tiled-gallery-media

ギャラリーを編集

さあ、いよいよ画像を追加してみましょう!
投稿画面で、「メディアを追加」をクリックします。

tiled-gallery04

  1. 画面左にある「ギャラリーを作成」をクリック。
  2. 入れたい写真をどんどんクリック。チェックマークを確認します。
  3. 右下の青いボタン、「ギャラリーを作成」をクリック。

キャプションを入れる

tiled-gallery05

  1. サムネイル画像の下に入力欄が出ますので、ここでキャプションを入れます。
  2. 「ギャラリーを挿入」をクリック。

投稿画面

tiled-gallery07

投稿画面では、このように表示されているのを確認できましたか?
できたら、「公開」もしくは「下書き」ボタンをクリックして、画面表示を見てみましょう。

ソースコード

ちなみに、出力されるHTMLソースコードは、このようになります。


		
		

ポチポチとクリックするだけなので、簡単ですね!!

こんなこともできます

Squere Tileを選ぶとこんな感じ。

Circlesを選ぶとこう。

Thumbnail Gridを選ぶとこう。

同じ画像を使っても、レイアウトによっていろいろな見せ方ができますね。
一昔前までは、こういうものを作るのは結構な手間がかかりましたが、ほんと便利な時代になりました・・・
ツールは賢く使って行きましょう。

[広告] プロから教わるプログラミング講座が3,000円から【ストリートアカデミー】

shoko administrator

フリーランスのWeb制作者。WordPressのサイト構築、およびWebデザインとディレクション。専門学校HAL東京にてWEB学科の講師をしています。WordPressコミュニティに出没。趣味は合気道。

5 comments

ばかりんご3月 13, 2016 at 6:49 pm

こちらの記事を参考にTiled Galleries Carousel Without Jetpackを導入したいと考えています。

プラグインをダウンロード>有効化>もろもろ設定

…と記事を見ながらやってみて、投稿画面にサムネイルが並ぶところまではできたのですが、画像をクリックするとただ画像を読み込むだけで、デモのような素敵な動きをしてくれません…(涙)

何か事前にやっておかなければならない大前提の何かがあるのかなぁと思い、いろいろ試してみたものの、初心者でわからないことだらけです。。。。

原因として、どんなことが考えられるでしょうか?
漠然とした質問で申し訳ありません!お力をお貸しいただければ幸いです。

Reply  

pixeldesign_wp3月 13, 2016 at 7:25 pm

「画像をクリックするとただ画像を読み込むだけで」というのがどういう状態なのかちょっとわからないのですが、、、もう少し詳しく教えていただけますか?
ちなみにキャプションが下から登場するという動きは、キャプションを入れないと出てこないと思います。

Reply  

ばかりんご3月 13, 2016 at 9:54 pm

早速のお返事、ありがとうございます。
キャプションは入れてありますが、下から登場するどころか、最初からサムネイルの下に出ちゃってます。

「画像をクリックするとただ画像を読み込むだけで」というのは、普通にリンクをクリックして画像が表示されるだけ…という言い方で伝わるでしょうか?(汗
つまり、
「クリックすると画像が拡大ポップアップされてスライドショーで見る」という動きになりません。

Reply  

pixeldesign_wp3月 15, 2016 at 2:50 pm

WordPressのバージョンはいくつでしょうか?最新は4.4です。
WordPressのバージョンが古いと、プラグインがうまく動かない場合があります。

Reply  

サカタ吾郎9月 27, 2017 at 11:53 am

こんにちは。このプラグイン試してみようと思っておりますが、ページャーって出ますかね?
開発更新頻度も低くて、入れようか迷っているところです。

Reply  

Leave a Reply