Jetpackのタイルギャラリーで画像をタイル風に並べてみよう

2022.2.12 更新

皆さまごきげんよう。
本日はワードプレスの人気プラグイン、Jetpackのタイルギャラリーを使ってみた感じをレポートいたします。

Jetpackとは、30種類以上の機能を備えたプラグインです。これひとつ入れておけば大体のことは出来てしまうというくらい多機能ですのでぜひお試しください。

それではさっそくWordPressの管理画面から、プラグイン → 新規追加で、「Jetpack」と入力して検索します。
「Jetpack by WordPress.com」をインストールしてプラグインを有効化します。

ちなみにJetpackは、Wordpress.comと連携しないと使えませんので、「Wordpress.comと連携」ボタンをクリックする前に

WordPress.com

こちらのサイトから無料サイトを作成してください。
(私は最初、このWordpress.comと連携というのが何のことなのかわからなかったんですよね。無料のWordpress.comを使ったことが無かったので^^;)

無料のWordpress.comのアカウントが出来ましたら、ワードプレスの画面に戻って必要事項を入力し、「Jetpackの認証」ボタンをクリックしてください。

これで、Jetpackの機能が使えるようになりました。ダッシュボードの左側にJetpackタブが追加されていますので、設定から必要なものを選んで有効化してください。

さて本日のお題、画像をタイル風に並べてみよう!ですが、まず先ほどのJetpackの設定から、カルーセルとタイルギャラリーを有効化します。

tile01

次に、投稿の新規追加 → 記事欄にメディアを追加 で、メディアライブラリを開きます。

そうしますと、左上に「ギャラリーを作成」というのがありますのでそれをクリックします。

ファイルをアップロードするか、ライブラリの中の画像をいくつか選択し、右下の「ギャラリーを作成」をクリック。次の画面で表示の設定をします。

タイルモザイクで設定したのがこちらです。↓

なんて簡単!カルーセルも有効化してありますので、画像クリックでフルスクリーン表示&スライドショーも出来ています。しかもこの画面でコメントも出来るようです。画像にキャプションを入れておくと、マウスホバーで浮かび上がるアニメーションもまた美しい!

こちらは丸型でやってみました。↓

こちらはスライドショー。なかなか面白いです。↓

とっても簡単なタイルギャラリー、みなさんもぜひ試してみて下さいね!
次回は、masonry.jsを使ってピンタレスト風レイアウトに挑戦します♪

それでは、ごきげんよう(^^)ノ

コメントを残す