ワードプレスの画像挿入は簡単。あわせて画像の基本をおさえておく!


「ワードプレスで画像を使うとき何を知ってたほうがいいの??とりあえず基本的なことを知っておきたい」

機能が沢山あって、それがワードプレスのいいところですがサイト作成初心者はどの機能を使えばいいのか分からなくなってしまいます。

なので今回、画像に限って本当に最低限知っておきたい画像挿入と基本をまとめました。


基本的なこと
・画像の大きさ単位
1KB=1024B
1MB=1024KB(約100万バイト)
1GB=1024MB
・ファイル名は半角英数字

超基本。画像の挿入
・新規段落の追加後 / 半角のスラッシュ→【画像】選択
・【ブロックの追加】→【画像】選択
(以下の【メディアと文章】などのブロックを追加するときも同様の動作をします)

・画像に入力できる情報
代替テキスト…画像が表示されなかったとき代わりに表示されるテキスト
タイトル…検索で表示される
キャプション…画像下に表示される
説明…画像管理に使う

目次



基本的なこと


なにもワードプレスに限らず知っておきたい基本的なことをピックアップしておきました。

たった2つだけなぶん、本当に、基本的なこと。
サイトやブログを作るなら知っておきたい情報です。


・画像の大きさ単位
1KB=1024B
1MB=1024KB(約100万バイト)
1GB=1024MB


画像は高い画質になるとそのぶん重た~くなります。
サイズが大きいと、やはりそのぶん重た~くなります。

その結果、
重たい画像を開くのに時間がかかって記事を開くのが遅くなるという問題発生が考えられます。
記事を1つ見るたびに長い時間がかかったら、あなたならどうするでしょう?
私なら他のサイトを見ます。

そう、読んでくれる人に優しいサイトを作りたいなら画像の大きさを把握しておくほうがいいんです。


例えばワードプレスで画像をアップロードするとき、

最大アップロードサイズ: 64 MB。

と出ます。
MBはメガバイトという読み方で画像の大きさの単位。
(KB→キロバイト、GB→ギガバイト)


あなたがアップロードする画像はどのくらいの大きさをしているでしょうか?
是非チェックしてみてください。


アップロードする前、自分のPC内で画像サイズ確認方法
・画像にマウスを合わせてポップアップで出てくる【サイズ】を確認
・画像右クリック【プロパティ】→【詳細タブ】→表示下側にあるファイル欄の【サイズ】を確認


アップロード後、ワードプレス内での画像サイズ確認方法
・ダッシュボード左側【メディア】→画像選択→右側表示にでる【ファイルサイズ】確認
・編集画面で画像ブロック選択→【メディアライブラリ】→画像選択→右側表示にでる【ファイルサイズ】確認


画像サイズが大きい場合、画像を小さくすることをオススメ。
また、別記事でご紹介していきます。

今回は画像には大きさがあること、大きすぎると記事の表示に影響を与えることを覚えておきましょう。

そして、次に大事なこと。


・ファイル名は半角英数字

自分が探すとき分かりやすいので日本語でファイル名を保存したくなりますが、

必ず、ファイルは半角英数字にしましょう。

これに関しては「半角英数字以外にすると表示に影響が出る可能性があるから止めておこうか」という認識で、

とりあえず、ファイルを半角英数字にしておく。でいいと思います。というより、それでいいです。




超基本。画像の挿入


他記事と重複しますが大事かつ基本的なことなので。


超基本。画像の挿入
・新規段落の追加後 / 半角のスラッシュ→【画像】選択
・【ブロックの追加】→【画像】選択
(以下の【メディアと文章】などのブロックを追加するときも同様の動作をします)


※1番のマークが【ブロックの追加】です。

「あ、違う画像を挿入しちゃった…」という場合は、
画像クリックをすると上記ツールバーにでてくる【置換】をクリックして画像変更しましょう。

そしてこれまでアップロードした画像が保存されている【メディア】や【メディアライブラリ】で画像を選択したあと右側にでてくる【添付ファイルの詳細】に注目です。
ここに以下の情報を画像に入力できます。


代替テキスト…画像が表示されなかったとき代わりに表示されるテキスト
タイトル…検索で表示される
キャプション…画像下に表示される
説明…画像管理に使う


