WordPress 画像ブロックの操作: WordPress に画像を追加する方法 [+秘密のヒント]

WordPress 画像ブロックの操作: WordPress に画像を追加する方法 [+秘密のヒント]

多くのユーザーにとって、画像の操作は非常にイライラするものです。レイアウト全体で見栄えを良くするために、適切なアスペクト比を選択したり、画像のサイズを正しく変更したりするのは、必ずしも簡単ではありません。

  1. WordPress 画像ブロックを使用する理由
  2. WordPress 画像ブロックで画像を追加する方法
  3. 追加の画像フォーマット処理
  4. 記事内の私たちからの追加のヒント

古い WordPress バージョン (v5.0 まで) では、[+メディアの追加] ボタンを使用して画像を追加します。問題は、画像サイズを最小限に変更した場合でも、再度アップロードする必要があることです。それは時間の無駄と余分なクリックを意味します。

新しいブロックベースのエディター Gutenberg は、WordPress に画像を追加する方法を変更し、エンドユーザーにとってこのプロセスを簡素化します。この記事では、WordPress の画像ブロックの追加と編集に関する実践的なガイドを紹介します。さらに、画像を貼り付けるもう 1 つのオプション、数回クリックするだけで画像をコピーしてコンテンツ領域に貼り付ける方法についても説明します。 WP 5.3から新たに追加された機能についても紹介します。

まずは、投稿やページで画像を使用する必要がある理由について話しましょう。

WordPress の画像ブロックがウェブサイトに必須である理由

注目を集める

画像はウェブサイト訪問者の注目を集めます。訪問者をウェブサイトに長く留まるためには、興味深いものでなければなりません。画像のないブログ投稿を考えてみましょう。ただの文章の塊です。たとえ価値があり、情報が満載であっても、一見するとあまり面白くありません。さらに、写真はトピックをよりよく想像し、説明するのに役立ちます。

そのため、WordPress の画像ブロックを使用して、重要なことに注目する必要があります。

画像ありまたは画像なしの 2 つのブログの例
画像ありまたは画像なしの 2 つのブログの例

説明的なテキストとコンテキスト

画像は、訪問者が記事の内容をよりよく理解できるようにするため、コンテンツを理解するためにも重要な部分です。インフォグラフィックのおかげで、複雑な接続を説明し、物事を簡単に伝えることができます。これは、訪問者があなたが話している問題に適切に対処できるようにするのに役立ちます。

インフォグラフィックの例
テキストによる説明を改善するためのインフォグラフィック

ウェブサイトをより良くする

さらに、画像はウェブサイト全体のデザインを美しく仕上げます。ウェブサイトのレイアウトだけでなく、使いやすさも重要です。画像を正しく選択して配置すると、訪問者が Web サイトを閲覧しやすくなります。

WordPress ブロックエディターで画像を追加する方法

投稿またはページに画像を挿入するには、コア ブロック、つまり画像ブロックを追加する必要があります。それにはいくつかの方法があります。

– トップバーまたはエディター内の任意の場所で「+」を使用する

「+」をクリックして画像ブロックを追加します
「+」をクリックしてWordPress画像ブロックを追加します

– スラッシュ「/」を使用し、その後に単語「image」を書きます

スラッシュを使用して画像ブロックを追加します
スラッシュ「/」を使用して画像ブロックを追加する

新しいブロックが作成され、そこに実際の画像を追加できます。

WordPress への画像のアップロード

希望の場所に画像を配置するにはどうすればよいですか?

  • アップロードを使用して、ハードドライブから画像を選択します
  • メディア ライブラリを使用すると、Web サイトにすでにアップロードされている画像を選択できます
  • マウスを使用して画像をドラッグ&ドロップします
  • 画像の URL アドレスを挿入
画像をアップロードするオプション
画像のアップロードに利用可能なオプション - そのうちの 1 つは、フォルダーから画像をドラッグ アンド ドロップすることです

WordPress 画像を追加するあまり知られていない方法

前述したように、アップロード ウィンドウから画像をアップロードする以外に、画像を挿入する別の方法があります (これは非常に簡単な方法です!)。改良された WordPress エディターを使用すると、次のことが可能になります。

  • 任意のコンテンツから画像をコピーするか、
  • マウスカーソルで画像を「ドラッグ」するだけです

次に、選択した画像をコンテンツ領域内の希望の位置に挿入または移動 (ドロップ) します。

公開された投稿からコンテンツ領域に画像をドラッグ アンド ドロップします。
選択した画像をドラッグし、必要な場所にドロップします (WordPress エディターに直接)

画面からキャプチャした画像を貼り付ける場合にも、同じテクニックを使用できます。必要な手順は 3 つだけです。初め、 スクリーンショットを撮る必要があります プリントスクリーン機能を使用します。たとえば、Windows 10 には、Snip & Sketch と呼ばれるデフォルトのスニペット ツールが用意されています。これは、キーボードの Win+Shift+S キーを同時に押すだけで、ショートカットからも利用できます。次に、キャプチャする画像領域を選択します。最後のステップは、基本的なショートカット Ctrl+V を使用して、コピーした画像 (またはその一部) をコンテンツ領域に貼り付けることです。

