WORDPRESS

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION/WordPressブログ】

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法
 

あずきです🐥

 

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

「画像ファイル」の貼り方とカスタマイズ方法

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

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

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

  • 画像ファイルを貼るときに押さえておきたい、基本的なポイント
  • ACTION AFFINGER6で可能な、ブログに貼った画像のカスタマイズ

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 top-01

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 top-02

 

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

  • ブログに貼る画像のおすすめなサイズ(px)
  • ブログに貼る画像を「リサイズ=縮小」する方法

についても、あわせてご紹介しています🐣(重要です)

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

 

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法を初心者向けに解説。代替テキスト(alt属性)を設定しよう【ACTION/WordPressブログ】

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

補足

ご紹介する内容は、WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」を導入していることが前提となります ↓

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法
【2021年】Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

続きを見る

 

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

WordPress ヘッダー b-01

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-01-a

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

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

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-01-b

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-01-c

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

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

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-01-d

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

 

補足

上記の手順で以前にアップロードしたことのある画像ファイルを、再度使用したい場合は…

メディアを追加 > メディアライブラリ

という順にクリックし、表示される画像一覧から、任意の画像ファイルを選択すればOKです

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-02-a

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

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

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-02-b

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

 

「代替テキスト」とは…

  • 画像ファイルが「読み込みエラー」などで万が一ページに表示されなかった場合のための、補助的な設定!
  • 表示されなかった画像の代わりに、設定した「代替テキスト」の内容がページ上に表示されるようになる!

というものになります

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

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

Googleなどの「検索エンジン」に、画像の内容を伝える

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

 

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

  • 皇居ランコース、半蔵門エリア編
  • 夏野菜たっぷりのおすすめカレー

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

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

ということで!

 

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

投稿に挿入

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-03

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

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-04

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

編集

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

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-05-a

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

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-1-05-b

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

  • 代替テキスト → 「画像が表示されなかったとき」のための説明文(原則、付けるのが定石!)
  • キャプション → 「画像とセット」で表示される説明文(付けたい場合だけ付ければOK!)
キャプションは、例えば「風景写真」とかに付けてあげるとオシャレな雰囲気になるよ!(もしくは引用画像の「出典」とか)
 
 

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

 

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

WordPress ヘッダー b-02

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-2-01-a

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-2-01-b

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

 

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

  • 枠線
  • ポラロイド風
  • ワイド

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

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

「枠線」を選択すると…

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-2-02

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

 

特に、上画像のように…

「白無地」背景の画像を貼るとき

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

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

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-2-03-a

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

 

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

AFFINGER6「画像ファイル」の貼り方とカスタマイズ方法 1-2-03-b

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

 

注意

上画像のように「ポラロイド風」+「キャプション」も付ける場合は…

  1. ポラロイド風を選ぶ!
  2. キャプションを付ける!

という手順で行いましょう(先に「キャプション」を付けた画像に「ポラロイド風」を選択しても、正常に反映されませんでした)

 

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

記事コンテンツの「横幅の上限」を超えて画像を載せられる

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

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

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

WordPress ヘッダー b-03

 

最後におまけです🐣

 

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

 

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

 

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

 

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

縦横サイズ(px)

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

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

なので結論!

 

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

リサイズ(縮小)

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

で!

 

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

ペイント

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

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

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

Imsanity

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

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

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

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

 

-WORDPRESS