こんにちは "osaboo"
です。"@osaboo_Bot"
画像ブロックで記事に画像を追加する方法は？…何かルール的なものがあるの？
画像を追加するときの失敗しないコツを知りたい！
＼＼ このような「疑問を解決する」お手伝いをします！／／
画像を記事に追加するのは簡単！でも…あとでバラバラの大きさやファイルの種類がサイトに溢れるのは良くないよ。ある程度自分なりのルールを決めよう。^^／
今回の記事では…
記事作成には無くてはならない！画像ブロックの使い方についてご紹介します。
記事に画像を入れること何がいいの？って話ですが…簡単にイメージするには新聞や雑誌をイメージすると分かりやすいです。
新聞や雑誌に画像が1枚もなかったら とっつきにくく読む気にならなく無いですか？！
目をひく画像がある新聞の一面や雑誌の標題等には まず視覚から読者を集めるという手法をとっています。
ブログも同じくイメージを伝えるために画像を使うことで読者にアピールすると良い！ということになります。
画像を上手に使って、多くの読者を集めましょう。^^／
それではご覧ください！
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
画像について
この章では、画像について少しだけ おさらいしておきます。
画像の記事（ページ）中における役割はの大きく2つです。
- 注目を集めたり、イメージを膨らませるための画像
- コンテンツの説明やガイド用の画像
この2つの画像を記事（ページ）中の的確な場所に配置しながら、記事（ページ）を作ることで読者にとって読みやすく高評価を受けられる記事になります。
今回 ご紹介する画像配置のルールは 多くのサイトで適用されている配置をベースにしています。
注意 絶対ルールではありません。記事の内容によって異なるものもあります。
それでは、基本的な画像の配置ルールをご紹介します。
注目を集めたり、イメージを膨らませるための画像
記事に配置する画像の1番目は アイキャッチ画像です。「h1」見出しタグの前後に配置する画像です。
この画像は 記事全体のイメージ画像になるので、とても重要だといえます。
次に、多くのサイトでは「h2」見出しタグの次に見出しイメージ用の画像を配置しています。
（ほぼ スタンダード化されている感じですね）
この記事のh1見出しタグとアイキャッチ画像
※ 記事（ページ）全体のイメージ画像です。
参考 サンプル画像では ACTION「AFFINGER６」をイメージしてテーマシンボルのライオンの画像にしています。
この記事のh2見出しタグと画像ブロック
※ 見出しイメージを伝えるための画像です。
参考 サンプル画像では h2見出しタグ「画像について」をイメージして 「なんだろう？」という感じの画像にしています。
コンテンツの説明やガイド用の画像
コンテンツの内容を読者によりわかりやすく伝えるために配置します。
表現方法は様々で頑張りどころです。^^"
例えば…こんな感じです。
※ コンテンツの説明やガイド用の画像です。
参考 サンプル画像では コンテンツの説明をわかりやすくするために手順を示した画像を文中に配置しています。
画像に付加する情報『ALT テキスト（代替テキスト）』
画像を記事中に配置する他に少し手間がかかり億劫だと思いますが、『ALT テキスト（代替テキスト）』を付加しましょう。
重要 配置開いた画像には 必ず！『ALT テキスト（代替テキスト）』を付加する！
ALT テキスト（代替テキスト）：補足
ALT テキスト（代替テキスト）とは 何らかの原因で画像が表示されないときに表示される文字のことです。
検索エンジンで重要視されていて SEO対策としてもとても重要です。
※ 検索エンジンで 画像にALT テキスト（代替テキスト）が有ると無いとでは 検索結果に大きく差が出ます。
では…ALT テキスト（代替テキスト）にどのように書くか？…ですよね。
結論から言うと！
重要『ALT テキスト（代替テキスト）』にはキーワードを入れる！
h1・h2の見出しタグには必ずキーワードを入れるのと同じ要領で画像にもキーワードを入れます。
※ 見出しタグについて詳しく知りたいという方は…以下の記事をご覧ください。
SEO に強い！ 見出しタグ（hタグ）の書き方【徹底的に調べてみた！】
画像の適切なサイズ（横幅）
この章では、画像の適切なサイズ（横幅）についてご紹介します。
画像の適切なサイズは サイトのメイン幅を意識して大きさを整えます。
メインの幅を確認するには…（メインの幅=コンテンツの幅）
以下の画面が表示されます。
赤枠部分がサイトの幅です。
サイトの幅からサイドバー部分とそれぞれの余白を引いた値がメインの幅になります。
デフォルトの場合「640px」が メインの幅になります。（PC）
ご自身のサイトの幅を当てはめてメインの幅を確認してみましょう。
注意 表示画面が「960px」以下になった場合画像の最大表示幅は「900px」になります。
960px以下の表示で 横幅900px以下の画像は凸凹表示になるよ。
サイトの横幅を超える画像は「900px〜1200px」であれば何ら支障はないと思います。
まとめると…
画像の適切なサイズ（横幅）は「900px〜1200px」で、拡大が必要な画像については2倍程度を目安とする。
Macをお使いの場合『F12』で簡単にweb情報を調べられます。
※ 詳細は割愛します。
※ サイト幅の詳細を知りたいという方は…以下の記事をご覧ください。
AFFINGER6 サイトの幅を設定【初期設定値1060pxは狭すぎる！ベストな設定値は？】
画像ブロックの使い方
この章では、画像ブロックの使い方をご紹介します。
基本的な記事への画像ブロック挿入方法や読み込んだ画像ブロックをサイズ変更する方法等、記事への画像挿入方法の基本をご紹介します。
以下の作業は投稿画面（記事編集画面）での作業になります。
投稿画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）
それでは、投稿画面での各手順と方法をご紹介していきます。
画像ブロックの挿入
メディア：画像ブロックを投稿画面に挿入します。
❶ ❷ を処理します。
記事編集エリアに『画像ブロック』が表示されます。
画像をブロックに割り付けます。
❶か❷いずれかを選択して画像を挿入します。
❶『アップロード』を選択した場合
『アップロード』をクリックすると以下のように PCのフォルダーが表示されます。
任意の場所からアップロードする画像ファイルを選択します。
※ 上記の処理で新規の画像は画像ブロックに挿入されるのと同時に メディアライブラリに取り込まれます。
❶ ❷ を処理します。
❷『メディアライブラリ』を選択した場合
『メディアライブラリ』をクリックすると以下のようにメディアファイルが表示されます。
メディアライブラリから任意の画像を選択します。
❶ ❷ を処理します。
❸ 初心者向けの画像挿入手順
画像を投稿ページに挿入する作業に慣れてるまでは…
『メディアライブラリ』を選択してから メディアの選択またはアップロードのページで『ファイルをアップロード』か『メディアライブラリ』のタブを選択して画像を挿入するのがおすすめです。
❹ メディアのおすすめファイル形式
通常の画像は 「.jpeg」がデータ容量が軽いのでおすすめです。
半透明やバックグラウンドが透明の画像については「.png」を使った方が無難です。
動画ファイルはかなり重いので 「.mov」→「.gif」に変換するなど軽量化すると良いです。
※ GIFアニメの作り方について詳しく知りたいという方は…以下の記事をご覧ください。
Macで画像変換！「mov」▶︎「gif」【GIFアニメの作り方まとめてみた！】
ALT テキスト（代替テキスト）の入力
投稿ページに画像が挿入されると以下のように表示されます。
ブロックタブ：画像メニューの中に『ALT テキスト（代替テキスト）』の枠内にテキストを入力します。
❶ 画像を選択して ❷ ALT テキスト（代替テキスト）を入力します。
ALT テキスト（代替テキスト）は 必ず入力して、可能な限りキーワードを入れるようにしましょう。
画像サイズ
右側「設定メニュー：ブロックタブ」のメニュー詳細です。
『画像サイズ』では 読み込んだ画像の大きさをワンタッチで変更できます。
枠内のエリアをクリックします。
枠内のエリアをクリックすると以下のドロップダウンメニューが表示されます。
項目を切り替えます。
『サムネイル・中・大・フルサイズ・会話風アイコン』の5種類をワンタッチで切り替え可能です。
当サイトでは、アイキャッチ以外の画像は 1024（px）以下で使用しています。
画像の寸法（サイズを自由に変更）
右側「設定メニュー：ブロックタブ」のメニュー詳細です。
画像の寸法では 読み込んだ画像の大きさを『数値入力』か『％』で自由に変更できます。
『数値入力』か『％』を選択します。
※ 『幅・高さ』どちらかの数値を空欄にすると縦横比が固定されます。
画像の寸法がサイトのメイン幅より少し欠けて見栄えが悪い時に数値入力は重宝します。
スタイルについて
右側「設定メニュー：ブロックタブ」のメニュー詳細です。
スタイルでは 読み込んだ画像は6つのスタイルが適用できます。
お好みのスタイルを適用して 記事の表現を自分仕様にしてくださいね。
スタイルを選択します。
スタイルを適用するとどのような感じになるか？！ご紹介します。
デフォルト
角丸
シャドウ
ワイド
枠線
ポラロイド風
スタイルの変更で以上のような縁取りスタイルができます。
当サイトでは、『シャドウ』を使用する場合が多いです。
おすすめ！無料画像がダウンロードできるサイト
画像ブロックに使用する画像が色々見つかる！無料画像がダウンロードできるサイトさんをご紹介します。
ここでご紹介するサイトさんは当サイトでもお世話になっています。^^／
綺麗な使える画像が盛り沢山です。
※ 興味のある方はぜひご覧ください。
画像を加工するなら！是非ご覧ください。
-
-
PhotoScape X の基本的な使い方をブログ初心者が解説！
アイキャッチ画像や記事説明用の画像のPhotoScape X を使った作成手順をAPPのインストール「URL」・画像作成手順・保存・よく使うメニュー・注意すべき点等を画像をふんだんに使って「画像編集は初めて！」という方にも分かりやすくご紹介。
-
-
Canva の基本的な使い方をブログ初心者が ”1” から解説！
アイキャッチ画像をcanvaを使って簡単に作る初歩的手順をご紹介。Mac・Windowsそれぞれのアプリケーションダウンロード先のリンクも記載して初心者向けにチョー分かりやすくご紹介。取っ掛かりでつまづかないように分かりやすく解説。是非お役立て下さい！
＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／
＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／
- 少しづつ増え続ける当サイトオリジナル特典付！-
まとめ！AFFINGER6 メディア：画像ブロックの使い方！無料画像のダウンロード情報あり
AFFINGER6を使った画像ブロックの使い方をご紹介しました。画像を使用する際の必須事項と基本手順を初心者さん向けに簡素にまとめました。この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
