Ver1.6 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">

26 Comments

テツ

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

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

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

返信する
サルワカくん

そちらは不具合ではなく、仕様のためですね。
お手数ですが、子テーマのstyle.cssに以下のコードを貼って頂けますか?
.post-thumbnail img {
width: auto;
}
その後にキャッシュを削除して再読込すれば、横幅いっぱいに表示されることはなくなるはずです。

返信する
サルワカくん

画像の左右のちょっとした隙間を無くす、ということですかね。
これが簡単なようで、できないのです。
(正確にいうとできるのですが、他の部分でデザイン崩れが生じる可能性大です)
安全にやるとすれば、下記のようなCSSをstyle.cssに追加しておいて、
横いっぱいに表示させたい画像(imgタグ)を囲むpタグに「img-full」というクラス名を追加するという方法ですかね。

@media screen and (min-width: 400px) {
.entry-content .img-full {
margin-left: -15px;
margin-right: -15px;
}
}

分かりづらいと思うのであまりおすすめしません。

返信する
しん

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

返信する
サルワカくん

キャプション付きで画像を挿入すると枠線が表示される仕様となっております。
消すためには、子テーマのstyle.cssなどに
#main .entry-content .wp-caption {
padding: 0;
border: none;
}

と追加すればOKです。
よろしくお願いします。

返信する
りの

キャプション付き画像で枠線が気になるので
#main .entry-content .wp-caption {
padding: 0;
border: none;
}
と追加してみましたが消せませんでした。
何が原因かわかりますか。

返信する
サルワカくん

合ってますよー。
原因として考えられるのは①キャッシュを削除していないか、②CSSが読み込まれていないか、③どこかの@media(){~}の中に入り込んでしまっているか、などですね。
②は、ソースコードで.cssファイルをチェックしてみると分かるかと思います。

返信する
健ママ

お世話になっております。
画像の左右のちょっとした隙間を無くす方法について、もう少し詳しい説明をお願いします。
「img-full」というクラス名を追加する方法がわかりません。
回答、宜しくお願い致します。

返信する
Hiro

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

返信する
サルワカくん

「Regenerate Thumbnail」というプラグインを使えば、一括でSANGOサイズのサムネイルを生成してくれます!

返信する
あか

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

返信する
サルワカくん

SANGOの制約というより、WordPressのメディア設定ですね。
「設定⇒メディア」にて、「中サイズ」などの値を変えた後に、画像をアップロードすると、そのサイズに切り抜かれるようになります。
(「520×300」と「160×160」のサイズはSANGOが独自に追加したトリミング設定ですが、それ以外のサイズの画像はユーザーさんが自由に変えることができます)

返信する
ヨウヘイ

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

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

返信する
サルワカくん
.entry-content img {
  box-shadow: 0 3px 6px rgba(0,0,0,.2);
}

などとCSSを追加すればイメージ通りになるかと思います。

返信する
ヨウヘイ

お世話になります。

CSSに記述後、毎回の画像投稿に反映されてとても作業短縮になりました。
迅速なご対応ありがとうございます。

返信する
室蘭

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

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

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

返信する
サルワカくん

スマホが横向きかどうかを検知して、画像のサイズを変えるのは少しむずかしいですね…。申し訳ないです。

返信する
暇人

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

返信する
サルワカくん

以下のCSSを追加することで、変えることが可能です!

.entry-content .img_border {
    border: solid 3px #色コード;
}
返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です