こんにちは。

まずは該当ページのURLをご提示ください。

こんばんは

こちらです。

よろしくお願いいたします。

https://otokomobigaku.com/

こちらのページです。

https://otokomobigaku.com/5425.html

ちょっと対処療法的ですが、下記のCSSを子テーマのstyles.cssに追記してみてください。

.entry-content .wp-caption{
  width:auto!important;
}

PC表示したときの画像が右寄りになる現象も改善されると思います。

＞わいひらさん

実は僕も同様の現象に困ったことがあります。

.entry-content直下ではなく独自のブロッグなどの中でキャプション付きの画像を挿入すると、style="width:◯◯px;"（画像の実寸サイズ）が強く効いてしまうという感じです。

キャプション付きの画像の正しい挿入方法はなにかあるのでしょうか？

みるみ さん　わいひら さん

横からすみません。

なんとなく、メインカラムのスキンのマージンのCSSの指定が気になりました。

.entry-content > * {
margin-right: 2em;
margin-left: 2em;
}

ピクセル指定にするか、margin指定をやめて、メインカラムのpadding指定にして、見出しだけマイナスマージンにするとかするというのはいかかでしょう？

スキンでは、見出しと本文のインデントを付けたいみたいなので・・

でもマイナスマージンだと、モバイルはメディアクエリでマージン消さないといけないですけども。

あっ！ピクセル指定でもダメっぽい。

やっぱり、パディングなのかな・・

メインカラムのpaddingもem指定なんですね・・

.main {
padding: 1em 3em;
}

↓ のスキンの CSS が原因です。

.entry-content > * {
    margin-right: 2em;
    margin-left: 2em;
}
@media screen and (max-width: 480px) {
	.entry-content > * {
		margin-right: 1em;
		margin-left: 1em;
	}
}

この CSS の後で margin を上書きするといいように思えます。

.entry-content .wp-caption {
  margin: 1.4em auto;
}

それと、プラネット さんのサイトは、子テーマが使われていません。子テーマをダウンロードし、親テーマの設定内容を子テーマに移行するのがおすすめです。

style="width:◯◯px;"（画像の実寸サイズ）が強く効いてしまうという感じです。

親テーマで max-width: 100%; の指定があるため、問題ないと思います。

Akira さん

左右のマージンをautoにすれば収まるんですね。 ? 

でも、見出しの幅と同じ幅になりますか？

ちょっと、不揃いな気も・・

本文の幅と同じにしたいような・・

みなさん、ありがとうございます。

本日、夜に試してみたいと思います。

プラネット さん

もし、スキンの問題だとすると、他にこのスキンをお使いになられている方にも同様の症状が出てしまう可能性があると推測されます。

なので、私は、対処療法的に修正するのではなく、わいひらさんが修正くださるのをお待ちになった方が良いと思います。

対処療法的に修正されてしまうと、症状を見ることができないので。

leafytreeさん

ありがとうございます。

しばらく待ってみます。

本文の幅と同じにしたいような・・

キャプションなしの画像と同じく左右に余白を取りたい場合は、このような CSS でいいはずです。メディアクエリの書き方は、スキンの制作者さんに合わせました。

.entry-content .wp-caption {
  margin: 1.4em auto;
}

.entry-content .wp-caption {
  max-width: calc(100% - 2em*2);
}

@media screen and (max-width: 480px) {
  .entry-content .wp-caption {
    max-width: calc(100% - 1em*2);
  }
}

@akira さん

マージン分を差し引いた値をコンテナのwidthの最大値にするのですね。 ? 

みなさんありがとうございます。
最初のAkiraさん案の方で、tecurioスキンをすべて修正しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

わいひらさん

ありがとうございます。

最新ファイルをダウンロードしました。

その後どうすれば良いでしょうか。

プラネットさん

FTPソフトを使って、サーバーにアップロードします。

わいひらさんのレスに記載のある「FTPでのアップデート方法はこちら。」のリンクをクリックすると、案内のページが開きます。

FTPソフトはいろいろありますが、FFFTPは日本語なので、一番使い易いのではないかと思います。（私は別のを使っていますが・・）

「FFFTP 使い方」で検索すれば、初心者向けの記事がたくさんヒットするので、わかりやすい記事を読まれると良いかと思います。

ちなみに、XサーバーのFFFTPの設定の案内は以下のページです。

FFFTPの設定

最初は難しく感じるかと思いますが、だんだん慣れてくるかと思います。

Youtubeにも動画があるみたいですね。

leafytreeさん

ありがとうございます。

FFFTPの設定をしていたのですが、説明通りの表示がされなくなり、途中からうまくいかなくなりました。

今の状態のままで、後日、テーマが更新された時には、自動的に変更されるのでしょうか。

プラネットさん

FFFTPで、上手くサーバーに接続できなかったという事でしょうか？

サーバーと接続されずに、作業を中止しても、特に影響はないと推測されます。

たぶん、次のアップデートの時には、今回の修正も含まれるかと思いますので、いままでどおりのアップデートのやり方でいいと思います。

FFFTPでサーバーと接続されると、サーバー内のファイルが右側のウインドウに表示されるかと思います。

それもされなかった、というのであれば、特に問題はないと思われます。

自動アップデートまで待てない、と言う場合は、Akiraさんが最後に書いたコードを子テーマに設定すれば、反映されるかと思います。

ダッシュボードの「外観」→「テーマエディター」とたどると、「テーマの編集」の画面が開くので、Akiraさんの書いたコード

.entry-content .wp-caption {
margin: 1.4em auto;
}

.entry-content .wp-caption {
max-width: calc(100% - 2em*2);
}

@media screen and (max-width: 480px) {
.entry-content .wp-caption {
max-width: calc(100% - 1em*2);
}
}

を

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

の直下に貼り付けて

「ファイルを更新」のボタンをクリックします。

自動アップデートの後は、このコードは要らなくなるので、時期を見て削除します。

FFFTP、または、他のFTPソフトでもいいのですが、お時間のある時に使い方の記事等を読んで、使えるようになっておくと、けして損はないと思います。

Xサーバーであれば、FFFTPでの接続について、サポートを利用してもいいのではないかと思います。

leafytreeさん

色々ありがとうございます。

Akiraさんが書いてくれたコードを貼り付けたらうまくいきました。

後日、テーマ更新後に削除しておきます。

FFFTPはまた勉強しておきます。

お世話になりまして、ありがとうございました。

みなさん、ありがとうございました。