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

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

このページでは、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">

60 COMMENTS

アバター
としま 2022/02/06

画像の影(シャドウ)が変更できない。

お世話になります。 今回画像の影をデフォルトのものより少し濃くしようと思い、よくある質問の中で回答されていた以下を試して見た所何も変化がありませんでした。 /* ↓ 線の色を変更する例 */ img.img_border { border-color: #b9b9b9; } /* ↓ 画像の影を濃くする */ img.shadow { box-shadow: 0 3px 6px rgba(0,0,…

回答を見る
アバター
RYO 2021/03/18

画像表示サイズを小さくした場合に中央揃えにしたい

いつもお世話になっております。 画像の表示サイズを変更した場合に中央揃えにする方法を教えていただきたくご連絡いたしました。 私のサイトでは,画像に対して下記CSSを適用しています。 img { pointer-events: none; } 上記CSSだけでは画像上のリンクが機能しなくなるため,下記CSSもあわせて使用しています。 a { display: inline-block; } しかし,…

回答を見る
アバター
サイトウ 2021/02/13

スマホで、コンテンツ内の画像を画面幅いっぱいに広げたい

こちら↓の質問ではpタグに「img-full」というクラス名を追加する方法を紹介なされていましたが、何か自動的にクラス名を追加し、画面幅いっぱいに画像を広げる方法などがあれば教えていただきたいです。 https://saruwakakun.com/sango/comments?id=166 多少レイアウトが崩れてしまう可能性があるとしても構いません。

回答を見る
アバター
サイトウ 2021/02/13

スマホで、コンテンツ内の画像を画面幅いっぱいに広げたい()

https://saruwakakun.com/sango/comments?id=166

回答を見る
アバター
たか 2020/07/26

画像の線や影を少し濃くしたい

お世話になっております。 画像のスタイルで線や影を付けられますが、色が少し薄いように感じます。 線も影も、もう少し濃くすることはできるのでしょうか?理想はサルワカさんのブログの色合いが良いと思っています。 https://saruwakakun.com/html-css/wordpress/xserver

回答を見る
アバター
RYO 2020/06/06

「画像を少し小さく」の最大幅を変更したい

このページ上の解説どおりにもう一度試してみたところ,私が行いたかったことができました。 そのため,先程した質問への回答は不要です。 申し訳ありません。 追加で別の質問なのですが,「画像を少し小さく」を選択した場合に「400px以下」に変更したい場合どうすればよろしいでしょうか。 お手間を取らせてしまい,大変申し訳ありません。

回答を見る
アバター
NEXTist 2020/05/27

Page Speed Insitghtsの点数が低い

突然すみません‍♂️SANGOが使いたくてサルワカさんに憧れてブログを始めました☺️ブログ歴は半年くらいでプログラミングはわからず初心者です サルワカさんのサイトで勉強させていただきながら、毎日コツコツと記事を積み重ねていたのですが、PageSpeed Insightsで30%を下回ってしまい、サルワカさんの記事(WordPressを高速化する12の方法 – 表示速度を上げるテクニック)を読みなが…

回答を見る
アバター
huhu 2020/03/06

画像下に出るキャプションのリンクの色とサイズについて

画像下に出るキャプションのリンクの 色とサイズは変えられますか?

回答を見る
アバター
headcocoro 2019/07/25

mobile表示での画像回り込み(alignleft,alignright)解除について

スマホで閲覧した際に、画像にalignの左右が設定されていた場合は、そのまま画像を小さくして文字を回り込ませる仕様のようですが、スマホなどモバイル表示の場合は.entry-content内の画像についている.alignleft, .alignrightを解除する方法を教えていただきたいです。 どうぞ宜しくお願いいたします。

回答を見る
アバター
暇人 2018/10/04

画像の枠の色を変更したい

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

回答を見る
アバター
ヨウヘイ 2018/08/02

すべての画像に影をつけたい

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

回答を見る
アバター
あか 2018/07/31

エディターに挿入した画像のサイズが小さい

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

回答を見る
アバター
nao 2018/06/14

記事中の画像を押下で大きく表示させたい

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

回答を見る
アバター
しん 2017/12/20

画像のキャプションを挿入したときの枠線を消したい

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

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

スマホで、コンテンツ内の画像を画面幅いっぱいに広げたい

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

回答を見る
アバター
テツ 2017/09/28

タイトル下のアイキャッチ画像をもとのサイズで表示したい

アイキャッチ画像を記事で見たときの大きさはどうすれば変更できますか? 必ず記事の横幅いっぱいに表示されてしまいます。 Regenerate Thumbnailsやメディア設定の画像サイズは設定変更してみましたが、変わりませんでした。

回答を見る

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。