今回はブログの記事に画像を入れる方法をお伝えしていきます。ブログのメインはもちろん記事の文章ですが、画像が入るだけでブログの印象が大きく変わります。アクセントになって見た目も良くなるので是非、画像は入れるのがオススメです。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/07/laptop-2557571_640.jpg?resize=640%2C426&ssl=1)
1、記事の文中に画像をいれてみよう
記事への画像の挿入はいくつかありますが、一番ベーシックな方法を2つ紹介します。
・画像ブロックを追加してファイルを設定する
画像を追加したい場所にマウスカーソルを合わせて出てきた「+印」をクリックします。すると、ブロックの種類を選ぶ画面が出るので「画像」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/40e8ec56a6c21000e95299041387f383.png?resize=748%2C450&ssl=1)
次に「アップロード」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/39a213d9a67f7de4d7df674b1b7c115d.png?resize=753%2C323&ssl=1)
「アップロード」をクリックして出てきたファイル選択画面が出てくるので追加したい画面を開いて下さい。
![](https://i2.wp.com/oya-ken.com/wp-content/uploads/2019/08/543ee19c611f2d0202d2b6fed78ffcd0.jpg?fit=1024%2C419&ssl=1)
ファイルを開いて、選択した画像がアップされれば完了です。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/92c2fc54df0d76eca27d15fea30f1ecf.png?resize=725%2C518&ssl=1)
・画像をドラッグ&ドロップで挿入する
もう一つのやり方はコツが必要ですが、コツをつかんで慣れてしまえば画像の挿入が断然速くなるのでオススメです。
下の画像のように画像の入ったフォルダと記事の投稿画面を並べます。
画像をクリックしながら、画像を入れたい場所に引っ張ります。
画像を引っ張った先に青い線が出たらそこが適切な場所になります。
![](https://i1.wp.com/oya-ken.com/wp-content/uploads/2019/08/3eacb9d1e4d20fa01ee97e877e43b220.png?fit=1024%2C273&ssl=1)
青い線が出た状態でクリックを離せば画像が追加されます。
これで完了です。どうですか?簡単ですよね!
・代替えテキストとキャプションの変更
画像の入れ方は分かったと思いますので、次は見た目やアクセスアップにつながるような役立つ設定をしてみましょう。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/bb5fe9c6c62d5c4a3d4bf1fdcdc5e15a.png?resize=830%2C475&ssl=1)
上の画面にある画像の下にある「キャプションの変更」と文字が書いてあるのがキャプションです。要は画像の説明だったりコメントを載せる機能です。
不要だなと思ったら消して何も書かなくても良いです。むしろ重要なのは画像の右側にあるAltテキスト(代替えテキスト)です。
音声読み上げなどで使われたり、画像の検索などのキーワードになります。
説明する文章などをいれるのが良いでしょう。
・画像ファイルのサイズについて
それでは画像サイズの変更の設定の仕方を説明していきます。テーマによって違いますが最初の状態では
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/b01fbe275d8b89710e9908dbc5b2d940.png?resize=529%2C143&ssl=1)
テーマにもよるのですが、元の大きな画像をそのまま掲載するとブログの記事のデータが大きくなってしまい表示に時間が掛かってしまいます。
ワードプレスでは画像を自動的にサイズを縮小してくれる機能がついています。
「Nishiki」はブログトップに並ぶ画像サイズがサムネイルのサイズになっています。きれいに並べたいと思う方は設定を変更してみましょう。
管理画面の「設定→メディア」を開きます。すると次のような画面が出ますので「メディアの設定」画面の画像サイズのサムネイルのサイズを「幅:640 縦:360」と入力し「変更を保存」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/1559b17ab9fbcd8ab310b661f16564a8.png?resize=706%2C450&ssl=1)
他に使いたいサイズがある場合は中サイズと大サイズの長辺だけでも設定を変更しておくと便利です。
・画像のサイズや配置の変更の仕方
画像のサイズや配置の変更の仕方にもいくつか簡単にできる機能があるので説明していきたいと思います。
画像をクリックすると次のような画面がでます。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/51f63b5ce90c0b2ca3b7c03d811fe981.png?resize=734%2C590&ssl=1)
「中央揃え、左右寄せ、幅広、全幅」が選べるようになっています。その時のブログ記事の趣にあわせて配置やサイズを変更できるので便利です。
次に簡単なサイズの変更方法を説明したいと思います。これも同じように「画像」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/6f0ca48d4e5bee5bb2b32b4148d63ebb.png?fit=1024%2C460&ssl=1)
右側に「画像サイズ」と言うメニューがでるのでここで変更できます。細かいサイズの変更もできて便利です。
2、アイキャッチ画像の設定方法
次は、アイキャッチ画像の設定の仕方です。アイキャッチ画像は記事の顔と言える部分です。アイキャッチ画像で記事のイメージや、記事を開いてくれた人に内容をイメージしてもらえるなどのメリットがあります。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/a98b1120712ae2558c294773114e59b3.png?resize=840%2C453&ssl=1)
ブログを開いた時に文字だけだったら何か殺風景だし、つまらなそうだし、イメージもわきませんよね、上の画像のように記事ごとにアイキャッチ画像があれば何となく記事のイメージもわくし見てみようかなって思いませんか?
それでは設定方法を説明していきます。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/c04df3994bb124263698fac0861ecd54.png?resize=840%2C430&ssl=1)
投稿画面の記事の空白の部分を適当にクリックすると右側のメニューに「アイキャッチ画像を設定」というメニューがでるのでクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/28a11aa47c1237479478508f52f1fac1.jpg?resize=840%2C298&ssl=1)
するとメディアライブラリが開かれるので使いたい画像を選択します。自分の場合はタイトルの直ぐ下に入れている画像と同じ画像を使うようにしています。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/fec8be26068529dc99079b91886712b5-1.png?resize=840%2C401&ssl=1)
もし新たに追加した画像を使いたい場合は下の画面のように「アイキャッチ画像」画面から「ファイルをアップロード」→「ファイルを選択」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/3b5736d7bac325a8a5e0207bde105d7a.png?fit=1024%2C484&ssl=1)
新たに選んだファイルを開き「選択」をクリックします。以上でアイキャッチの設定は完了です。
アイキャッチ画像を変更したい場合は「画像の置き換え」を選択し削除したい場合は「アイキャッチ画像を削除」をクリックします。
アイキャッチ画像は記事の顔となるものなので出来る限り設定はしましょう。
・ギャラリー機能も使ってみよう!
ギャラリー機能とは今までは一つの枠に1枚の画像を載せる設定でした。ギャラリー機能は一つの枠に複数枚の画像を載せたい時に使う機能です。
1つの枠に複数枚の画像が載っていたらちょっと楽しそうですし目も引きますよね、記事を書くのに慣れてきたら是非、取り入れて見て下さいね。
それでは設定方法にまいりましょう。これも難しくはないのでついて来てくださいね。ギャラリーとして画像を追加する方法は1枚の画像を追加する方法と一緒です。
記事の「+印」をクリックします。「Tiled Gallary」をクリックします。始めは「Tiled Gallary」はない事があるので一番下までスクロールすると「Jetpack」という項目があるのでクリックすると出てきます。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/180dd4321df259271bd0c9e80b521ab4.png?resize=692%2C522&ssl=1)
すると次のような画面がでるのでアップロードまたはメディアライブラリを選択します。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/ec44015e5a9424640b2bbfd61d70b4b3-1.png?resize=723%2C311&ssl=1)
ギャラリーの選択画面が出るので好きな画像を数枚選びます。「ギャラリーを作成」をクリックして完了です。
![](https://i1.wp.com/oya-ken.com/wp-content/uploads/2019/08/cdbd0d34f9cf52d54feb76386b404e8c.jpg?fit=1024%2C444&ssl=1)
ギャラリー機能を使った画像が下の画面になります。
![](https://i1.wp.com/oya-ken.com/wp-content/uploads/2019/08/p3670.jpg?ssl=1)
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/youth-570881_640.jpg?ssl=1)
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/inspiration-1514296_640.jpg?ssl=1)
![](https://i1.wp.com/oya-ken.com/wp-content/uploads/2019/08/people-821624_1280-1.jpg?ssl=1)
ギャラリー機能で作成した画像をクリックすると「Upload an image」という文字がでます。これをクリックすると簡単に新しい画像を追加することができます
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/08/3c921bdf00e2759786495aec122b6367.jpg?resize=620%2C530&ssl=1)
なおギャラリー作成方法はもう一つあり「+印」をクリックしてドラッグ&ドロップでも出来るのでどちらでも好きな方法でギャラリーを作成してみて下さい。
3、ヘッターのメインビジュアルの変更とロゴの設定
「Nishiki」のヘッターメインビジュアルのままでも良いのですがやっぱり自分の好きな画像を入れてもっとオシャレなブログにしたいですよね。
メインビジュアルの変更も難しくはないのでさっと済ませて自分好みのおしゃれでかっこいいブログにしましょう。
・メインビジュアル変更の設定方法
管理画面の「外観」→「カスタマイズ」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/cfa9517d5143c427a6e5c10947a44d90.png?resize=410%2C342&ssl=1)
すると、次のような画面が出ます。「トップページ」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/8092593c442d3164bffbca053c3d3a5a.jpg?resize=819%2C460&ssl=1)
トップページの「メインビジュアル」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/c8d499f809fd41394167d6376eae4af0.png?resize=637%2C462&ssl=1)
次のような画面がでるので「新規画像を追加」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/00b7a4b0dc5f88b82be925ce52b49da7.png?resize=610%2C474&ssl=1)
「メディアライブラリ」から画像を選択します。なお新しい画像を使いたい場合は「ファイルをアップロード」します。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/8921a753e12065bcc96b4dafb8ee0ad9-1.png?resize=746%2C294&ssl=1)
自分の好きな画像を選んで「選択をして切り抜く」をクリックすれば完了です。
画像をランダムに変更したい場合は、お気に入りの画像をいくつか選択し「アップロード済みヘッダーをランダムに表示」を選択します。
メインビジュアルの設定方法は以上です。
・ロゴの設定方法
ロゴの設定はメインビジュアルの設定方法と途中までは一緒です。
管理画面の「外観」→「カスタマイズ」→「サイト基本情報」をクリックします。
![](https://i0.wp.com/oya-ken.com/wp-content/uploads/2019/09/7260c1fe026dc8b6fc2f400f084ce27a.png?resize=600%2C430&ssl=1)
「ロゴを選択」をクリックし「メディアライブラリ」か「アップロードしたファイル」から選択すると完了です。
※自分で作ったロゴを設定する際も基本的には同じ設定方法ですが、前もってロゴを作成しておく必要があります。
どうでしたか?画像を載せるだけでもブログのイメージは大分変ります。是非、取り入れて見て下さい。
今回はここまでです。お疲れ様でした。
One Reply to “WordPressブログに画像を入れてみよう!”