Ver1.3.1をリリースしました(11/22)

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

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

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

5 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;
}
}

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

返信する

コメントを残す

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