1.8.2 Released!

画像のサイズ変更や影をつける方法

画像のサイズを変えたり影をつけたりする方法

このページでは、WordPressテーマ「SANGO」で記事内の画像のサイズを変更したり、影をつけたりする方法を解説します

設定したい画像をクリックして選択しておく

画像のサイズを調整したり、画像に影や線をつけたりしたいときには、まずエディターで画像をクリックしましょう。クリックされた画像は選択状態になります。

ビジュアルエディタの「スタイル」から

WordPressの投稿画面の「ビジュアルエディタ」にスタイル というドロップダウンボタンがあると思います。

MEMO
テキストエディタの方には表示されないので注意

ここをクリックすると、デザイン設定についての様々な選択肢が表示されます。これはSANGOのオリジナル機能です。

「画像のスタイル」にカーソルを当てると、画像についての様々な設定項目が表示されます。

 

すると、画像が選択され、まわりが枠で囲まれます。この状態で、画像に関するスタイルを選びます。

画像についてのスタイル設定一覧

1つずつ、見ていきましょう。画像に何も設定していないときは以下のようになります。もともとサイズが大きい写真なので、横いっぱいまで広がっています。

画像を小さくする

画像を小さく表示したいという場合には、さきほどのように画像をクリックして選択した状態で画像を小さくを選びます。

画像が小さく表示されるのが分かるかと思います。

MEMO
こちらの設定は画像の表示される「最大サイズ(横幅)を250px以下におさえる」というものです。そのため、もともと横幅が250px以下の画像については、何も表示は変わりません。

画像を少し小さくする

そこまでは小さくしたくないという場合は画像を少し小さくを選びます。

さきほどよりはやや大きく表示されています。

MEMO
こちらは「画像の最大の横幅を350px以下におさえる」という設定です。例えば横幅320pxのスマホで見たとき等には、画像サイズははみ出ないように320px以下の調整されます。

画像を線で囲む

画像を線で囲むこともできます。サイズを少し小さくした画像に、さらに線をつけてみましょう。うっすらと表示されるのであまり目立たないかもしれませんが…。

画像に影をつける

「画像に影をつける」を選んだ場合、下のような表示になります。

「画像に大きめの影」を選んだ場合、下のような表示になります。


HTMLのクラス名でスタイルを変える場合

テキストエディタやMars Editなどを用いてHTMLで記事を書いている場合でも画像のスタイル設定は可能です。

画像のスタイルを変えるクラス名一覧

以下のようにimgタグに対してクラスを追加することで、さきほど紹介したスタイル設定ができます。

HTML
<!--画像を小さくする-->
<img src="~" class="img_so_small">

<!--画像を少しだけ小さくする-->
<img src="~" class="img_small">

<!--画像を線で囲う--> 
<img src="~" class="img_border">

<!--画像に影をつける--> 
<img src="~" class="shadow">

<!--画像に大きめの影をつける-->
<img src="~" class="bigshadow">

27 COMMENTS

暇人 2018/10/04

sangoを利用しているものですが、画像の枠の色を変更したい場合どうすればいいでしょうか?

回答を見る
室蘭 2018/09/16

画像を大サイズ(680×300)で読み込むと、
①パソコン
②スマホ縦向き
は完璧です。

しかし、
③スマホ横
の画像がでかすぎて見にくくなります。

スマホ横で表示されるサイズをスマホ縦と同じにしたいのですが、
可能でしょうか?

回答を見る
ヨウヘイ 2018/08/02

お世話になっております。

「スタイル」→「画像のスタイル」→「画像に影をつける」を選択しなくても、画像を貼ったとき、常時、記事内全ての画像に「画像に影をつける」の状態に設定する事はできるでしょうか?

回答を見る
あか 2018/07/31

サンゴ初心者です!画像を追加すると、画像が小さくなってしまいます 多少のトリミングをしているのですが、少しでもトリミングをすると小さくなってしまうのでしょうか?
まったくトリミングをしていない画像だけが、大きく表示をされました。
他のテーマだとトリミングに関係なく読者が見やすいサイズに自動的に変更されていたので、サンゴでも普通のサイズで画像を貼りたいです。

回答を見る
nao 2018/06/14

記事中の画像を押下で大きく表示させたい場合、
どのような方法で出来ますか?

回答を見る
Hiro 2018/05/24

先日テーマをSANGOに変更したのですが、今まで画像の比率を考えずにアップロードしてしまっていたため、”前の記事”、”次の記事”の大きさに統一感がなくなってしまっています。
今後は比率を考えてアップしていこうと思っているのですが、画像が切れても良いので一旦縦横の比率を合わせたいのですが、どのように対応すれば良いでしょうか?

回答を見る
しん 2017/12/20

画像を記事中に挿入すると「画像を線で囲う」オプションを使っていないのに自動的にキャプションを含めた領域に薄いグレーの枠線が表示されてしまいます。
これは出さない方法はないでしょうか。

回答を見る
きょーちか 2017/11/15

詳しい解説にいつも助かっております。
スマホ画面で、画像を画面幅いっぱいに広げる方法があれば教えてほしいです。

回答を見る
テツ 2017/09/28

アイキャッチ画像を記事で見たときの大きさはどうすれば変更できますか?

必ず記事の横幅いっぱいに表示されてしまいます。

Regenerate Thumbnailsやメディア設定の画像サイズは設定変更してみましたが、変わりませんでした。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン