この記事では、ワードプレスを使って記事の中に画像を挿入する方法をいくつか紹介していきます。また、レイアウトや形の変更なども簡単に出来ますのでその一部を紹介していきます。
今回はワードプレスの標準エディタであるGutenberg（グーテンベルク）を使っての方法とHTMLで直接挿入する方法を紹介します。
画像の挿入方法
WordPressに画像を挿入する前に管理画面左側のメニュー→メディアから写真をアップロードしときましょう。（投稿中にも可能）
画像の挿入方法は、投稿エディタのブロックを選択→一般ブロック→画像を選びます。
展開したブロックからメディアライブラリを選択して先程アップロードした画像にチェックをして選択を押せば完了です。
画像ブロックから直接写真のアップロードも可能なので最初の作業は省略可能です。
ギャラリー
ギャラリーの挿入は、ブロックを選択→ギャラリーを選択します。ブロックを展開したらメディアライブラリの写真を複数チェックしてからギャラリーの作成→ギャラリーを挿入を押せば完了です。
ギャラリーを挿入すると下記の様に写真が並んでくれます。
文章の挿入
画像への文字の挿入方法は、画像に直接挿入する方法と画像の横に挿入する方法と説明を書く方法があります。
画像の横に
画像の横に文章を挿入する場合は、ブロック選択→レイアウト要素→メディアと文章のブロックを展開します。
またブロックの上のタブメニューで画像の位置の左右を切り替える事ができます。
実際の見た目は以下の様な感じです。
メディアと文章
画像の中に直接
画像の中に直接文章を挿入する場合は、ブロック選択→一般ブロック→カバーのブロックを展開します。
カバーブロックはテキストの背景にカラーや画像を追加する事が可能です。
実際の見た目は以下の様な感じです。
カバーの見た目
この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。この様にテキストが入ります。
画像の説明を書く
画像の設定文を書きたい場合は、画像のしたにあるキャプションを入力…の部分から出来ます。
この画像が何なのかを示す場合などに良く使われます。
実際の見た目は以下の様な感じです。
画像の形を変更
画像の形を変えたい場合は、画像のブロック上のタブメニューの1番左側のボタンの変換から行います。基本設定では、丸型しかありません。
実際の見た目は以下の様な感じです。
画像の変形の仕方については後ほど詳しく記事にしていきます。
HTMLで直接挿入
HTMLで直接画像を挿入する場合はカスタムHTMLに下記の記述をすれば出来ます。
<img src="メディアライブラリにある画像のURL"/>ここにオリジナルのclass名を付けてCSSを記述すれば、その写真にのみstyleを適応させる事が出来るので1番使い勝手の良い挿入方法です。
HTMLでの画像の追加については後ほど詳しく記事にしていきます。
また、絶対パスと相対パスを理解すれば長いURLを記述しなくても画像の挿入が可能です。
以上が「WordPressで画像を挿入する様々な方法」でした。
このように簡単に画像が挿入できる扱い易さがWordPressを使うメリットの一つだと思います。色々な写真をアップして見栄えの良いサイトに仕上げていきましょう。
画像リンクにマウスホバーアクションを付けてクリック出来る感を出す方法は以下から
下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。
