画像サイズに自動で強弱をつけて配置するプラグイン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コミュニティに出没。趣味は合気道。