追加した画像のサイズを自由に変更する方法3選

スポンサーリンク

追加した画像のサイズを自由に変更する方法3選

 

WordPressで画像を投稿などに画像を挿入する際にサイズを変更するための方法をいくつかご紹介します。

デフォルトの「メディアを追加」画面でのサイズ変更方法+αです。

 

スポンサーリンク

投稿画像のサイズを変更する方法

 

投稿画像のサイズ」を変更する方法3選です。

 

メディア追加でサイズを指定する

メディア追加でサイズを指定する

 

WordPressのデフォルトの機能に「メディアを追加」という機能があります。

画像や動画などのメディアを追加するための機能で、WordPressを使用している人は誰もが使用したことがある機能だと思います。

 

その、「メディアを追加」で画像を投稿や固定ページに挿入する際にサイズを指定することができます。

 

操作方法

 

操作方法はいたって簡単です。

 

メディアを追加のボタンを押してください

まずは、いつも通り投稿編集画面の上部にある「メディアを追加」のボタンを押してください。

 

すると、アップロードされている画像一覧が表示されます。

 

添付ファイルの詳細

表示された画像一覧から、挿入したい画像を選択すると右側にこのような「添付ファイルの詳細」が表示されます。

 

その中に、「サイズ」という項目がありますので画像を挿入する前に指定することでサイズを変更することができます。

サイズの種類は、元の画像のサイズによって異なりますが「サムネイル」「中サイズ」「大サイズ」「フルサイズ」が存在します。

 

サイズを指定すればあとはいつも通り「投稿に挿入」を押せばOKです。

 

メリット

 

  • 操作方法が簡単
  • 「中サイズ」「大サイズ」のように自動でサイズ決めてくれる

デメリット

 

  • 自分でサイズを決めれない
  • 急にサイズが変わりすぎていい感じのサイズがない場合がある

 

HTMLに直接指定する

HTMLに直接指定する

 

WordPressの投稿編集画面には「ビジュアルモード」と「テキストモード」の二種類が存在します。

  • ビジュアルモード」 → ワープロソフトに似たエディターが表示されます。
  • テキストモード」 → HTMLを記述することができます。

 

テキストモード」で直接HTML編集することで画像のサイズを変更することができます。

HTMLがわからなくても編集は可能です!

※厳密にいうとCSSをHTMLコード内に直接記述します

 

操作方法

 

まずは、投稿編集画面から「メディアを追加」でサイズを変えたい画像を挿入してください。

 

テキストを押してください

次にメニュバーの右側付近にある「テキスト」を押してください。

 

HTMLコードが表示されます

すると、何やら呪文のような文字列が表示されますが大丈夫です。

画像を挿入してすぐに「テキストモード」に変更することで一番下に画像のHTMLが表示されます。

ですので、一番下までスクロールして「<img」から始まる行を探してください。

 

<img class=”alignnone size-large wp-image-976″ src=”https://nekomiblog.com/wp-content/uploads/2017/09/444-2-1024×522.png” alt=”画像のHTMLコード” width=”680″ height=”347″ />

このコードの中の「width=””」「height=””」のダブルクォーテーションの中の数字を変更することで、画像のサイズを変更することができます。

  • width → 横幅
  • height → 縦幅

数字の単位は「px(ピクセル)」です。

 

数字を変更してから「ビジュアルモード」に変更すればサイズを確認することができます。

 

メリット

 

  • 自分の好きなサイズにできる
  • 比較的に簡単に操作できる

デメリット

 

  • 管理が大変(のちにサイズを変更する際、一枚づつ変更しないといけない

 

CSSでサイズを指定する

CSSでサイズを指定する

 

CSSを指定してサイズを変更します。

 

CSSの知識が多少必要になってきますが、自分の好きなサイズにすることができ、管理も楽にすることができます。

 

操作方法

 

まずは、「style.css」に記述を追加していきます。

 

外観→テーマの編集を選択してください

WordPressの「ダッシュボード」から「外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)を選択してください

画面右側の「テンプレート」から「スタイルシート(style.css)」を選択してください。

 

のようにコードを追加してください。

 

「.img-size-test」は自分のわかりやすいものに変えてください。

※「.(ドット)」は必ず先頭につけてください。

width」・「height」の数字は変えたい画像のサイズに変更してください。

 

追記が完了したら「ファイルを更新」を選択してください。

 

テキストモードにしてください

投稿画面に戻り、画像を挿入してエディタを「テキストモード」にしてください。

挿入した画像のHTMLを探してください。

 

<img class=”alignnone size-large(※消す) img-size-test(※追記) wp-image-976″ src=”https://nekomiblog.com/wp-content/uploads/2017/09/444-2-1024×522.png” alt=”画像のHTMLコード” width=”680″ height=”347″ />

class=””」を編集します。

size-xxxx」を消します。(サイズによって「size-large」「size-full」などがあります。)

次に、先ほど「style.css」に追加したCSSの「.img-size-test」の.(ドット)」を抜いたものを追加してください。

 

以上で完了です。

あとは、「プレビュー」などで確認してください。

 

変更しない場合はこちらの記事も合わせて読んでみてください。

CSSを変更したのにサイトデザインが変わらない時の対処方法
サイトのデザインを変更したい! そんな時は、どうしますか? WordPressであれば、「テーマ」を変更すればデザインを簡単に変えることができます。 しかしながら、なかなか自分の思い通りのデ...

 

メリット

 

  • 自由にサイズを決めることができる
  • 管理が楽(CSSを変更すれば一括でサイズを変更できる)
  • 画像の装飾とかも自由にできる(今回は紹介していません)

デメリット

 

  • CSSの知識が多少必要
  • ビジュアルモード」で確認ができない

 

まとめ

 

画像のサイズ」を変更する方法をご紹介しました。

 

基本的には、WordPressの基本機能「メディアを追加」でサイズを指定すれば問題ないと思います。

しかしながら、自分好みのサイズがない場合HTML・CSSを変更してみましょう。

 

 

コメント