エディタに貼り付けた WordPress 画像はどうなるでしょうか?この画像はメディア ライブラリに自動的に追加され、そこで編集できます。

画像メタデータのオプションが制限されている

画像編集内で、タイトル、キャプション、説明、代替テキストを設定できます。残念ながら、画像のファイル名は変更できません。次のような自動生成された名前が維持されます。 画像-1.png 等々。このタイプのファイル名は、ファイル名の推奨事項と矛盾するため、SEO の最適化の点で少し不利になる可能性があります。したがって、WordPress 画像をコンテンツ領域に移動する前に、この点を考慮する必要があります。

画像の位置合わせ

画像の配置は主な機能の 1 つです。 WordPress 画像ブロックを投稿またはページに追加する場合でも、Web サイトのデザインに応じて配置を常に考慮する必要があります。その画像に基づいて、その上のツールバーで配置を選択できます。デフォルトでは、画像を左、右、または中央に配置できます。一部の WordPress テーマでは、画像を幅または全幅の中央に配置できます。すべてのテーマがサポートしているわけではないため、実際にはテーマの機能に依存します。

画像の配置設定
画像の配置オプション

画像のサイズ変更

WordPress エディターの画像ブロックの革新的な機能は、実用的なサイズ変更です。画像の側面をドラッグするだけで、画像を小さくしたり大きくしたりできます。こうすることで、コンテンツ内のテキストに応じて画像サイズを調整できます。エディターは画像の比率を自動的に維持するため、変形について心配する必要はありません。

画像のサイズ変更
ハンドルを掴んで画像のサイズ変更をスムーズに行う

画像を円形に変形する新しいブロックスタイル

利用可能な最新バージョンの WordPress を使用している場合は、画像に使用できる新しいサークル クロップ スタイルに気づいたかもしれません。画像の形状は、上部のツールバーから最初の「ブロックの種類またはスタイルを変更」アイコンをクリックして変更できます。デフォルト(長方形)の形状は円形にカットされます。

画像の円形
画像用の新しいサークル スタイル デザイン

WordPress 画像ブロックの新機能 (WP 5.3 で追加)

高解像度画像のサポート

WP 5.3 の最大のハイライトの 1 つは、WordPress プラットフォームでの画像処理の改善です。画像の操作には、次の 2 つの主な機能があります。

  1. アップロードを再開 – 高解像度の写真をアップロードしているときにインターネット接続が失敗した場合、アップロード プロセスは中断された時点から自動的に続行されます。
  2. 画像の自動回転 - 最新リリースの WP バージョンでは、誤って回転した画像がアップロードされるときに自動的に正しい位置に回転します。

インスペクターでの設定

正確な寸法を設定するには、エディターの右側のサイドバーにあるインスペクターを使用できます。画像サイズ設定では、サムネイル、中、大、フル サイズなどのすぐに使用できる形式を提供します。もちろん、幅と高さをピクセルまたはパーセンテージで設定できます。

利用可能な画像サイズ設定
画像サイズの設定

画像のサイズ変更はすべて WordPress 画像ブロック内で直接実行でき、ブロックエディターではすべてを 1 か所で行うことができるため、非常に高速かつ実用的です。

その他の画像ブロック設定

URLアドレスの追加方法

画像は静止画像として使用することも、クリックして次のリンクにリンクすることもできます。

  •   メディアファイル
  •   添付ファイルページ
  •   カスタムURL
画像リンク設定
利用可能な画像リンク設定

WordPress 画像ブロックで画像を編集する方法

鉛筆アイコンをクリックすると、すべての画像を編集できます。メディア ライブラリのあるモーダル ウィンドウが開き、代替テキスト、タイトル、キャプション、説明を書き込むことができます。古い WordPress バージョンでクラシックエディターを使用してすでに使用していた方法と同じです。

SEO を目的とした画像の詳細
ウェブサイトの SEO を向上させるために入力する必要がある画像の詳細

これらのテキストに記入することが重要なのはなぜですか?

訪問者が画像をクリックして拡大すると、画像のファイル名ではなく、画像のタイトル (例: Citadela ホームページ) が表示されます。また、画像の読み込みに問題がある場合は、Web サイトに代替テキストが表示されます。

追加のヒント

WordPress 画像ブロックのこれらすべての理由と設定に加えて、最も重要なことがあります。画像を使用すると、Web サイトへの訪問者をさらに増やすことができます。では、どうやってそれらを入手するのでしょうか?

現代人は本を読むのが怠けています。彼らは写真を下にスクロールして答えを見つけることを好みます。あなたの写真や画像がランク付けされるのはなぜですか?テキストが答えです。 SEO の最適化にとって非常に重要なのは、完璧な画像のタイトルと説明です。代替テキストを忘れずに記入してください。そうすれば、Google は画像をよりよく理解できるようになります。そのため、画像検索結果でランク付けされる可能性が高くなります。