自分が入力したい情報だけ書き込めばいいのですが、個人的に代替テキストは入力しておいたほうがいいと思います。

なぜならSEO対策のひとつにもなるし画像が読み込まれなかったとき言葉が添えていたら読者にちょっと説明できて、微妙な空白に安心を与えられるんじゃと思うからです。

あなただったら、どうでしょう?

まとめる


この記事の内容は超基本なことなので覚えることをお勧めしますが、
画像に入力する情報に関しては「こういう機能もあるんだな~」ぐらいに覚えておくぐらいでも大丈夫。

初心者の人は完璧目指さずまずは記事作成楽しんでいきましょ~

画像で遊ぶ!WordPress記事作成ではこんなことができる【初心者向け】
記事の顔にもなる画像はワードプレスでいろんなことが出来ます。自分らしさを出せるカスタマイズ、是非挑戦してほしい。

ワードプレス、サイト関連


  • サイト読込スピード対策PNG・JPEG画像WebP一括変換フリーソフト
    画像をWebPに変換できる無料ツールです。PNG・JPEG・GIF・WebPに対応し、複数枚やフォルダの一括変換、ZIP一括ダウンロードが可能。変換前後の容量削減率や画質差を実測で表示し、透過画像には警告も表示します。会員登録不要でその場ですぐ使えます。


サイト最新記事


  • 100均商品辞典|探す・口コミレビューする情報共有ツール
    100均商品辞典は、100均の商品情報を検索したり、実際に使ったレビューを投稿したりできる無料の参加型ツールです。ユーザー自身が商品を登録・編集でき、みんなで情報を更新しながら商品辞典を作れます。気になる商品の情報収集から使用感の共有、コミュニティでの質問や情報交換まで、100均商品を探す人・使った人の双方に役立ちます
  • 【ハンドメイド帖】作品を投稿・共有しよう!作品・作り方・アイデアが集まる投稿サイト
    ハンドメイド帖は作った作品を画像付きで記録し、自分だけの作品ギャラリーとして管理できる無料Webツール。作品公開やハンドメイド好き同士の交流にも対応。制作した作品を残したい、過去作品を振り返りたい、作品を見てもらいたい人におすすめ。登録した作品や活動実績をマイページでまとめて確認できます。
  • ひとりの時間の過ごし方が分からない人へ|何をするか迷ったときの考え方とアイデア
    「ひとりの時間、何をすればいいか分からない」と悩んでいませんか?この記事では、一人の時間の過ごし方が分からなくなる理由を解説しながら、心を休める・楽しむ・学ぶ・作る・自分と向き合うという5つの視点で、充実したひとり時間の過ごし方をご紹介します。自分らしい過ごし方を見つけるヒントとして、ぜひご活用ください。

100均 (2) WordPress・ブログ運営 (4) お仕事のリアル体験談 (1) お金の知恵 (1) アロマ生活 (2) ハンドメイド販売・フリマ活用 (4) 人間関係・恋愛のモヤモヤ (4) 健康・美容セルフケア (1) 副業・個人事業のはじめかた (1) 創作・小説 (7) 生活のお悩み解決 (7) 紙もの・文房具クラフト (1) 贈り物・プレゼント (3)

マイページ
最近はまってるもの①

私の肌を救ってる

  • 30代で手をつけた美容液
  • 肌馴染みよし
  • 臭いなし
楽天saleで買う
最近はまってるもの②

ホッともいけるけどアイスがうますぎる

  • 最初少量の水で溶いてから
  • 氷入れて水大量
  • 幸せドリンクできあがり
楽天saleで買う

ツール一覧

AI・デザイン・画像
AI画像 お絵描き Color Studio AI指示
ハンドメイド
ビーズアート 小物配送
サイト制作・効率化
サイト素材 タスク管理 メモ 悩み整理
AIのお世辞を制御しつつ、イエスマンに終始しないプロンプト販売中。議論でもお気に入りタイプとの語り合いでも。

AIのお世辞を制御しつつイエスマンに終始しないプロンプト販売中。議論でもお気に入りタイプとの語り合いも。

その買うを、もっとハッピーに。|ハピタス