ここでは本文中に画像を挿入する方法、画像に枠を付ける方法、画像のレスポンシブ表示について解説していきます。
1.画像を挿入する方法
画像を取り込む方法は下記の２つの方法があります。
①画像をWordPressのメディア機能を使って取り込む
写真等はこの方法で取り込んでいます。
メディアにある画像を本文中に取り込むには下記アイコンで画像を取り込みます。
②OnePress Image Elevator等のプラグインを使って取り込む
OnePress Image Elevatorのインストールと画像管理
上記のプラグインはクリップボードにある画像をペーストすると本文中に画像が取り込まれます。
また同時にメディアライブにも登録されます。
本サイトでは画面キャプチャ等はこのプラグインで取り込んでいます。
①に比べて非常に簡単に画像が取り込めます。
2.画像枠をTinyMCE Advancedのスタイルに登録する
1-1.ビジュアルエディタのCSSに下記を追加します。
本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。
理由は下記ドキュメントを参照してください。
親テーマが「editor-style.css」の時のスタイル機能の使い方
＜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.style.cssに同様の設定をする。
/**************************************** Imagesの設定 *****************************************/ .entry-content img{box-shadow:none;} .entry-content .waku0 {border-radius:0;border:1px solid #8b8682;} .entry-content .waku5 {padding: 5px;border-radius:0;border:1px solid #8b8682;}
3.画像枠の設定方法
項番２の設定で2種類の枠がスタイルに登録されています。
よって画像を選択後、下記アイコンからスタイルを選択します。
・img.woku0：画像と枠にスペースがない物
・img.waku5：画像と枠に5pxのスペースがある物
3-1.img.woku0を選択した例
これはキャプチャ画像等を判り易くするために使っています。
<表示例＞
枠を付けると下記になります。
3-2.img.waku5を選択した例
これは写真画像等によく使います。
<枠がない画像>
枠を付けると下記になります。
4.画像の表示サイズについて
ここでは画像サイズの指定方法によって表示形式が異なる事を説明します。
ブラウザの表示サイズを変更して、下記画像の表示がどの様に変わるか？を試してみてください。
4-1.画像サイズの指定の仕方
画像をクリックして、TinyMCEの下記のアイコンをクリックします。
すると下記ダイアロゴが表示されます。
上記は画像サイズが固定で指定されています。
これを下記の様に変更する事も出来ます。
上記は画像サイズを画面サイズ80%にした例です。
4-2.画像サイズが640×480の画像
上記画像は画面幅を変えると、画面幅が640pxまでは固定表示、それより小さくなった場合は自動縮小されます。
4-32.画像サイズが80%の画像
上記画像は画面幅を変えると、画面幅に応じて画像が縮小されます。
5.独自テンプレートを使う場合に注意する事
画像をクリックすると下記メニュが表示されます。
左側のボタンを利用する事により画像表示の位置が指定できます。
・alignleft ：配置位置（左）
・aligncenter：配置位置（中央）
・alignright ：配置位置（右）
・alignnone ：配置位置（なし）
独自テンプレートの場合は上記のクラスが設定されてないので、下記の様な設定が必要になります。
5-1.my-editor-style.cssに下記を設定する。
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.aligncenterの場合はブロック要素に変更して左右からの自動位置でセンター配置を実現しています。
5-2.style.cssにも同様の設定をします。
border-radius:0; border:1px solid #8b8682;} .entry-content .img.alignleft{ float: left; margin: 5px 16px 0 0; margin: 0.3125rem 1rem 0 0;} .entry-content img.aligncenter{ display: block; margin-left: auto; margin-right: auto;} .entry-content img.alignright{ float:right; margin:5px 0 0 10px; margin:0.3125rem 0 0 0.625rem}
以上の設定で、独自テンプレートでも画像のハンドリングがうまくできる様になります。
