初心者でも安心!「画像ブロック」の使い方

ホームページに記事を投稿する際に重要となるが画像の挿入です。

例えば、新商品をホームページでPRしたいと思った時、文字だけでは魅力を伝えるのは難しい。

画像であれば簡単に視覚に訴える事ができます。

また、本や雑誌などと違ってWeb上の文章は流し読みされやすい傾向にあります。

画像を上手に配置する事によって、斜め読みでも理解できる分かりやすさを表現できます。

ブルー

「画像・見出し・段落(文章)」この3つを使いこなせるようになれば、伝わるホームページが簡単に可能となります!

というわけで、今回はスマホでもOKな画像ブロックの使い方について分かりやすく解説していきます。

画像ブロックを使ってみよう

ブルー

使い方は説明が不要なくらい簡単なのですが、注意点もあるので丁寧にいきますね!

簡単に説明すると・・

画像ブロックを選択して、挿入する画像を選ぶだけです。

まずは、管理画面にアクセスして「投稿>新規追加」

⊕ボタンでブロック選択画面を出して、画像ブロックをタップしましょう。

すると、画像を選択する方法が3種類表示されています。

画像を選択しよう
アップロードスマホやPCに保存されている画像をWordpress上にアップロード(保存)する方法。
メディアライブラリ事前にアップロードされていた画像を選択する方法。
URLから挿入画像が保存されているURLを使って表示させる方法。

主に使うのは「アップロード」と「メディアライブラリ」なので、「URLから挿入」は無視して結構です。

画像選択

スマホからのアップロードの画像選択画面では、端末に保存されている画像(閲覧)だけではなく、その場で撮影するカメラも選択できます。

アップロードした画像は、Wordpress内のメディアライブラリに保存されます。

あとは、挿入したい画像を選んで選択ボタンを押せば完了!

画像挿入完了

これでスマホ内に保存されていた画像を入れる事ができました。(パソコンからの操作も同様です)

画像ブロックを使えば、スマホの中の画像でも簡単に入れられるのね♪

画像ブロックの設定について

続いて、画像の設定について説明していきます!

画像の設定

画像の下には簡単な説明文(この例ではDSC_0597の部分)を入れる事が出来ますが、 必要な場合だけでOK です。

更に下を見ると4つアイコンが並んでいるのが見えますね。

左から、スタイルの変更・配置変更・画像変更・リンク挿入・詳細設定。

スタイル変更
スタイル変更画面

スタイルの変更は、画像に簡単な変化を付ける事ができます。

配置変更は、左寄せ・中央・右寄せなど表示させる場所の設定で、中央寄せを使う場合が多いですね。

画像の配置選択

リンクはアドレスを入れると、画像タップでそのページへ飛ばす事ができます。

詳細は、主にブロックの移動や削除で使うので覚えておきましょう。

オプション設定

画像ブロックが指定されている状態で画面上の歯車マークを選択すると、別の設定画面となります。(PCの場合は押さなくても右に出ています)

ここで覚えて欲しいのが、altテキスト(代替テキスト)の設定です。

これは、何らかの理由で画像が表示されなかった場合の文字情報なのですが、ロボットが何の画像なのかを認識する要素でもあります。

ピンク

Googleロボットは、画像の識別までは出来ないってわけね~

ちなみに、上のように画像を動かすエフェクトもオプション設定で簡単にできます。(アニメーション要素は、特別な設定が必要なので無料オプションとして実装可能です。)

画像挿入の注意点

画像ブロックは慣れれば非常に簡単なのですが、注意すべき点があります。

例えば、スマホの写真をそのまま挿入した先ほどの菜の花の画像の詳細を見ると・・

そのまま挿入

ファイルサイズ:762KB 、大きさ:横2560×縦1440ピクセル、となっています。

ピクセルとは画像のサイズを表す数値で、スマホで見た場合は横750ピクセルもあれば十分。

ファイルサイズ762キロバイトというと、この一枚だけで1メガ弱もの容量を使っています。

サイズが大きすぎると何が問題かと言うと・・

  • 画像の表示が遅くなる
  • 読者に余計なパケットを消費させる
  • Google様からの評価も下がる

つまり、無加工のカメラ写真は大きすぎる

対策としては、画像加工のアプリ(リサイズや圧縮)などを使うのも良いのですが・・私の経験でいうと面倒な事は長続きしません。

当サービスの特徴は・・

スマホでも簡単に更新できる事!

なので、これもまたオプションとして自動的にサイズ縮小&圧縮の設定も可能です。

自動設定後の画像

自動設定がされていれば、普通にアップロードした画像が全自動で小さくなっていますね。

指定サイズは自由に変更可能なので、もっと小さくする事も可能です。

上の例では、大きい写真をアップロードしたとしても、自動的に横750ピクセルに自動リサイズする設定にしています。

当サービスでは、初心者でも簡単にホームページの更新が出来るように心がけています。

また、その方法についても詳しく解説していきますので、参考にして頂けると幸いです。

Follow me!

この記事を書いた人

アバター
naoto
5年前からフリーランスのWebデザイナーとして活動をしており、WordPressを使ったホームページ制作・ブログ制作が得意です。

ホームページ制作依頼はこちらから

ココナラ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)