WordPressでギャラリーブロックを使う簡単な3ステップ

アンクル・ラージ・ボングシ

-

について ワードプレス画像ブロック ウェブサイト上で単一の画像を挿入して表示する場合に非常に便利です。しかし、複数の写真を一度に表示したい場合は、[ギャラリー] ブロックが最適です。.

したがって、WordPressでのギャラリーブロックの使い方を学ぶ必要があります。ギャラリーブロックの機能が身に付いたら、ウェブサイトの視覚的な魅力を向上させ、よりプロフェッショナルで魅力的なものにすることができます。.

このチュートリアルでは、WordPressのギャラリーブロック、ツールバーの機能、カスタマイズオプション、正しい使い方について説明します。最初から最後までお付き合いください。

WordPressのギャラリーブロック これはコアブロックです WordPress ブロックエディタ. これにより、画像を集めて表示できます。 グリッド formatです。イベントの写真の表示、画像の魅力的なレイアウトの構成、または最小限の労力で画像を提示するのに最適です。.

ブロックを使用すると、特定の機能が得られます。以下でその機能をチェックしてみよう。

  1. カスタマイズ:あなたのデザインに合わせてカラム、間隔、キャプションを調整します。ギャラリー内の個々の画像に異なる解像度を設定することもできます。
  2. レスポンシブデザイン:画像は、モバイル、タブレット、デスクトップでのシームレスな体験のために、異なる画面サイズに自動的に適応します。
  3. ビルトイン・インテグレーション:追加のプラグインは必要ありません。ブロックはWordPressでネイティブに動作します。
  4. SEOフレンドリーALT テキストとキャプションは、コンテンツのアクセシビリティと検索エンジンのランキングを向上させることができます。また、ギャラリー内の個別の画像にもALT テキストを設定することもできます。.

ギャラリーブロックを挿入すると、ギャラリーをカスタマイズするための様々な機能を備えたツールバーがギャラリーブロックの上部に現れます。それらの機能は以下の通りです。

  1. 変身する： このブロックを画像、列、詳細、グループブロックに変換することができます。
  2. ドラッグだ： 専用ブロックをエディター内の任意の場所にドラッグ＆ドロップすることができます。
  3. 移動ハンドル：  ブロックを上下に動かすことができる。
  4. 整列する： alignオプションで画像の配置をNone、Wide Width、Full Width、Left、Center、Rightに設定できます。
  5. リンク このオプションでは、ブロック内の選択したコンテンツにリンクを追加することができます。
  6. キャプション 各画像のエディタオプションを使用してキャプションを追加できます。
  7. 加える： 追加オプションでは、ギャラリーに新しい画像を追加またはアップロードすることができます。
  8. その他のオプション 複製、コピー、グループ化など、ブロックのセクションに関連するオプションを提供します。

WordPressでのギャラリーブロックの使用は簡単です。以下の手順に従ってください：

投稿またはページを開き、"+"アイコンをクリックしてブロックを追加し、"ギャラリー "を検索します。ギャラリーブロックを選択して、投稿またはページに挿入します。

ステップ2：画像のアップロード

画像をアップロードするか、メディアライブラリから画像を選択することができます。

WordPressのギャラリーブロックの使い方

アップロードオプションで画像を挿入する方法

画像ファイルを挿入するには、アップロードボタンをクリックします、 カーソルで画像を選択する 同時に CTRLボタン押しっぱなし をクリックする。これだけです。エディタに画像が表示されます。

メディアライブラリから画像を挿入する方法

メディアライブラリボタンをクリックし、画像を選択し、新規ギャラリーの作成とギャラリーの挿入ボタンをクリックしてエディターに画像を挿入します。

すべての画像をギャラリーに挿入すると、画像ブロックのすべてのツールバー機能を見ることができます。これらの機能を確認することができます これ.

ギャラリーのカスタマイズについては 設定 (1) > ブロック (2) > 設定 (3). 列、解像度、その他のオプションを選択することができます。

  • コラム カラムは、エディターに表示する画像の数を決定します。より多くのイメージを追加すればするほど、より多くのカラムがギャラリーに追加されます。 (4)
  • 解決： 画像の解像度をサムネイルとフルサイズに設定できます。 (5)
  • 画像のトリミング この機能は、すべての画像の比率を維持し、それらのサイズをフィットさせます。
  • 順番をランダムにする： この機能はシリアルを維持せず、ランダムなシリアルで画像を表示する。

スタイル・オプションには以下のオプションがある。

  1. 色： カラーオプションでは、ギャラリーブロックの背景色を変更することができます。
  2. 寸法： 寸法オプションでは、ブロックの間隔（画像などの2つのブロック間のスペース）、マージン、パディングを変更できます。
  3. ボーダーと半径： この機能を使って、ギャラリーにボーダー、ボーダーカラー、ボーダー半径を追加することができます。

私が作成したギャラリーの完全なデモです。

Gallerybergでインタラクティブなギャラリーを作成する

デフォルトの「ギャラリー」ブロックはシンプルなグリッドに最適ですが、ライトボックス、ホバー効果、多様なレイアウトなどの機能が欠けています。.

コードを書かなくてもより魅力的なギャラリーを作成したい場合は、 ギャラリーバーグ このプラグインは無料の代替品で、ブロックエディタをさらに多くのツールで拡張します。タイルレイアウト、モザイクレイアウト、正方形レイアウトの切り替えが可能で、ズームやナビゲーション用の組み込みライトボックスも追加されています。.

Gallerybergには、微妙なホバー効果やレスポンシブコントロールも含まれており、デスクトップとモバイルの両方であなたのギャラリーがモダンな印象を与えるようになっています。.

それでは、Galleryberg プラグインの使い方を見てみましょう。.

ステップ1：Gallerybergプラグインをインストールする

WordPressの管理画面に移動し、「プラグイン」→「新規追加」から「Galleryberg」を検索します。その後、プラグインをインストールして有効化してください。.

ステップ2:Galleryberg Gallery Blockを挿入する

新しい投稿/ページを作成するか、既存の投稿を編集します。「+」ボタンをクリックし、「Galleryberg」と検索してブロックを追加します。.