画像ブロック

画像ブロックは、使用しているパソコンからwordpressへ画像の挿入(アップロード)を行い、画像の見せ方などを設定する事が出来るブロックです。

画像の挿入と置換の方法は柔軟な操作性で、いくつもの手法があります。文字では伝えにくいので、動画を見る事をお勧めします。

動画で見る

拡大ボタンで全画面で動画を見れます。音声はありません。

1分13秒

基本操作

画像のアップロードから、各種設定の方法を紹介します。設定項目は多いので代表的な操作を中心に説明しています。

アップロード

画像のアップロードウィンドウ

アップロード

メディアライブラリ

URLから挿入

画像のアップロード方法のウィンドウにPCのフォルダから、ドラッグ&ドロップする事も出来ます。この方法が一番お勧め!

画像設定メニュー

画像ブロックを選択した場合に表示される設定メニューです。基本的に画面の右側のメニューに準じた機能があります。

画像

画像ブロックを他のブロックに変換する事が出来ます。スタイルの角丸は使わない方が良く、ブロックの設定側で設定した方が良いです。

移動

画像ブロックを上下にブロック位置を移動します。

配置

画像の配置を指定します。

デュオトーンフィルターを適用

画像にデュオトーンフィルターを適用します。色が切り替わりながら画像の上に色を重ねる感じです。

デュオトーンフィルターのサンプル

影を#686868 ハイライトを#F6CFF4

※実際にデュオトーンフィルターの色を設定する時は、ウィンドウが小さいのでマウスホイール付のマウスが操作は楽です。

リンク

画像にリンクを挿入できます。

切り抜き

画像を切り抜くことが出来ます。

画像上にテキストを追加

画像の上にテキストを追加する事が出来ます。テキストを追加した場合に「カバー」ブロックに自動的に変換されるので注意が必要です。

「画像上にテキストを追加」をクリック

テキスト入力ボックスにテキストを入力

画像ブロックがカバーブロックに変換されます。
※使用する時は注意が必要です。

キャプションを追加

画像の下にキャプション(説明文)を入れることが出来ます。

キャプションのテキストを装飾が可能です。

置換

使用している画像を他の画像に置換できます。アップロードの手法と同様で、動画内でも作業しています。

オプション

画像ブロックに対してさまざまな操作や設定が可能です。

特に「前に追加」と「後ろに追加」は、画像ブロックの前と後ろに新しいブロックを挿入する場合に使用します。オプションは他のブロックでも同様に出ます。

設定メニュー

画面右側のメニューになります。表示されていない場合は、メニューの「設定」をクリックします。

設定メニューは、個別の画像ブロックが対象となり全体の画像でありませんので、注意してください。

設定

  • 代替テキスト
    画像の目的を説明するテキスト文を短く記述します。
    飾り目的は空白で良い。
  • アスペクト比
    画像の縦横の割合を調整します。

  • 画像の幅を直接指定します。通常は自動で良いです。
  • 高さ
    画像の高さを直接指定します。通常は自動で良いです。
  • 解像度
    画像の大きさを指定します。小さくなると画像が荒い感じになります。
  • 高度な設定
    CSSのクラス名などを追加したい場合に使用します。

スタイル


フィルター

デュオトーンの色を指定します


サイズ

マージン

画像の周りの空白を指定します


枠線と影

枠線

画像の周りに枠線を引きます。色と線の太さを指定できます。

角丸

画像の角を丸くします。