1. TOP
  2. ワードプレスのブログ記事に画像を挿入する方法

ワードプレスのブログ記事に画像を挿入する方法

 2017/02/21 Wordpress設定・全般  

これからワードプレスでブログ記事を書こうと思ったけど、

  • あれ?画像ってどうやって記事に挿入するんだろう?
  • 画像にリンクを追加するにはどうすればいいんだろう?

このように感じていませんか?

この記事では初心者の方でもわかりやすいように、

  • 画像の挿入方法
  • 画像にリンクを追加する方法
  • 画像サイズの変更方法
  • 画像を切り抜く方法
  • 画像の削除方法

をお伝えしておきます。

記事への画像の挿入方法

記事に画像を挿入する際には、あらかじめ挿入した画像を用意しておいてください。

そして、以下のように投稿画面にて、「メディアを追加」をクリックします。
メディアを追加をクリックします。

すると、以下のような画面になります。

「ファイルをアップロード」から真ん中の「ファイルを選択」をクリックし、アップロードしたいファイルを選びます。

もしくは、この画面に対して、画像をドラッグ&ドロップしてもアップロードされます。

画像をドラッグ&ドロップ

画像のアップロードが完了されると、その画像が「メディアライブラリ」に表示されます。

メディアライブラリにて、画像を選択していると、このような画面になっているので、各項目をきちんと記載しておきます。

  • タイトル
    Google画像検索結果で表示されるタイトル(全角英数字や日本語にすると、スマホで画像が表示されないので、半角英数字で記載すること)
  • キャプション
    →画像を表示した時に画像下部に表示したい文字
  • 代替えテキスト
    →この画像の中身を表す項目、SEO効果もあるので必ず記載しておく。ALTテキスト
  • 説明
    →管理用の文章

画像の内容の編集方法

右下の「投稿に挿入」をクリックを押してください。

画像の挿入が完了となります。

画像の挿入が完了した様子

画像にリンク先を追加する方法

次に、画像に対してリンクを追加する方法をお伝えします。

先ほどの画像に対してクリックします。

以下のようにボタンが現れるので、「鉛筆マーク」をクリックします。

鉛筆マークをクリックする様子

以下の画面になりましたら「上級者向け設定」をクリックし、「リンクrel」にリンク先のURLを入力してください。

また、リンクを新しいタブで開く場合はチェックを入れておいてください。

終わりましたら、右下の「更新」をクリックで完了となります。

リンクの設定方法

実際に記事を確認してみて、リンクが設定されているか確認しましょう。

画像の配置を変更する方法

次に画像を

  • 左寄せ
  • 中央揃え
  • 右寄せ

する方法です。

先ほどのように、画像をクリックします。

編集画面が現れるので、赤枠の部分から画像の配置箇所を選んでください。

画像の配置の仕方

プレビューで確認してみてOKであれば完了となります。

画像のサイズの変更方法

次に画像のサイズの変更法となります。

画像のサイズを変更するには、「メディアライブラリ」で任意の画像を選択し、「画像を編集」をクリックします。

画像のサイズの変更をするクリック

以下の画面では赤枠の部分で変更したい新規の画像サイズを入力します。

もしも、間違えた場合は「元の画像を復元」というタブから「画像を復元」というボタンをクリックしてください。

画像のサイズを決めている様子

以上で画像のサイズ変更は完了となります。

画像をトリミング(切り抜く)方法

次に画像をトリミングする方法です。

画像をトリミングするには、先ほどの画像編集ページにて左上の画像をドラッグします。

画像の切り取り範囲を選択している

画像の切り取り範囲は角の「□」を動かすことで、変更することができます。

切り取り範囲を変更中

範囲の指定が終わったら、左上の切り抜きマークをクリックします。

画像の切り抜きの完了

これで画像の切り抜きが完了です。

画像の削除方法

最後に、画像の削除方法です。

ここでは、

  • 記事から画像を削除する方法
  • サイト自体から画像を削除する方法

をお伝えします。

記事内の画像の削除

記事内の画像を削除するには、以下のように削除したい画像をクリックします。

「×」をクリックして完了です。

画像の削除方法

 

メディアライブラリからの画像の削除

メディアライブラ入りから画像を削除しておくことも、サイトの軽量化という意味では多少なりとも役に立ちます。

方法としては「メディアライブラリ」にて、画像を選択し「完全に削除する」をクリックして完了となります。

削除方法

まとめ

以上が

  • 画像の挿入方法
  • 画像にリンクを追加する方法
  • 画像サイズの変更方法
  • 画像を切り抜く方法
  • 画像の削除方法

になります。

この記事でお伝えしているのは基本的な内容になるので、慣れたら色々なボタンを押してみたりと高度なことを試してみてくださいね。

以下の記事では、ブログ記事内に様々な装飾を施すための方法をお伝えしています。ぜひご覧ください。

ブログ記事にYoutube動画を埋め込む方法

ブログ記事で表(テーブル)を作成する方法

ブログ記事にGoogleマップを埋め込む2ステップ


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

関連記事

  • ワードプレスからFacebookやTwitterへブログ記事を自動投稿する方法

  • これだけやっておけば大丈夫!ワードプレスとFacebookを連携させる方法

  • わかりやすっ!プロが優しく教えるワードプレスの投稿方法

  • Facebookシェアするときにアイキャッチ画像が表示されない場合の対処法

  • ワードプレスで自動投稿(予約投稿)する方法!Facebookにもついでに自動シェア!

  • ワードプレスの固定ページをトップページに設定する方法+注意点