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

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

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

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

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

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

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

画像を小さくする

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

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

画像を少し小さくする

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

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

画像を線で囲む

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

画像に影をつける

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

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

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

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

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

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

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

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

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

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

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