基礎から始めるWordPress。見出しの次は画像を投稿してみよう!

ブログ管理WordPress基本設定, ブログ管理, 初心者, 画像挿入

画像挿入ヘッダー

トリ師匠
トリ師匠
前回は「見出し」の説明を行ったの。

ぐず夫
ぐず夫
身だしなみ?漢の基本やで。
トリ師匠
トリ師匠
…はぁ。今日は「画像ののっけかた」を勉強しよか。
ぐず夫
ぐず夫
(なんや馬鹿にされた気がする!)

ということで、今回は記事に挿入する画像についてふれてみたいと思います

下見る前に環境確認したってな!
当ブログの投稿環境はこちら!

投稿を華やかにするには画像が必須?

画像は必要?

トリ師匠
トリ師匠
何事でもそうやけど、文字ばっかズラーッと並んでると、時折別のもんが見たくなったりするやろ?

ぐず夫
ぐず夫
せやな。ワシなんか文字だけ読んでたら3分ともたへんで。バタンキューや!
トリ師匠
トリ師匠
これはブログでも同じで、要所要所に彩りは必要やねん。文字ばっか並んでる記事って、実は人を選ぶであんま読んでもらえへんねん
ぐず夫
ぐず夫
美しさも重要っちゅうことやな。新聞なんかも同じ原理かの。
トリ師匠
トリ師匠
せやろな。じゃから記事の頭とか、退屈になりそうなポイントや興味を引きたいポイントには画像をのっけてやるのがオススメじゃ。
ぐず夫
ぐず夫
ふーん。
トリ師匠
トリ師匠
他にもあるで。投稿の際には「アイキャッチ画像」「OGP画像」の設定をするのも重要じゃな。てなことで、画像の設定について一つずつ見てくで!
ダンパ
ダンパ
ちなみにですが、以下で画像の作り方は説明いたしませんから、あらかじめこちらなどを参考に画像を用意しておいてくださいね♪

 

本文に画像を入れてみよう!

トリ師匠
トリ師匠
まずは本文に画像を入れる方法を確認するで。見出しの設定に引き続き、ビジュアルエディタを選択して、本文の中で画像を入れたい位置をクリックして選択してみよか。
画像挿入位置を決定
「画像を入れたい」の後ろを選択
トリ師匠
トリ師匠
位置を選択したら、次は上の「メディアを追加」ボタンを押すんじゃ。

メディアを追加

トリ師匠
トリ師匠
するとこれまでに挿入してきた画像の一覧が表示されるでな。一枚もない場合はどうしよもないで、「ファイルをアップロード」タブを選択して追加してみよか。

メディアファイルの追加

トリ師匠
トリ師匠
すると「ファイルを選択」ちゅうボタンが出てくるで、それを押すんや。自分のパソコンのフォルダが表示されたら、ブログに表示させたい画像ファイルを選択したるんじゃ!

ファイルを選択し決定

トリ師匠
トリ師匠
選択が終わると、一覧に画面が戻るで。そしたらアップロードした画像が表示選択されてるで、お次は画面の右側を注目じゃ!

右側に注目!

トリ師匠
トリ師匠
ここで気にするポイントは4つじゃ。以下4つの欄を設定するで。

4つのポイント表示例

キチンと設定すべきポイントはこちら!  

① 「代替テキスト」
② 「配置」
③ 「リンク先」
④ 「サイズ」

トリ師匠
トリ師匠
それじゃ一つずつ確認してみるで!

 

①「代替テキスト」

トリ師匠
トリ師匠
①「代替テキスト」の欄には「画像の簡単な説明」を書くで。例えばバナナの絵をのっけるなら、「美味しそうなバナナ」とか書くとええで。ちなみに「キャプション」と「説明」は空欄でも構わへんけど、「代替テキスト」は必ず記入するんやで。書かへんと検索サイトさんが何の画像か判断できへんで結果的に損するでな。
画像の説明
簡易的な画像の説明を記入

②「配置」

トリ師匠
トリ師匠
②「配置」は画像をブログのどの位置に貼るか決める項目じゃ。本文の「左寄り」か、「中央」か、それとも「右寄り」かを選択できるんじゃ。ちなみに左と右を選択すると、「回り込み」言うて画像の横に文章を書くことができるで。また「なし」は通常左寄りで回り込みがない配置になるから覚えとき。
見出しの設定ヘッダー
左寄り表示例

