WordPress画像ブロックの使用方法
公開: 2021-08-08画像の使用は、WordPressのページと投稿を強化するための最も簡単で効果的な方法の1つです。 ただし、WordPressブロックエディターを初めて使用する場合は、 Imageブロックを適切に使用する方法について少し混乱する可能性があります。
幸い、 Imageブロックの挿入と使用は非常に簡単です。 さまざまな設定を学習することで、Webサイト全体に画像をよりシームレスに追加し、好みに合わせてカスタマイズすることができます。 この投稿では、 Imageブロックとその機能について説明し、各オプションについて説明し、使用するためのヒントをいくつか紹介します。
さっそく飛び込もう！
投稿またはページに画像ブロックを追加する方法
Imageブロックにより、WordPressの投稿やページへのメディアの追加が可能な限りシンプルかつ簡単になりました。 これを行うには、最初にWordPressダッシュボードから任意の投稿またはページに移動します。
次に、エディター内で、画像を挿入する場所で[ブロックの追加]ボタン（プラスアイコンでマークされている）をクリックします。 次に、 Imageブロックを選択します。
すぐに表示されない場合は、検索バーに「画像」と入力することもできます。
ブロックを追加したら、次のステップは使用する画像を選択することです。 そこから、3つのオプションがあります。 [アップロード] 、[メディアライブラリ] 、または[ URLから挿入]を選択できます。
[アップロード]を選択すると、コンピューターに保存されている画像を選択できます。 WordPressサイトにすでにアップロードしている画像の場合は、メディアライブラリに移動できます。 コピーしたリンクから画像を挿入するには、[ URLから挿入]をクリックします。
この例では、画像をアップロードします。
ご覧のとおり、画像を挿入すると、さまざまなオプションを含むツールバーが表示されます。 画面の右側には、いくつかの設定から選択することもできます。 これらのオプションについて詳しく見ていきましょう。
画像ブロックの設定とオプション
画像を挿入したら、[キャプションの追加]フィールドに入力して、その下にキャプションを追加できます。 次に、ブロックツールバーに、画像の調整に使用できるさまざまな設定とコントロールがあります。 それらを左から右に見ていきます。
画像ブロックツールバーの設定
ツールバーの最初のオプションを使用すると、別のタイプのブロックに切り替えることができます。 次に、[デュオトーンフィルターの適用]アイコンをクリックすると、デュオトーンのコレクションから選択して、画像に適用できます。
このオプションを使用すると、画像のシャドウとハイライトを変更して、画像の表示方法を変更することもできます。 元の画像に戻したい場合は、[クリア]をクリックしてください。
次に、[配置を変更]を選択して、ページ上の画像の配置を調整できます。
デフォルトでは、WordPressは画像を左揃えに設定します。 ただし、これを変更するには、[中央揃え] 、[右揃え]などを選択します。画像をワイドまたはフル幅にすることもできます。 後者は、現在のテーマの標準コンテンツ領域を超えて画像を拡大するために使用できます。
画像をハイパーリンクするには、リンクアイコンをクリックして、[メディアファイル]または[添付ファイルページ]を選択します。
画像をトリミングしたい場合は、切り抜きアイコンをクリックできます。 これを行うと、ツールバーが拡張され、さらに3つのオプションが提供されます。
これらの各アイコンの意味についての簡単なチートシートを次に示します。
- 虫眼鏡を使用すると、画像を0〜300パーセント拡大できます。
- アスペクト比を使用すると、縦向きと横向きの両方のオプションを含め、画像の比率を選択できます。
- 矢印アイコンを使用すると、画像を回転させることができます。
調整後、[適用]ボタンをクリックして変更を保存できます。
最後に、最後のアイコンを使用すると、画像にテキストを追加できます。
通常のテキストエディタと同様に、画像の上にミニツールバーが表示されます。 これらのコントロールを使用して、テキストを太字、斜体、またはリンクし、その配置を調整できます。
追加の画像ブロックオプション
画像ブロックツールバーの端にある3つの縦のドットをクリックすると、さまざまな追加オプションが表示されます。 これには、次の設定が含まれます。
- 画像をコピーする
- 画像をHTMLとして編集する
- 再利用可能なブロックに画像を追加する
- Imageブロックの前または後に新しいブロックを挿入する
それでは、サイドバーにあるブロック設定に移りましょう。 ここでは、4つのスタイルから選択できます。
- ディフォルト
- 丸みを帯びた
- ボーダーズ
- フレーム
各スタイルがどのように表示されるかの例を次に示します。
次に、[画像の設定]で、代替テキストを入力するためのフィールドを見つけて、（1）画像のサイズを変更します（2）：
代替テキストの入力は、検索エンジン最適化（SEO）とアクセシビリティの両方の目的で重要であることに注意してください。
そのオプションの下で、画像のサイズを調整できます。 ドロップダウンメニューからプリセットサイズを選択するか、[幅]フィールドと[高さ]フィールドにカスタム値を入力できます。
画像ブロックを効果的に使用するためのヒントとベストプラクティス
WordPressのページや投稿に画像を挿入する方法を学んだら、それらを効果的に使用する方法を学ぶことに興味があるかもしれません。 もしそうなら、あなたが覚えておきたいいくつかのヒントとコツがあります。
まず、画像を最適化することを常にお勧めします。 これを行うには、画像をアップロードする前に画像を圧縮して、ページの読み込み時間とサイト全体のパフォーマンスを向上させます。 その後、ファイル名と代替テキストを最適化すると、SEOの向上に役立ちます。
WordPress Imageブロックを最大限に活用するためのもう1つのヒントは、さまざまなサイズ変更とトリミングの設定を理解するために時間を費やすことです。 （メディアライブラリに移動するのではなく）エディター内で直接画像をトリミングできるため、時間を大幅に節約できます。 これらのコントロールの使い方を学ぶことで、ページと画像がページにどのように表示されるかをすばやくシームレスに強化できます。
最後に、代替テキストを使用することに加えて、画像の下にキャプションを追加することもお勧めします。 そうすることで、ユーザーが写真やスクリーンショットの内容をよりよく理解できるようになります。 これは、サードパーティから使用した元の画像ソースにクレジットを適切に帰属させるための優れた場所でもあります。
イメージブロックに関するよくある質問
この時点で、WordPressサイトでこのブロックを使用する方法をしっかりと理解しているはずです。 ただし、最もよくある質問のいくつかをすばやく確認して、すべての重要なポイントが網羅されていることを確認しましょう。
WordPressの画像ブロックはどこにありますか？
WordPressの投稿またはページに移動した後、 Imageブロックを見つける方法はいくつかあります。 最初のオプションは、テキストフィールドに「/ image」と入力することです。 2番目のオプションは、[ボタンの追加]ブロックまたはプラスアイコン（+）をクリックして、検索フィールドに「画像」と入力することです。
イメージブロックは何をしますか？
一言で言えば、 Imageブロックを使用すると、WordPressページまたは投稿に写真を挿入して、カスタマイズすることができます。 このブロックを使用すると、サイズを変更して外観を調整し、エディター内に直接表示できます。 Imageブロックを使用して、コンピューターを介して画像をアップロードしたり、WordPressメディアライブラリから画像を挿入したり、URLから画像を追加したりすることもできます。
WordPressのどこにでも画像を追加できますか？
WordPressサイトに画像を追加できる場所はたくさんあります。 オプションは、使用しているテーマによって異なります。 ただし、 Imageブロックを使用すると、ページ、投稿、WordPressウィジェット領域に画像を挿入できます。
結論
サイト全体に画像を追加することは、コンテンツにスパイスを加える最も簡単で強力な方法の1つです。 写真やスクリーンショットは、コンテンツをより美しくするだけでなく、全体的なユーザーエクスペリエンス（UX）を向上させるのにも役立ちます。
WordPress Imageブロックのおかげで、ページや投稿にメディアをこれまでになく簡単に追加できます。 エディターから関連するブロックを選択し、さまざまなスタイルオプションを構成してパーソナライズすることで、コンテンツに画像をすばやく挿入できます。
WordPress Imageブロックの使用について質問がありますか？ 以下のコメントセクションでお知らせください！
TarikVision / shutterstockによる注目の画像