基礎から始めるWordPress。見出しの次は画像を投稿してみよう！
前回は「見出し」の説明を行ったの。
身だしなみ？漢の基本やで。
…はぁ。今日は「画像ののっけかた」を勉強しよか。
(なんや馬鹿にされた気がする！)
ということで、今回は記事に挿入する画像についてふれてみたいと思います。
下見る前に環境確認したってな！
当ブログの投稿環境はこちら！
目次やん
投稿を華やかにするには画像が必須？
何事でもそうやけど、文字ばっかズラーッと並んでると、時折別のもんが見たくなったりするやろ？
せやな。ワシなんか文字だけ読んでたら3分ともたへんで。バタンキューや！
これはブログでも同じで、要所要所に彩りは必要やねん。文字ばっか並んでる記事って、実は人を選ぶであんま読んでもらえへんねん。
美しさも重要っちゅうことやな。新聞なんかも同じ原理かの。
せやろな。じゃから記事の頭とか、退屈になりそうなポイントや興味を引きたいポイントには画像をのっけてやるのがオススメじゃ。
ふーん。
他にもあるで。投稿の際には「アイキャッチ画像」や「OGP画像」の設定をするのも重要じゃな。てなことで、画像の設定について一つずつ見てくで！
ちなみにですが、以下で画像の作り方は説明いたしませんから、あらかじめこちらなどを参考に画像を用意しておいてくださいね♪
本文に画像を入れてみよう！
ここからはWordPress5.0以前に採用されてたクラシックエディタを使った画像設定を説明するで。Gutenbergエディタを使った設定は別で説明してるで、次のリンク先を確認したってな！
◆Gutenbergの画像設定はコチラ！
https://wordpress-beginner.net/gutenberg-imagepost/#toc_id_1
位置を選択したら、次は上の「メディアを追加」ボタンを押すんじゃ。
するとこれまでに挿入してきた画像の一覧が表示されるでな。一枚もない場合はどうしよもないで、「ファイルをアップロード」タブを選択して追加してみよか。
すると「ファイルを選択」ちゅうボタンが出てくるで、それを押すんや。自分のパソコンのフォルダが表示されたら、ブログに表示させたい画像ファイルを選択したるんじゃ！
選択が終わると、一覧に画面が戻るで。そしたらアップロードした画像が表示選択されてるで、お次は画面の右側を注目じゃ！
ここで気にするポイントは4つじゃ。以下4つの欄を設定するで。
キチンと設定すべきポイントはこちら！
① 「代替テキスト」
② 「配置」
③ 「リンク先」
④ 「サイズ」
それじゃ一つずつ確認してみるで！
①「代替テキスト」
①「代替テキスト」の欄には「画像の簡単な説明」を書くで。例えばバナナの絵をのっけるなら、「美味しそうなバナナ」とか書くとええで。ちなみに「キャプション」と「説明」は空欄でも構わへんけど、「代替テキスト」は必ず記入するんやで。書かへんと検索サイトさんが何の画像か判断できへんで結果的に損するでな。
②「配置」
②「配置」は画像をブログのどの位置に貼るか決める項目じゃ。本文の「左寄り」か、「中央」か、それとも「右寄り」かを選択できるんじゃ。ちなみに左と右を選択すると、「回り込み」言うて画像の横に文章を書くことができるで。また「なし」は通常左寄りで回り込みがない配置になるから覚えとき。
左寄りの場合は、回り込みの影響でこんな感じで文字が打てます。
右寄りの場合も、回り込みの影響でこんな感じで文字が打てます。
③「リンク先」
③「リンク先」は、画像をクリックした時に見られるページの設定をするとこじゃ。一般的に「メディアファイル」を選択すると画像を表示するために自動設定されたページやアップロードした画像のURLが開かれるで。
「添付ファイルのページ」を選択すると、アップロードした画像用に作られたページが表示されるで。
「カスタムURL」を指定すると、指定のページにリンクを貼ることができるで。例えば画像をクリックして、ウチのホームへ飛ばしたいなら「https://wordpress-beginner.net/」と入力や。「なし」は文字通り画像を貼るだけじゃ。
④「サイズ」
最後は④「サイズ」じゃ。WordPressは「ファイルのアップロード」で画像をアップロードすると、自動で色んなサイズの同じ画像を作るようになってての。そん中から自分の好きなサイズの画像を選べるんじゃ。好みのサイズを選んだってな。
また、自動作成される画像のサイズ設定は、「プラグイン」または「Luxeritas(テーマ)」の設定にて可能です。
◆プラグイン(EWWW Image Optimizer)の場合はこちら！
◆Luxeritasの場合はこちら！
①～④全ての記入が終わったら「投稿に挿入」を押すで。これで本文に画像を入れる項目は完了じゃ！
続いてアイキャッチ画像を設定しよう！
あいきゃっち？
誰かワシに愛をくれるんか？
誰かワシに愛をくれるんか？
アイキャッチは主に一覧表示なんかで表示されるちっちゃい画像の設定じゃな。ウチやとホームのページなんかに並んでる画像じゃ。そいつを記事別に設定できるんじゃよ。
へ～。…なんや、愛と違うんか。
まずは設定方法じゃの。投稿画面の右下の方に「アイキャッチ画像」て窓があるで、「アイキャッチ画像を設定」を選択じゃ。
すると本文に画像入れる時と同じ画面が表示されるで、同じように設定したってな。
ちなみに「アイキャッチ画像」窓がない場合は、画面右上の「表示オプション」をクリックし、ボックスに表示された中から「アイキャッチ画像」にチェックを入れると表示されます。
ついでにOGP画像も設定しておこう！
オージービーフやて!?
これはTwitterなんかのSNS上で表示される記事のアイキャッチ画像やと思ったらええわ。設定しとくと、ブログの記事をSNSにのっけた時なんかに画像が表示されるようになるで。
ほ～。…なんや、お肉ちゃうんか。
「”og:image/twitter:image”の画像」て窓があるで、「画像を設定」ボタンを押して決めたってな。方法はアイキャッチ画像の章と全く同じやで省略するで。
画像の挿入方法を見終えて…
どや、画像の入れ方はこんな感じじゃ。小技みたいなのは他にも沢山あるけど、もっとも初歩的な部分は分かったじゃろ。
せやな。けど回り込みとか、ワシもまだよく分かってへんけど。
そのうち細かく見てみよか。まずは基礎的な投稿方法を学ぶのが肝心じゃ。
ということで、画像の挿入方法は以上です。
ではまた次回！