画像ブロック

ブロック一覧へ戻る

画像ブロックは、「ブロックの追加」ボタン (ブロックインサーター) をクリックすることで、ページに追加することができます。

別方法として、/image や /画像と入力して Enter キーを押すことで追加することもできます。”/” は必ず半角にしてください。　　

ブロック追加の詳しい方法はこちらをご覧ください。

画像の追加

画像ブロックを追加するとメディアオプションパネルが表示され、「アップロード」「メディアライブラリ」「URL から挿入」の3つのオプションが表示されます。

「アップロード」は画像を直接メディアライブラリに追加して使用します。

「メディアライブラリ」をクリックするとメディアライブラリの画面が開き、すでにアップロード済みの画像を選択してページに埋め込むことができます。また、希望の画像が見つからなければ、タブを切り替えてアップロードすることもできます。

「URL から挿入」は、画像への直リンクを使って画像を表示させるときに使います。

ブロックツールバー

各ブロックには、そのブロック特有のコントロールがあり、エディター上でブロックを操作することができます。

画像のリサイズ

エディターに画像が追加された後には、周囲のコンテンツに合わせて画像のサイズや位置を変更することができます。

画像のサイズを変更するには、画像をクリックするとドラッグできるリサイズハンドルが表示されますので、それをクリックして、画像を希望のサイズにドラッグしてください。

代わりに、右側のブロック設定を使って幅と高さの寸法を調整することで、画像サイズを微調整すること、ｐできます。また、ブロック設定には、画像を元のサイズの100、75、50、25%に設定する便利なオプションもあります。

画像配置の変更

画像を段落内に配置したい場合は、まず対象となる段落ブロックのすぐ上に画像を挿入する必要があります。

そこから、画像をクリックして左揃えまたは右揃えを選択すると、画像が段落ブロックに統合されます。

最後に、画像を希望の幅と高さにリサイズします。

「幅広」と「全幅」画像

新しいエディターのサポートがテーマに追加されると、「幅広」と「全幅」の画像のアイコンが表示されるようになります。この2つの画像サイズを使って、テーマの通常のコンテンツ幅を超えて画像を拡大することができます。

キャプション

画像にキャプションを付けたい場合は、エディターで画像の下にあるキャプションスペースにキャプションを入力するだけです。

リンク設定

リンク設定では、画像にハイパーリンクを設定することができます。画像をクリックすると、添付ファイルのページを開くか、元のメディアファイルが開くか、または任意のカスタム URL を開くかを選択できます。

画像編集

新機能では、エディターから移動することなく素早く切り抜きが可能です。ツールバーの「切り抜き」ボタンを押すだけです。

拡張ツールバーが表示されます。これで画像の拡大ができます。

また、画像を正方形に切り抜くなど、アスペクト比を設定するオプションもあります。

また、縦横の方向を変える事もできます。

変更したら、「適用」をクリックします。

外部画像アップロード

Google Docs のようなツールを使って記事を書いたり、共同作業をしたりすることもあります。そのコンテンツをサイトに掲載する際には、エディターにコピー & ペーストすることができます。

ひとつの問題点としては、これらの画像は Google など他の場所でホスティングされている可能性が高く、変更すると簡単に壊れてしまう可能性があります。

そのため、Google Docs などのリソースから画像をコピー & ペーストすると、ツールバーにメディアライブラリにアップロードするためのボタンが表示されます。このボタンをクリックすると、画像は投稿内に残りますが、メディアライブラリにもアップロードされます。

追加設定

3点ドットで表されるこのオプションでは、画像ブロックにいくつかの追加オプションを設定することができます。

追加設定を表示

「追加設定を表示」オプションは、エディターのサイドバーにある「ブロック設定」パネルを表示 (または非表示) します。

コピー

「コピー」を使えば、選択したブロックをコピーして、エディター内の好きな場所に貼り付けることができます。

複製

「複製」で選択したブロックを複製することができます。

前に挿入

選択したブロックの前に新しいブロックを挿入します。

後に挿入

選択したブロックの後に新しいブロックを挿入します。

移動

「移動」を選択すると、コンテンツの中に青い線が表示されますので、その線を矢印で上下に動かして、選択したコンテンツを移動させたい場所に移動させられます。

HTML として編集

「HTML として編集」オプションでは、ブロックの HTML コードを変更することができます。

再利用ブロックに追加

「再利用ブロックに追加」オプションを使って、選択したブロックを再利用ブロックのリストに追加することができ、他の投稿やページでも使用することができます。

グループ化

ブロックのグループを作成して1つのユニットとして扱いたい場合は、「グループ化」オプションを選択します。例えば、共通の背景色や他のブロックをグループに追加することができます。

ブロックを削除

「ブロックを削除」で、選択したブロックをコンテンツから削除することができます。

ブロック設定

すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイドバーにも特定のオプションがあります。サイドバーが表示されていない場合は、「公開」ボタンの隣にある歯車アイコンをクリックしてください。

スタイル

使用中のテーマによっては、画像のスタイルがいくつかあるかもしれません。Twenty Twenty-One では、画像を丸くしたり、枠線やフレームをつけたりすることができます。

画像設定

画像設定では、アクセシビリティや SEO に重要な Alt テキストの説明を追加するためのテキストフィールドが用意されています。

また、画像の幅と高さの寸法を25％刻みで変更したり、正確なピクセルサイズで変更することもできます。

高度な設定

タイトル属性フィールドは、ページ内での画像の役割を記述するためのものです。多くの端末やブラウザーはこのテキストを表示しません。

HTML アンカーを使うと、その特定の画像に対して「ページジャンプ」を行うことができます。ページジャンプは、アンカーリンクとも呼ばれることがありますが、リンクをクリックすると、長いページのさらに上か下のどこかに素早く移動できることです。

これを有効化するには、画像の中に HTML アンカーを入れ、そのアンカーにジャンプするリンクを作ります。

「詳細」タブでは、ブロックに CSS クラスを追加することもでき、カスタム CSS を記述してブロックを自由にスタイリングすることができます。

原文