画像キャプションを追加する 2 つの方法

画像キャプションの追加はブロックエディターを使用すると非常に簡単です。画像のすぐ下に文字を書き込むスペースがあります。これが最初の方法です。キャプションは、指定されたサブページ上のこの正確な画像に書き込まれます。

画像キャプション
画像のすぐ下にキャプションが書かれています

2 番目の方法は、メディア ライブラリ内の鉛筆アイコン (画像の編集) を使用して画像のキャプションを書き込むことです。このようにして、Web サイト全体に画像キャプションをグローバルに追加します。つまり、3 つの異なる場所で同じ画像を使用すると、常にこのキャプションが使用されます。

メディア ライブラリに画像キャプションを追加する
メディア ライブラリ経由で画像キャプションを追加

WordPress の画像ブロックに画像を追加するのがいかに簡単か気に入りましたか?自分で試してみてください!

新しい Citadela WordPress テーマとそのカスタムメイドのレイアウト パックの詳細をご覧ください。これらはさまざまな種類のビジネス向けに特別に設計および開発されており、WordPress ブロック エディターを使用してコンテンツを編集する新しい方法もサポートしています。

7が「Working with WordPress Image block: How to add images in WordPress [+Secret tip]」について考えた

  1. 実際、gutenberg エディターの前後で実際の変化はありません。これらすべてのオプションはすでに用意されていました。そして実のところ、guutemberg エディターは完全に壊滅的です。これが、elementor、divi、visual combos が非常に人気がある理由です。 WordPress エディターを使用している人が誰もいないため、次のリリースがこれらのビルダーと 100% 互換になることを心から願っています 😀

    1. こんにちは、

      コメントありがとうございます。はい、テンプレートは WordPress コーデックスと標準に従って作成されたすべての WordPress プラグインと互換性があります。

      乾杯!
      ズラトコ

    1. こんにちは、

      質問してくれてありがとう。各製品を定期的に最新の状態に保つことが当社の中核事業です。
      City Guide から Wordpress Gutenberg エディターと完全に互換性のある Citadela テーマにアップグレードするオプションに興味がある場合、答えは次のとおりです。はい、City からの移行を管理できるようにするプラグインをリリースする予定です。テーマを Citadela ディレクトリ プラグインで拡張された Citadela テーマにガイドします (最初のプラグインは近々リリースされる予定です)。

      心から!
      AITチーム

  2. Gutenberg エディターに画像を直接貼り付けることができることに気付きました。これにより、image-1、image-2 などという名前の画像がメディア ライブラリに追加されます。

    このページでは読んでいない機能なので、追加すると良いかもしれません。

    これは、Windows スニペット ツール (Win+shift+S) を使用して画像がスクリーンキャプチャされた場合に特に便利です。記事内のカーソルが置かれている場所に直接貼り付けることができます。

    この方法の最大の欠点は、貼り付け中または貼り付け後にファイル名を編集する方法が見つからないことです。したがって、SEO にはあまり優しくありません。

  3. やあ
    「複数著者ブログ」テーマに画像を追加できません。各ブログ投稿の上部にある回転スライダーに 2 番目または 3 番目の画像を追加することは不可能のようです。これは、2 番目の画像を予期していたかのように、数秒後にスライダーが空になることを意味します。
    修正していただけませんか?
    あるいは、質問です。Archnetwork (スロバキアにパートナーがいます) にとって「Multi Author Blog」は、Nature プロジェクトの参加者向けの「レポート」プラットフォームとして使用しているため、重要です。ライブラリに同じように使用できる代替テーマはありますか?
    ブレア・アーカート (生涯サブスクリプション – IT 部門アーチネットワーク)

    1. こんにちは、

      ご連絡いただきありがとうございます。まず、可能であれば、テーマ/プラグインのバージョンを最新のもので確認してください。AIT Updater プラグインを無料で使用することをお勧めします -> https://www.ait-themes.club/wordpress-plugins/ ait-updater/ 、(またはプラグインの設定方法に関するドキュメント: https://www.ait-themes.club/doc/updater-plugin-documentation/
      製品のアクティベーションに関する手順については、https://www.ait-themes.club/doc/theme-activation/ を参照してください。

      問題が解決しない場合は、いくつかの画像を提供していただくか、AIT SysInfo レポートを使用してサポート フォーラム経由でお問い合わせください: https://www.ait-themes.club/wordpress-plugins/ait-sysinfo/。当社の技術者は、テーマに関するあらゆる問題を解決する準備ができています。お客様の問題を再現できなかったため、カスタマー サポートは営業日の中央ヨーロッパ時間の午前 8 時から午後 5 時まで提供されます。回転スライダーは正しく動作します。

      第二に、
      Citadela 製品パックにはいくつかの興味深い機能が追加されています。比較表をご覧ください: https://www.ait-themes.club/next-generation-directorypro/

      他に何かお手伝いできることがございましたら、お手数ですが再度ご連絡ください。

      敬具!
      ズラトコ
      AITチーム

コメントは受け付けていません。