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

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 が管理運営を行うドメインならびにサービスの名称です。

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


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

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

Rakuten Promotion

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

 - jetpack, WordPress , ,

  関連記事

eye_wordpress
WordPressのアクセス解析にGoogle Analytics for WordPress_v4.3.4-プラグインを利用

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

eye_wordpress
02.通知の機能-Jetpack by WordPress.com

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

eye_google_anl
GoogleAnalyticsのユニバーサルアナリティクスコードを取得する(追加)

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

eye_wordpress
07.メール投稿-Jetpack by WordPress.com

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

eye_wordpress
12.一括検索-Jetpack by WordPress.com

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

eye_wordpress
Gmail™サブメールアドレス活用して複数メールアドレスをショッピングカートで利用

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

eye_wordpress
WordPress4.0以降のサイトの言語変更による日本語化

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

eye_jetpack
JetPackサイト統計データが消えた場合に復活する手順(してもらう)

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

eye_wordpress
WordTwitの利用と導入(wordpressプラグイン)

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

eye_jetpack
JetPackのサイト統計が初期化(0pv)になったらサポートに頼ろう

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