HOME  /WordPress(応用)
 /イメージの設定とレスポンシブ対応
2017年10月30日

イメージの設定とレスポンシブ対応

ここではTinyMCEでどの様にイメージの操作を行うかを解説しています。

1.イメージに関する設定

1-1.my_editor-style.cssに下記を設定する。

/*************************************************************/
/* image 設定 */
/*************************************************************/
img{
  box-shadow:none;}  /* イメージに影が付くのを削除 */
img.waku0 {
  border-radius:0;
  border:1px solid #8b8682;}
img.waku5 {
  padding: 5px;
  border-radius:0;
  border:1px solid #8b8682;}

※1.イメージに影が付くのをなくす為に box-shadow:noneを入れている。

※2.waku0は、イメージの外側にスペース0を枠線を引く。waku5は、イメージと枠の間に5pxの余白を入れる。

1-2.css¥editor-style.cssに同様の設定をする。

/****************************************
Imagesの設定
*****************************************/
.contents img{box-shadow:none;}
.contents .waku0 {border-radius:0;border:1px solid #8b8682;}
.contents .waku5 {padding: 5px;border-radius:0;border:1px solid #8b8682;}

2.イメージの取り込み方

イメージを取り込む方法は下記の方法があります。

①画像をWordPressのメディア機能を使って取り込む

写真等はこの方法で取り込んでいます。
ドキュメントに取り込んだ画像を表示する場合は下記アイコンから画像を選択します。

②OnePress Image Elevator等のプラグインを使って取り込む

画面キャプチャ等はこの方法で取り込んでいます。

このプラグインはドキュメントに直接画像を取り込むと共に、メディアライブにも登録します。

3.イメージに枠を付ける方法

項番1の設定で2種類の枠がスタイルに登録されています。

img.woku0:画像と枠にスペースがない物

img.waku5:画像と枠に5pxのスペースがある物

よって画像を選択後、下記アイコンからスタイルを選択します。

3-1.img.woku0を選択した例

これはキャプチャ画像等を判り易くするために使っています。

<表示例>

に枠を付けると

3-2.img.waku5を選択した例

これは写真画像等によく使います。

<枠がない画像>

<img.waku5を付けた画像>

4.レスポンシブな画像にする方法

この方法はスマホで見ると画像が大きすぎる場合に有効な方法になります。

上記の飛行機に画像に注目して下さい。

ブラウザの画面幅をマウスで縮小すると、画面一杯になるまででは画像幅は固定、しかしそれ以降は画面幅に合わせて画像が縮小します。

確かにこれでも問題はないのですが、総ての画像幅に対してレスポンシブにしたいケースもあります。

これを実現する方法は下記になります。

①画像を選択しTinyMCEの下記アイコンをクリックします。

②下記ダイアログが表示されます。

※1.サイズは640×480になっています。

※2.これを下記の様に変更します。

上記は画面幅80%の画像にしろ!という事を示しています。

③画面幅80%にした画像

上記画像は画面幅を変えると、画面幅に応じて画像が縮小されます。