ワードプレス・セルフバージョン6.5それ以来、ライトボックス効果を作成するためにサードパーティのプラグインに頼る必要はありません。この機能はWordPressのコアに統合され、特にWordPressのブロックエディタ（Gutenberg）を使用している人にとっては便利です。その結果、画像を追加してライトボックス効果を有効にするのがより簡単で効率的になりました。

このチュートリアルでは、プラグインを使わずにWordPressのライトボックスを作成する方法をご紹介します。

WordPressのライトボックスとは何ですか？

ライトボックスはポップアップ画像表示方式ユーザーがページ内の画像をクリックすると、画像は画面上に大きく表示され、ページの背景は画像が強調されるように暗くなります。この効果は画像表示や商品表示によく使われ、より良いユーザー体験を提供します。

適用範囲

このチュートリアルはWordPressのブロックエディタを使っている方のみを対象としています。クラシックエディタを使用している場合は、WordPressの最新機能を体験するために、まずブロックエディタに切り替えることをお勧めします。

ステップ1: 投稿/ページの作成または編集

WordPressのログインに成功したら、WordPressのダッシュボードに移動します。次に、新しい文または既存の記事を編集します。あなたのニーズに応じて、次のパスのいずれかを選択することができます：

• 新しい記事を作成するには文 > 新しい記事を追加.

• 既存の投稿やページを編集するには文 > すべての記事編集したい記事を見つけて「編集」ボタンをクリックしてください。
• を作成または編集する場合ウェブページ選択してくださいウェブページメニューで、記事の作成や編集と同様の操作ができます。

なぜ投稿やページにライトボックスを追加するのですか？

ライトボックス効果は、特に写真や商品画像、ギャラリーの表示に適しています。ライトボックスでは、ユーザーはサムネイルをクリックすることで、他のページにジャンプすることなく大きな画像を表示することができ、ユーザーのブラウジング体験を向上させることができます。

ステップ 3: ブロックエディターを使って画像を追加

次にページに画像を追加します。ブロックエディタはこのための非常にシンプルなソリューションを提供します。

1. エディタで画像を挿入する場所を選択します。
2. キーイン/イメージイメージ」ブロックはすぐにポップアップ表示されます。

3. セレクト "イメージ"ブロックをクリックすると、画像を選択する画面が表示されます。

既存の画像をメディアライブラリから選択することも、新しい画像をアップロードすることもできます。

正しい写真の選択

画像サイズを選択してください。ライトボックスに最適表示。大きすぎる画像はページの読み込み速度に影響し、小さすぎる画像はライトボックスで拡大すると鮮明さを失う可能性があります。

ステップ4：画像にライトボックス効果を追加します。

このステップはWordPressのライトボックスを作成する中核であり、プラグインなしで行うことができます。

1. クリック追加の記事またはページに写真.
2. 画像の上のツールバーに、リンクアイコンが表示されます。

3. そのリンクアイコンをクリックするとドロップダウンメニューが表示されます。
4. セレクト "クリックすると拡大「オプション

この時点で、あなたの画像はライトボックス効果を通してクリックされると拡大するように設定されます。ライトボックスは自動的にフロントエンドで画像を拡大表示するため、ユーザーは画像をクリックした際に他のページにジャンプすることなく、より大きな画像を見ることができます。

ヒント：「クリックで展開」オプションが見つからない場合

WordPress 6.5以上を使用していることを確認してください。もし下位バージョンをパスする必要があるかもしれません。プラグインをクリックしてライトボックス機能を実装するか、この新機能を利用できるように WordPress のバージョンを更新してください。

ステップ5：ページのプレビューと公開

画像のライトボックス効果を設定した後、ページをプレビューして、すべてが正しく表示されることを確認します。

1. ページ右上の "プレビュー "ボタンをクリックし、"新しいタブのプレビュー".

2. プレビューページで、追加した画像をクリックして、ライトボックス効果が正しく動作しているかどうかを確認します。

問題がなければ、次の選択肢があります。ポストページまたは記事を編集します。さらに編集が必要な場合は下書きの保存後で編集を続けてください。

最適化と注意点

1. 画像の最適化

ライトボックス機能は便利ですが、アップロードする画像がウェブサイトのパフォーマンスに影響しないように最適化されていることを確認してください。画像ファイルのサイズが大きすぎると、ページの読み込みが遅くなり、ユーザーエクスペリエンスやSEOのパフォーマンスに影響を与える可能性があります。これは、次のようなツールを使用して行うことができます。スマッシュを使用して、画像サイズを圧縮して最適化します。

2.レスポンシブデザイン

ライトボックスの機能はモバイルデバイスでも同様に重要で、WordPressのデフォルトのライトボックス設定は、異なる画面サイズでも画像がうまく表示されるようにレスポンシブになっています。ライトボックスの効果がモバイルでも同様にスムーズであることを確認するために、公開前にモバイルデバイスでテストすることをお勧めします。

3.互換性テスト

WordPressの内蔵ライトボックス機能は強力ですが、カスタムテーマやプラグインを使用している場合、一部のカスタム機能と競合する可能性があります。公開する前に、デバイスやブラウザ間の互換性を確認することをお勧めします。

概要

WordPress 6.5以上をご利用の場合WP独学ウェブサイトビルダーライトボックス効果はプラグインなしで簡単に作成することができ、画像のより良いユーザーエクスペリエンスを提供します。これは操作プロセスを簡素化するだけでなく、サードパーティのプラグインへの依存を減らし、ウェブサイトのメンテナンスの複雑さを軽減します。