HOME  /WordPress(応用)
 /ビジュアルエディタで画像を挿入する方法
2020年03月26日

ビジュアルエディタで画像を挿入する方法

ここでは本文中に画像を挿入する方法、画像に枠を付ける方法、画像のレスポンシブ表示について解説していきます。

1.画像を挿入する方法

画像を取り込む方法は下記の2つの方法があります。

①画像を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の設定で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}

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

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。しかし「ビジュアルエディタ(TinyMCE)」を使い続ける方法を解説しています。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。