頑張らない!でも諦めない!必死にならずにええかげん

18.タイルギャラリー-Jetpack by WordPress.com

      2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、
ここでは「タイルギャラリー」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

タイルギャラリー

タイルギャラリー

タイルギャラリー

外部グラフィックエディタを使わずに写真をマガジン風のモザイクレイアウトで表示できます。

ギャラリーを投稿に追加する際、画像のレイアウトスタイルを選べるようになっています。長方形、正方形、丸型のギャラリースタイルに対応しています。デフォルトでは標準のサムネイル・グリッドレイアウトでギャラリーが表示されます。長方形のレイアウトをすべてのギャラリーに対してデフォルトにするには、設定 → メディアページで「すべてのギャラリー画像をモザイク形式で表示する」にチェックを入れてください。

注: タイル状ギャラリー内の画像には特別な処理が必要なため、Photon モジュールが有効化されていない場合でもこれらの画像は WordPress.com の CDN を通じて提供されます。

01_JetPackタイルギャラリー詳細

JetPackタイルギャラリー詳細

通常のギャラリー表示

ギャラリーの表示はJetPackを利用しなくとも表示することができます。
通常のギャラリー表示の方法については以下でご紹介しています。
wordpressでメディアページ(ギャラリー、gallery)を表示する方法

通常のギャラリーで画像を表示した際には、以下のように表示されます。

02_標準ギャラリー表示

標準ギャラリー表示

ギャラリーに表示された画像をクリックするとメディアページが表示され、
画像を拡大して表示することができます。

03_標準ギャラリー画像クリック表示

標準ギャラリー画像クリック表示

タイルギャラリーの有効化

タイルギャラリーを有効化し、タイルギャラリー表示を行うには設定を有効にする必要があります。

タイルギャラリーを有効化すると[設定]-[メディア]に対して、
「タイルギャラリー」が表示されるようになります。

そこで[すべてのギャラリー画像をモザイク形式で表示する。]にチェックを入れることで、
タイルギャラリー表示が有効化されます。

07_JetPackタイルギャラリー設定

JetPackタイルギャラリー設定

※なお、タイルギャラリーを有効化してからタイルギャラリーに表示する画像が表示されるまでは、
しばらく時間を要する場合があります。

08_タイルギャラリー画像の準備中

タイルギャラリー画像の準備中

Jetpackタイルギャラリー表示

Jetpackのタイルギャラリーを有効化するとギャラリーの表示が以下のようにタイル表示になります。
※便宜上、縮小表示しています。

04_タイルギャラリー表示

タイルギャラリー表示

タイルギャラリー表示を利用している場合には、
画像にマウスオーバーすると、画像にロールーバーしてキャプションが表示されます。

05_タイルギャラリーマウスオーバー表示

タイルギャラリーマウスオーバー表示

画像をクリックして表示される拡大表示は、標準ギャラリーと同様です。

06_タイルギャラリー画像クリック表示

タイルギャラリー画像クリック表示

Photonサービス利用について

注意事項に明記されていますが、
タイルギャラリーを有効にした場合には、
画像は WordPress.com の CDN を通じて表示されるようになるとの記載があります。

注: タイル状ギャラリー内の画像には特別な処理が必要なため、Photon モジュールが有効化されていない場合でもこれらの画像は WordPress.com の CDN を通じて提供されます。

Photonを有効化した場合のように、画像ファイルの参照先が外部サーバになるわけではないようですが、
画像処理に一部Photonサービスが利用されているようです。

トラフィックなどを懸念される方は注意された方がいいように思います。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

単純なグリット表示のギャラリーが、
コンテンツエリアを十分に活かしたタイル表示にできることは、
コンテンツの見栄えを刷新してくれる魅力的な機能です。

サイトに魅せる画像を多く利用されている場合は採用をご検討されてはいかがでしょうか。


WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - jetpack, WordPress , ,

  関連記事

eye_automattic
wordpressに投票機能を追加するPOLLDADDYの利用登録

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_vaultpress
VaultPress™を利用して運用中のメインサイト(Primary)を復旧する手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
Zenbackプラグインで利用のスクリプトコードを取得する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WelCart専用テーマPayPal VermilionによるPayPal購入フロー

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
headタグ挿入にWP Headmaster_v0.2-wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
16.WP.me 短縮 URL-Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WP jQuery Lightboxで特定の投稿のみスライドショーが動かない場合の対処法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
19_10.Youtubeプレーヤー表示には、Jetpackのyoutube動画ショートコード埋め込み

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_automattic
VaultPress™オンラインバックアップサービスの利用登録

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …