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

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

ここでは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%にした画像

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

5.独自テンプレートを使う場合に注意する事

このテーマは親テーマの子テーマとしてテンプレートを作成しています。

①スマホ表示の時に画像が画面からはみ出ない様にする。

②TinyMCEで画像を操作した場合に、その操作に対応するCSSを設定する必要がある。

上記の様な課題は子テーマに設定しなくても親テーマにその設定が入っているので問題ありませんが、独自テーマの場合はこれらを設定してあげる必要があります。

 

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

/*****************************************/
/* image 設定 */
/*****************************************/
.____img_________{}/* スタイルを見易くする為区切り */
img{
	box-shadow:none;   /* イメージに影が付くのを削除 */
max-width:100%;
	height:auto;}
img.waku0{
	border-radius:0;
	border:1px solid #8b8682;}
img.waku5{
	padding:5px;
	border-radius:0;
	border:1px solid #8b8682;}
img.alignleft{
	float: left;
	margin: 5px 16px 0 0;
	margin: 0.3125rem 1rem 0 0;}
img.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;}
img.alignright{
	float:right;
	margin:5px 0 0 10px;
	margin:0.3125rem 0 0 0.625rem}

※1.max-width:100%;height:auto;の指定

上記は画像が画面からはみ出た場合は100%で表示しろ!という指定です。

これを入れる事により、スマホ画面での画像のはみ出しが無くなります。

※2.img.alignleft等の設定

画像の位置をTinyMCE画面で変更した場合に付くクラスです。

このクラスが付いて時にどの様に表示するか?を指定しています。

 

5-2.style.cssに同様の設定をします。

/****************************************
Imagesの設定
*****************************************/
.editor_style img{
	box-shadow:none;
	max-width:100%;
	height:auto;}
.editor_style .waku0 {
  border-radius:0;
	border:1px solid #8b8682;}
.editor_style .waku5 {
  padding: 5px;
  border-radius:0;
	border:1px solid #8b8682;}
.editor_style img.alignleft{
	float: left;
	margin: 5px 16px 0 0;
	margin: 0.3125rem 1rem 0 0;}
.editor_style img.aligncenter{
	display: block;
	margin-left: auto;
	margin-right: auto;}
.editor_style img.alignright{
	float:right;
	margin:5px 0 0 10px;
	margin:0.3125rem 0 0 0.625rem}

以上の設定で、独自テンプレートでも画像のハンドリングがうまくできる様になります。