左寄りの場合は、回り込みの影響でこんな感じで文字が打てます。

 

見出しの設定ヘッダー
中央表示例
見出しの設定ヘッダー
右寄り表示例

右寄りの場合も、回り込みの影響でこんな感じで文字が打てます。

見出しの設定ヘッダー
「なし」表示例

 

 ③「リンク先」

トリ師匠
トリ師匠
③「リンク先」は、画像をクリックした時に見られるページの設定をするとこじゃ。一般的に「メディアファイル」を選択すると画像を表示するために自動設定されたページやアップロードした画像のURLが開かれるで。
見出しの設定ヘッダー
「メディアファイル」表示例
トリ師匠
トリ師匠
「添付ファイルのページ」を選択すると、アップロードした画像用に作られたページが表示されるで。
見出しの設定ヘッダー
添付ファイルのページ表示例
トリ師匠
トリ師匠
「カスタムURL」を指定すると、指定のページにリンクを貼ることができるで。例えば画像をクリックして、ウチのホームへ飛ばしたいなら「https://wordpress-beginner.net/」と入力や。「なし」は文字通り画像を貼るだけじゃ。
見出しの設定ヘッダー
カスタムURL(ホームリンク例)

④「サイズ」

トリ師匠
トリ師匠
最後は④「サイズ」じゃ。WordPressは「ファイルのアップロード」で画像をアップロードすると、自動で色んなサイズの同じ画像を作るようになってての。そん中から自分の好きなサイズの画像を選べるんじゃ。好みのサイズを選んだってな。
ダンパ
ダンパ
また、自動作成される画像のサイズ設定は、「プラグイン」または「Luxeritas(テーマ)」の設定にて可能です。

◆プラグイン(EWWW Image Optimizer)の場合はこちら!


◆Luxeritasの場合はこちら!

トリ師匠
トリ師匠
①~④全ての記入が終わったら「投稿に挿入」を押すで。これで本文に画像を入れる項目は完了じゃ!

画像挿入完了!

 

続いてアイキャッチ画像を設定しよう!

ぐず夫
ぐず夫
あいきゃっち?
誰かワシに愛をくれるんか?
トリ師匠
トリ師匠
アイキャッチは主に一覧表示なんかで表示されるちっちゃい画像の設定じゃな。ウチやとホームのページなんかに並んでる画像じゃ。そいつを記事別に設定できるんじゃよ。
ぐず夫
ぐず夫
へ~。…なんや、愛と違うんか。
トリ師匠
トリ師匠
まずは設定方法じゃの。投稿画面の右下の方に「アイキャッチ画像」て窓があるで、「アイキャッチ画像を設定」を選択じゃ。

アイキャッチ画像設定

トリ師匠
トリ師匠
すると本文に画像入れる時と同じ画面が表示されるで、同じように設定したってな。
ダンパ
ダンパ
ちなみに「アイキャッチ画像」窓がない場合は、画面右上の「表示オプション」をクリックし、ボックスに表示された中から「アイキャッチ画像」にチェックを入れると表示されます。
アイキャッチ画像窓追加
表示オプションを選択し、追加したい窓をチェック!

 

ついでにOGP画像も設定しておこう!

ぐず夫
ぐず夫
オージービーフやて!?
トリ師匠
トリ師匠
これはTwitterなんかのSNS上で表示される記事のアイキャッチ画像やと思ったらええわ。設定しとくと、ブログの記事をSNSにのっけた時なんかに画像が表示されるようになるで。
ぐず夫
ぐず夫
ほ~。…なんや、お肉ちゃうんか。
トリ師匠
トリ師匠
「”og:image/twitter:image”の画像」て窓があるで、「画像を設定」ボタンを押して決めたってな。方法はアイキャッチ画像の章と全く同じやで省略するで。
OGP設定
窓がない場合の設定も同じです

 

画像の挿入方法を見終えて…

トリ師匠
トリ師匠
どや、画像の入れ方はこんな感じじゃ。小技みたいなのは他にも沢山あるけど、もっとも初歩的な部分は分かったじゃろ。
ぐず夫
ぐず夫
せやな。けど回り込みとか、ワシもまだよく分かってへんけど。
トリ師匠
トリ師匠
そのうち細かく見てみよか。まずは基礎的な投稿方法を学ぶのが肝心じゃ。

ということで、画像の挿入方法は以上です。

ではまた次回!