タイルギャラリーブロック

このタイルギャラリーでは、画像ギャラリーをタイル状のモザイク、円形グリッド、正方形タイル、またはタイル状の列として表示できます。スライドショーのオプションもあります。

重要:画像をタイルギャラリーブロックに追加すると、Jetpackの画像CDNを通じて自動的に配信されます。Jetpackのサイトアクセラレーター機能を無効にしている場合も同様です。

以下に例を示します。

要件MD

タイルギャラリーブロックは、Jetpackに接続されたすべてのサイトで利用できます。Jetpackブロックの一部であり、デフォルトで有効になっています。タイルギャラリー機能はモジュールページで無効にしても引き続き利用できます。

有料アップグレードなしでタイルギャラリーブロックを使用できます。Jetpackブロック利用可能なブロックと有効化方法については、こちらの記事をご覧ください。

クラシックエディターのタイルギャラリーMD

クラシックエディタープラグインまたはクラシックブロックでタイルギャラリーを使用するには、クラシックエディターでタイルギャラリーを使用する方法をご覧ください。

ギャラリーを作成MD

ギャラリーを作成するには、次の手順に従ってください。

1. 新しいタイルギャラリーブロックを、投稿内のブロックセレクターまたは投稿ツールバーのブロックセレクターから追加します。
2. パソコンからアップロードするか、メディアライブラリから選択するか、外部ソースから選択して、ギャラリーに画像を追加します。
3. 画像を追加したら、ブロックツールバーとサイドバーを使ってカスタマイズします。
4. ツールバーにはブロックタイプを変更するボタンがあり、作成するギャラリーの種類を選択できます。
5. ツールバーのその他のボタンでは、適切なオプションを選択してギャラリーの配置を設定できます。編集を使って画像を追加または削除できます。
6. ギャラリーに含めたくない画像の選択を解除するには、Xをクリックします。次に、画像をドラッグ＆ドロップして並べ替えます。
7. 新しい画像を追加するにはギャラリーに追加をクリックします。ギャラリー内の画像の変更が完了したら、ギャラリーを更新をクリックします。
8. ギャラリー内で画像を配置するには、ブロック内の画像をクリックし、矢印ボタンを使って画像を移動します。

ツールバー設定MD

ブロック上部のツールバーには、タイルギャラリーブロックのカスタマイズオプションがあります。移動先 ツールバー → ブロックアイコン → 変換先 ／ スタイルでオプションにアクセスします。

• 変換先: ブロックを画像、スライドショー、カラム、詳細、グループ、またはギャラリーに変換します。
• スタイル: タイルモザイク、円形、正方形タイル、タイル状の列など、さまざまなレイアウトオプションから選択します。
• 配置: なし（デフォルト）、幅広、全幅、中央揃えのオプションを使って、ページ上でギャラリーをどのように表示するかを設定します。
• 画像フィルターを選択: 白黒、セピアなどの視覚効果フィルターをギャラリー内の画像に適用します。
• ギャラリーを編集: ギャラリー設定を開いて画像を変更します。

サイドバー設定MD

サイドバーパネルには、より詳細なカスタマイズオプションがあります。

• タイルギャラリーの設定:
  • 列: スライダーまたは手動入力フィールドを使って、ギャラリーの列数を調整します。
  • リンク先: クリックしたときの画像の動作を設定します。なし、メディアファイル、添付ファイルのページ、カスタムから選択できます。
• スタイル: タイルモザイク、円形、正方形タイル、タイル状の列など、さまざまなギャラリーレイアウトを切り替えます。これらはブロックツールバーにあるものと同じスタイルのカスタマイズオプションです。
  • 背景色: ギャラリーの背景色をカスタマイズします。
  • パディングとマージン: ギャラリーブロックの周囲と内部の間隔を調整します。

タイルギャラリー画像へのカスタムリンクの追加MD

URL、ページ内アンカー、その他の対応形式を含むカスタムリンクを割り当てて、タイルギャラリーブロック内の各画像の移動先をカスタマイズします。この機能により、ナビゲーション用またはインタラクティブな画像レイアウトを作成する際の柔軟性が高まります。

始める前に:

Jetpackのカルーセル機能が無効になっていることを確認してください。設定場所はJetpack → 設定 → 投稿設定 → メディアです。カルーセル機能はカスタムリンクの動作を上書きするため、リンクが期待どおりに機能しなくなります。

タイルギャラリー画像にカスタムリンクを追加する方法

