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

2016年01月10日

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

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

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

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

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円から【ストリートアカデミー】

共著書および執筆協力している本

効果的なアプリ/Web開発のための コラボレーションツール活用入門
単行本:¥3,229
[ 2016年10月発売 ]
 
HTML5+CSS3でつくる! レスポンシブWebデザイン
単行本:¥2,786
[ 2016年3月発売 ]
 
ビジネスサイトをこれからつくる WordPressデザイン入門 サイト制作から納品までのはじめの一歩
単行本:¥2,592
Kindle版:¥2,400
[ 2016年2月発売 ]
 

コメント4件

  • ばかりんご | 2016.03.13 18:49

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

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

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

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

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

  • pixeldesign_wp | 2016.03.13 19:25

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

  • ばかりんご | 2016.03.13 21:54

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

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

  • pixeldesign_wp | 2016.03.15 14:50

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

コメントを書く







コメント内容