JetPack タイルギャラリーの使い方

WordPressの純正プラグインパッケージ、JetPackは多機能でかなり使えるプラグインですが、今日はその中でもタイルギャラリー機能についてまとめてみたいと思います。

このギャラリーはレスポンシブにも対応していて、カルーセル機能も使えます。
かっこいいギャラリーをすぐに導入出来るので便利ですね!
まずは設置するギャラリーはこんな感じです。↓
(ちなみにこのギャラリーには、縦や横の写真などサイズの違う写真を選んでいます)
画像をクリックすると写真が大きく表示されますので、画像をクリックしてみて下さいね。

JetPackの設定から

jetpackの管理画面からカルーセルとタイルモザイクを有効化します。
jetpackとはWordPressnoプラグインです。プラグインをインストールした状態という事でお話を進めていきますね。
jp_08

タイルギャラリーを有効化します。

jp_06

カル-セルを有効化、その後に「設定」をクリックして詳細を設定します。

jp_07

ギャラリーの背景を白か黒か、また写真のメタ情報を掲載するかなどを設定します。

ギャラリーを投稿する

と、その前に・・・・
ギャラリーに投稿する写真を用意しておいて下さいね。

最近のデジカメは、そのまま撮影すると解像度が高く、ファイルサイズが大きかったりします。
(幅が3000ピクセル以上とかっていうサイズですね)

そのままだとファイルサイズが大きすぎてアップロード出来ない場合があるので、写真加工をして、サイズを縮小しておく方が良いでしょう!
↓こちらに以前写真加工の方法を書いたので、良かったら参考にして下さいね。
ブログに投稿する写真サイズを簡単に小さく加工する
私はギャラリーに投稿する場合は、1260px位にしています。

それでは、投稿画面に行って、投稿をします。

jp_01

投稿の際に「メディアを追加」をクリックします。

jp_02

1. 「ギャラリーを作成」を選択します。
2. 右側の「ファイルをアップロード」からファイルを選択して、画像を挿入して行きます。

※直接ドロップしても画像の挿入が出来ます。1つ1つ選んでもOK!

jp_03

この場合は、9点の写真を選択しました。
画面の一番下に「9点を選択済み」とありますね。ここで選んだ写真の点数が表示されています。

1つ1つの写真を選択して、右側にその写真の詳細情報を入力できます。
ここで「説明」に文字を入れておくと、写真上にマウスを持って行った時にその文字がぴょこんと浮き出てくる感じになります。何も入れなければマウスオーバーしても、もちろん何も出ません。
↓ギャラリーが表示された際にこんな感じで出てきますよ。
jp_9

jp_04

右側の「ギャラリーの設定」で、好きな表示形式を選択します。
そして「ギャラリーを挿入」をクリック。
今回選択したのは「タイルモザイク」という表示形式です。
※タイルモザイクは、サイズの違う(縦や横の写真が混在していても)写真も勝手に上手くレイアウトしてくれるんで便利ですね。

jp_05

全ての作業が終わると、投稿画面に戻り、このようにカメラと写真のマークが表示されています。
ここが、ギャラリーという事ですね!

ちなみに・・・・

表示形式を「丸型」で選択した場合はこのようなギャラリーになります。

もちろん、レシポンシブ対応なのでipadやスマホ表示の場合は自動的に写真も小さくなります!
便利なJetPackプラグインのタイルモザイクギャラリーの投稿方法でした!

関連記事

  1. 固定ページ毎に違うヘッダー画像をアイキャッチで設定する

  2. microdataでHTML5のパンくずリストを作成

  3. ロリポップで「不正なアクセスを検知いたしました」とメールが来てWord…

  4. スマートフォン(レスポンシブ)対応のGoogleMap

  5. WordPressのバックアップ

    WordPressを「BackWPup」プラグインで定期的にバックアッ…

  6. 2013.7.13 WordBench 神戸 「お気に入りのテーマを見…

コメント

  1. この記事へのコメントはありません。

CAPTCHA


最近の記事

  1. WordPressのバックアップ
  2. 女性起業家の方へ
  3. 2016.05.4

    至福の時間

アーカイブ

制作実績一覧

  1. 12starz
  2. SOARist
  3. ダンスウェア ララック様
  4. デジタルイースト
  5. 西表島 シュノーケル・カヌーツアーcrossriver
  6. ハミング
  7. hearty
  8. An Rire
  9. スタートアップ