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

インターネッツのみなさまこんにちは!
本日はワードプレスの人気プラグイン、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

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

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

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

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

スライドショーには JavaScript が必要です。

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

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

コメントを残す