【Cocoon】〈初心者〉イラストを載せる方法

ブログの見栄えを良くしようと画像の貼り付けを試みましたが、解説記事と自分の画面が違うようなので、掘り下げてみました。

同じ悩みを抱えている方の参考になればと思います。

環境

それでは実際に画を記事に挿入する方法について説明します。

記事内に画像を貼り付ける

ググって手順通りに操作しようとしたら、説明と同じ画像が出てきませんでした。

バージョンの違いだと思いますが、実際の自分の表示との違いを確認するため記事の表示画面も並べておきます。

ネットでみつけた説明記事

まずWordPress管理画面（ダッシュボード）にある「投稿」から「新規追加」を選択します。

本文の画像を挿入した良い位置にカーソルを合わせたら「メディア追加」ボタンを押します。

（参考画像）

こういう画面になるそうなのですがちょっと違いました。

（自分の画面）

バージョンが違うようで表示が違っています。

メディアの追加

では自分のバージョンでメディアの追加をしていきます。

①ブロックの追加を選択。

メニューが出てきます。

②メニューの「画像」を選択します。

「画像」が表示されていない場合は「すべて表示」をクリック。

左のメニューで「画像」アイコンをクリックします。

画像の選択窓が出てきます。

• アップロード　　　：パソコンに格納した画像を取り込む。
• メディアライブラリ：WordPress内に格納された画像を使う。
• URLから挿入　　　：ネット上など外部から取り込む。

ここでは「メディアライブラリ」を選択します。

使いたい画像を選択し、「選択」をクリックします。

これで貼り付けることができました。

試しに違う画像を貼ってみました。

このように元の画像サイズによって単純に貼り付けた場合の画像の大きさが違いますので、貼り付ける画像を選択する時には注意が必要です。

サイズや配置については後で説明します。

スクリーンショットを貼る

この記事で図解用に貼り付けている画像はスクリーンショット（プリントスクリーン）から貼り付けをしています。

スクリーンショットの貼り方は

ただ「右クリック」をして「貼り付け」をするだけです。

説明が無いので何か制約が無いのか気になっていましたが、やってみれば普通にできたというオチです。

スクリーンショットを貼り付けると、自動的にメディアライブラリに格納されますので、次に使いたい時は選択して貼り付けができます。

貼り付け画像のサイズ

「画像を貼れたのは良いですが全部フルサイズで表示されるとさすがに圧迫感がある。」

「元の画像が小さくて他の画像とバランスが取れない。」

なんてことだとせっかく画像を貼っても見やすい記事にはなりません。

そこで画像の貼り付けサイズを変更してみます。

画像のサイズを変更するには右のメニューにある「画像サイズ」を設定します。

選択メニューは

• サムネイル
• 中
• 大
• フルサイズ

から選ぶか、その下の数値窓で選択します。

選択メニューで選んだ時のサイズ比はこんな感じです。

縦横比を変えることもできます。

インライン画像

文章の中に画像を埋め込む「インライン画像」という機能です。

ここの文章にこんな感じで埋め込みができます。

元の画像は500×500ピクセルですが、この貼り付け状態は幅が150となっています。

この画像を選択するとサイズ変更ができます。

幅を150から80にするとこうなります。

記事内画像まとめ

記事内に画像を貼るには

という方法を説明しました。

少しでもわかりやすいように画像を多く使ってみましたが、理解の助けになれば嬉しいです。

アイキャッチの設定

記事の顔ともいうべきトップページで表示される「アイキャッチ」を設定します。

右に出てくるメニューの「投稿」内で行います。

メニューが出ていない場合は「歯車」マークをクリックすれば表示されます。

メニューを下の方にスクロールすると「アイキャッチ画像」と書かれたグレーのエリアが出てきます。

グレーのエリアを」クリックすると「画像」と同じように「メディアライブラリ」の画面が出てきます。

新しい画像を取り込むなら「ファイルをアップロード」を選択します。

ここでは「メディアライブラリ」からの取り込みをします。

ここで使いたい画像を選択して

「アイキャッチの設定」をクリックすれば終了です。

まとめ

記事単位で設定をする、アイキャッチと記事内の画像貼り付けについて説明しました。

画像の貼り付けは、どこから持ってくるにしても難しい操作ではありません。

また、なんとなくでも「やってみればできる」ことですが、「ちょっとこれどうするんだっけ？」というような時のお役に立てればと思います。

最後までお付き合いありがとうございました。

画像についてはこちらも参考にどうぞ。