「画像」ブロック

「画像」ブロックの挿入方法

Webページが文章ばかりの内容の場合、読み手側からすると、かなりのストレスになります。
そのため、Webページには画像が適度に設定されています。
Webページの内容に関連する画像や、イメージしやすい画像などを挿入しています。

また、「百聞は一見に如かず」で文章だけでなく画像を使って説明することで、
読み手の理解度を上げることも可能です。

「画像」ブロックを挿入するには２つの方法があります。
１つ目はブロックを挿入する方法を使い「画像」ブロックを選択する方法です。
２つ目は挿入する画像を挿入したい部分にドラッグ＆ドロップする方法です。

ブロックの挿入方法については、こちらに詳しく説明していますので、参考にしてみてください。

まずは挿入するための画像（写真やイラスト）が必要です。
著作権の関係を考えると自分で撮った画像でもよいのですが、なかなかイイ画像が撮れないのは普通です。
そこで、無料でダウンロードできる画像やイラストのWebページがあるので、下にリンク先を貼っておきます。

挿入するための画像が準備できたら、Webページに画像を挿入します。
まずは、「画像」ブロックを挿入し、挿入する画像を設定する方法について説明します。
「ブロックの挿入方法」で解説しているように、「検索」部分に「画像」と入力すると
「画像」ブロックが絞り込まれます。この「画像」ブロックをクリックして挿入します。

画像：「画像」ブロックを挿入する画面

「画像」ブロックを挿入する部分がこれで決まります。
この「画像」ブロックの上に、準備していた画像をドラッグしドロップします。

画像：画像を「画像」ブロックに挿入する

マウス操作で、挿入したい画像をクリックした状態のまま
「画像」ブロックの上まで持っていきます。
すると、「画像」ブロックが「ファイルをドロップしてアップロード」という表示に
変わりますので、マウスから指を離します。
この基本的な操作で、「画像」ブロックに画像が挿入されます。

画像：画像をドラッグしてドロップする画面

2つ目の方法は、Webページの編集画面上で挿入したい所に、
直接画像をドラッグしドロップします。
これだけで画像が挿入されます。
「画像」ブロックをわざわざ設置しなくてもよい方法なので、
画像の挿入操作に慣れてきたらこの方法も試してください。
すでにWebページに挿入する画像と設置場所が決まっている場合は、最速です。

「画像」ブロックの活用方法として、
画像を準備していないけど、挿入する場所を決めているときは、
「画像」ブロックを挿入し設置場所だけ確保してすることができます。
その後に、Webページの記事内容に応じた画像を探し、設置するという手順もあります。
このように、両方のアプローチで画像を挿入することができるようになると、
挿入手順の対応幅が広がり、作業効率もよくなります。

「画像」ブロックの形状（スタイル）を変更

「画像」ブロックに、画像の枠の形状（スタイル）を変更でき、
この枠の形状（スタイル）の設定について説明します。
画像を挿入すると、右側の設定画面に「スタイル」が表示されます。
この中から、画像の形状を選択します。

画像：「画像」ブロックのスタイルを設定する画面

スタイルの種類は下のように、いくつかサンプルで表示しています。
数種類が用意されていますので、イメージのスタイルを探してみて下さい。

画像：スタイルのサンプル

「画像」ブロックのデュオトーンを設定

デュオトーンって何？？？と思われたでしょうか？
デュオ（２つの）とトーン（色調）という意味で、
ベースカラーとハイライトカラーの２色で画像を加工・編集する表現方法です。
画像のイイところは「百聞は一見に如かず」なので、画像で説明します。
まずは、「画像」ブロックを選択してください。
すると、右側にある設定画面が表示されるので、
「フィルター」という部分の下に「デュオトーン」があり、ここで設定します。

画像：「画像」ブロックのデュオトーンを設定する画面

設定画面の「フィルター」という部分に「デュオトーン」というボタンがあるので、
クリックしてください。すると「デュオトーン」の設定画面が表示されます。

画像：「画像」ブロックの「デュオトーン」で白黒を選択した画面

「デュオトーン」のボタンをクリックすると、設定画面に丸の中に２色の色が設定されています。
この２色で画像に装飾を加えていきます。
例えば、白黒の画像に設定したい場合は、３つ目の黒と白の丸をクリックして選択します。

画像：デュオトーンの設定画面

もともとの色はカラー画像でしたが、このように白黒画像に変更されました。

画像：カラー画像から白黒画像に変更

他のデュオトーンを設定した場合、同じ画像でどのように変更されるのか、
下の画像を参考にしてみてください。

画像：デュオトーンのサンプル

このデュオトーンの設定をしても、元々の画像の色調が変更されてはいません。
そのため、いつでも元々のカラー画像に戻すことができます。
この機能はわざわざ画像を編集・変更してその画像を挿入する必要がないため、便利です。
無料の画像にちょっと変わった感じを表現する場合には活用できます。

最後まで、ご覧いただき、ありがとうございました。