1. タイルギャラリーブロックを挿入: 投稿または固定ページにタイルギャラリーブロックを追加し、画像をアップロードまたは選択します。
2. ギャラリーで画像を選択: タイルギャラリー内の任意の画像をクリックします。
3. カスタムリンクを設定: ブロック設定サイドバーでリンク先オプションを見つけます。
   • カスタムをドロップダウンから選択します。
   • 希望するリンクを入力します。次のいずれかを指定できます。
     • 完全なURL（例: https://example.com/page）
     • ページ内アンカー（例: #section）
     • サイトの設定に応じた単純なキーワードまたはフラグメント
4. 他の画像でも繰り返す: 必要に応じて他の画像にもカスタムリンクを適用します。同じギャラリー内で異なる種類のリンクを組み合わせることもできます。
5. 投稿を保存して公開します。

リンク付き画像をクリックすると、デフォルトでは同じタブでカスタムリンク先が開きます。標準以外の値（キーワードやJavascript: snippetなど）を入力しても、Jetpackではブロックされませんが、ブラウザーの動作は設定によって異なる場合があります。

さらに、異なるリンク先のオプションを切り替えても、以前に保存したカスタムリンクは保持されます。

タイルギャラリーブロックのトラブルシューティングMD

タイルギャラリーのオプションが表示されない、または正しく表示されないMD

タイルギャラリーのオプションが表示されない、または正しく表示されない場合は、次の手順に従ってください。

1. まず、Jetpackへの接続が正常に機能しているか確認してください。Jetpackへの接続が切断されている場合は、接続に関するトラブルシューティングをご確認ください。接続エラーを解決してください。
2. 次に、WP AdminダッシュボードからJetpack → 設定 → パフォーマンス → パフォーマンスと速度。次の画像の読み込みを高速化オプションを有効にしてください。
3. デフォルトテーマに切り替えて、Twenty Twenty Four Jetpackのタイルギャラリーとテーマが競合していないか確認してください。デフォルトテーマを使用したときにタイルギャラリーのオプションが正しく表示される場合は、テーマの作成者に連絡して競合を解決してください。
4. サイトで有効になっている他のスライドショーまたはギャラリープラグインを無効にしてください。2つのスライドショーまたはギャラリープラグインを同時に使用すると、競合が発生する可能性があります。
5. 最後に、Cleaner Galleryプラグイン、またはこの機能を含むテーマを使用している場合、サイトでタイルギャラリーの機能を使用できません。この競合を解決するには、この小さなプラグインをインストールしてCleaner Galleryを無効にできます。

スライドショーのオプションが見つからないMD

タイルギャラリーにスライドショーのオプションが表示されない場合は、次の手順に従ってください。

1. WP Adminダッシュボードに移動します。
2. Jetpack → 設定 → 執筆。
3. ショートコードを使用して人気サイトのメディアを埋め込むオプションが有効になっていることを確認してください。

ギャラリービューで単一の画像を表示する方法MD

投稿または固定ページの単一の画像をギャラリービューで表示するには、次の手順に従ってください。

1. タイルギャラリーをクリックし、ギャラリー設定に移動します。
2. 「添付ファイルページ」をリンク先のドロップダウンメニューから選択し、変更を保存します。
3. これで、画像をクリックするとギャラリーのオーバーレイビューに表示されます。

ギャラリーの幅を指定するMD

タイルギャラリーは、テーマのコンテンツ幅いっぱいに表示されるように作られています。特定の$content_widthの値を指定するには、テーマのfunctions.phpファイルに次のコードを追加します。

if ( ! isset( $content_width ) ) {    
      $content_width = 800;    
}

Please be aware that code snippets are provided as a courtesy and our support team is unable to offer assistance customizing them further.

テーマファイルの編集に不慣れな場合は、次のプラグインも使用できます。カスタムコンテンツ幅。

テーマでコンテンツ幅が定義されていない場合、タイルギャラリーの幅はデフォルトで500pxになります。コンテンツ幅というテーマ機能について詳しくはこちらをご覧ください。

テーマですでに$content_widthの値が定義されているものの、タイルギャラリーにのみ別の値を使用したい場合は、tiled_gallery_content_widthフィルターを使用できます。

キャプションが表示されないMD

タイルギャラリーブロックは、画像ごとまたはブロック全体のキャプションにまだ対応していません。別の方法として、クラシックブロックを使用してタイルギャラリーを追加すると、キャプションを追加できます。詳しくは、クラシックエディターでタイルギャラリーを使用するガイドをご覧ください。

関連情報：ギャラリー画像を全画面表示で開くカルーセル、またはスライドショーブロックで一度に1枚ずつ表示します。

プライバシー情報MD

タイルギャラリーブロックはデフォルトで無効になっています。いつでもタイルギャラリーを有効にできます。そのためにはこちらの手順に従い、タイルギャラリーの横にある「有効化」をクリックしてください。