AFFINGER6「画像」の貼り方＆カスタマイズ、代替テキスト（alt属性）の設定方法【ワードプレスブログ完全初心者ガイド】

専業ブロガー７年目のあかね猫です

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

について、ブログ初心者さん向けに１からわかりやすく解説していきます

つまり、ブログに貼る写真とかのこと！

まず画像ファイルの貼り方そのものは、「WordPressテーマを問わず共通」でいたって簡単ですが…

というのがいくつかあるので、実際に画像を貼り始めてしまう前に一通りチェックしておくことをおすすめします🐥

またこの記事の最後では【おまけ】として…

についても、あわせてご紹介しています🐣（重要です！）

ということで、さっそく見ていこー！

AFFINGER6「画像」の貼り方＆カスタマイズ、代替テキスト（alt属性）の設定方法【ワードプレスブログ完全初心者ガイド】

ステップ１：WordPressにおける画像ファイルの貼り方と、基本的なポイント【代替テキスト(alt属性)を設定する】

まず投稿編集の画面で、画像を貼りたい任意の箇所に…

↑ このようにカーソル（ | ）を設置した状態で、画面左上の「メディアを追加」ボタンをクリックします

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK！

「メディアを追加」をクリックしたら、画面上部のタブを…

↑「ファイルをアップロード」というタブに切り替えたうえで、中央に表示されている…

↑「ファイルを選択」ボタンをクリックし、あらかじめ用意した任意の画像ファイルを選択しましょう

つまり、「自分のPC」に保存してある画像を「WordPress」にアップロードするよ！

画像ファイルを選択すると、画面上部のタブが…

↑「メディアライブラリ」タブに切り替わり、そのなかの画像一覧に今回選択した画像ファイルが追加されて、「チェックマーク」が入った状態になります

この「チェックマーク」が入った状態で、画面の「右端」の列に表示されている…

↑ こちらの設定項目を見ていきます

いろんな項目が並んでて難しそうだけど、このタイミングで最低限入力すべきなのは「１件だけ」なのでご安心を！

この「画像をアップロードしたタイミング」で、忘れずに入力しておきたい項目は…

↑ こちらの「代替テキスト」という項目だけです

「代替テキスト」とは…

というものになります

別名「alt属性」とも言うよ！

この「代替テキスト」は、単純に「ページを訪れたユーザーのため」でもありますが、もう１つ…

という役割もあるので、【SEO対策】の一環としても「画像ごとでちゃんと入力しておく」のが定石です

ちなみに「代替テキスト」の入力例としては、あまり難しく考えずに…

といった感じで、「各画像の内容をシンプルに表した名称」を入れればOK🐣

「代替テキスト」はあとからでも設定・変更できるけど、忘れないように「画像を貼るタイミングで必ず設定しておく」って習慣にした方がおすすめ！

ということで！

「代替テキスト」を入力できたら、そのほかの項目は一旦置いておいて、画面右下の…

というボタンをクリックすれば…

↑ 画像が記事内に貼り付けられます

で、さきほどの「代替テキスト」を含めた各種「画像の設定項目」については…

↑ 記事内に貼った画像をクリックすると表示される「メニューバー」のなかから…

ボタンをクリックして開かれる設定画面にて、あとからいつでも設定や変更が可能です

ちなみに、上記の方法で「あとから設定する項目」の代表例としては…

↑ こちらの「キャプション」という項目が挙げられます

この「キャプション」とは…

↑ このように、画像のすぐ下に小さく表示される「簡単な説明文」のこと

キャプションは、例えば「風景写真」とかに付けてあげるとオシャレな雰囲気になるよ！

今度は、【ブログに貼った画像のカスタマイズ方法】について見ていきましょう🐥

ステップ２：ACTION AFFINGER6で可能な、ブログに貼った画像のカスタマイズ方法【枠線・ポラロイド風・ワイド】

さきほどの【ステップ１】でご紹介した基本手順で、任意の画像を記事内にまず貼り付けたら…

↑ その画像を一度クリックしたうえで、画面上部の「スタイル」タブを開き…

↑ そのなかから「写真」というタブを開きましょう

すると、上画像のように…

という「３種類のカスタマイズ項目」が表示されるので、このなかから任意の項目を選択します

ここでは例として、「枠線」っていうのを選んでみるよ！

「枠線」を選択すると…

↑ このように、画像の外側が「枠線」で囲われたスタイルに変更されます

特に、上画像のように…

などは、この「枠線」が付くことで「記事コンテンツの背景色と同化しなくなる」のでおすすめです

解説用の画像とかでめちゃめちゃ使える

つづいて「ポラロイド風」というカスタマイズ項目ですが、こちらを選ぶと文字通り…

↑「ポラロイド」のような演出に変更されます

またこの「ポラロイド風」の応用として、【ステップ１】のなかでご紹介した…

↑「キャプション＝簡単な説明文」も付けてみると、よりお洒落な雰囲気に🐣

ちなみに、３つ目の「ワイド」というカスタマイズ項目については…

といったものになりますが、少なくとも自分は使っていません🐥

最後に、ブログをやるうえで必ず押さえておきたい【画像のおすすめなサイズ】と【リサイズの方法】について見ていくよ！

おまけ：WordPressブログに貼る画像のおすすめなサイズ（px）と、「リサイズ＝縮小」の方法について【重要です】

最後におまけです🐣

まず「スマホで撮った写真」にしても「フリー画像サイトから取得した画像」にしても、それらブログに使っていく各種画像というのは…

そのままブログに貼ってしまうと、単純に「サイズ」が大きすぎる

というケースが圧倒的に多いんですね

ここで言う「サイズ」というのは、容量（●●メガバイトとか）のことではなく、画像の…

のことですが、「縦横サイズ」が大きいということは当然「容量」も大きくなり、結果「読み込みの遅さ」に繋がってしまいます

読み込みが遅いページは、必然的に「ページ離脱」の可能性も上がっちゃうよね

なので結論！

WordPressブログに載せる各種画像というのは、あらかじめ適正なサイズ（px）内に…

しておくのが定石となります

で！

この「リサイズ＝縮小」を行うには画像編集ソフトを使うのが一般的ですが、例えばWindowsユーザーさんであれば…

という、Windowsに標準搭載されている無料の画像編集ソフトを使えば一瞬です

ちょーぜつ簡単で、ブログをやっていくなら確実に覚えておきたい「超基礎」スキルの１つ！

もしくは、「画像編集ソフトとか面倒だからちょっと…」という場合であれば…

という、ブログに載せた画像を「自動でリサイズ」してくれるWordPressプラグインがおすすめです

「自動リサイズ」は確かに便利だけど、プラグイン自体がブログを重たくしかねないから、自分は「ペイント」を使ってるよ！

ワードプレスブログ「完全初心者」ガイド