記事作成時、挿入したメディアに代替テキストを入力すると、表示した際に画像がズレる現象に困っています

なんとなしに想像はできますがいまいちパッとしないので、具体的なソースか問題の出ているページのアドレスを公開してもらうのが手っ取り早いです。

つまりキャップションがついてない画像は左右中央に配置できるが、キャプションがついてると中央や右にできないということですかね？

もしこういうことなら、単純にcaptionがある時のスタイルを書けばよいだけかとは思うんですが、多分キャプション付きでも関係なく.alignleftや.alignrightで右に回り込んだり左に回り込んだりできると思うんですけどね。

実質ここらに関係するのは、その周りにある要素にclearが入っているかどうかとか.alignleft(.alignright)が正しくついているかどうか、またマージンの指定やwidthとその他諸々の条件などおかしいなと思う要素の周りの要素に影響されることもありますので、単純にここが原因というのは答えにくいです。見ればすぐわかると思うんですけどね。

わいひらさん、Hidekichiさん、ありがとうございます。
お手数をおかけいたしまして申し訳ありません。

-キャッシュクリア-

トピの後、以前にHidekichiさんにアドバイスいただいた、テーマを変更することでキャッシュがクリアされる事も思い出し、テーマを変更、再度Simplicityに戻してみる。

Safari・Firefox・Chrome、三つのブラウザのキャッシュをクリア。

パソコンの再起動。

わいひらさんのページでアドバイスがある、相性の悪いプラグイン（画像キャッシュ系・表示を早くする系）などは気をつけて使用しておりません。

-その後、わかった事-

キャッシュをクリアした場合、どのブラウザでも正常に表示されます。

再度、ログインをして記事内容を変更、更新すると、新しいウィンドウ・別タブで開いてもChromeだけ表示がずれます。

Chromeの「Clear Cache」でリロードしてもずれたままです。

ずれているページをシークレットモードで表示すると、こちらは正常になっています。

Safari・Firefoxに関しては、記事内容を変更、更新しても正常に表示されています。

パソコンと同様に表示されるタブレットで見ても正常でした。

-サイトのアドレスと、事象が出ていた時のスクリーンショットです-

サイトアドレス
https://3kabouzu.com/urayomi01/

記事作成画面
https://drive.google.com/open?id=0BwiMtoghJZo6QkUtd2VxOWJGQkk

代替テキスト入力画面
https://drive.google.com/open?id=0BwiMtoghJZo6WS1ndkhNRktUQUU

代替テキストあり表示
https://drive.google.com/open?id=0BwiMtoghJZo6blY0c0lYWGVma1E

代替テキストなし表示
https://drive.google.com/open?id=0BwiMtoghJZo6N0EzNTRWSUphY1E

皆さんを参考にしながらちょこちょことcssをいじる程度のスキルながら、ブラウザごとにコードを見比べて見たのですが相違はないと思いますし、どうも、当方のパソコン環境の問題ではないかと考える次第です。

フォーラムにはたくさんの質問があり、その対応にお忙しい中、無駄なお手数とご負担をかけてしまいまして、大変、申し訳なく存じております。

いつも惜しまず、様々なアドバイスをくださるHidekichiさん。本当にありがとうございます。

そして、わいひらさん。不要なご負担をかけてしまい申し訳ありません。このような事でのお体へのご負担も案じております。寒くなってきますので、ご自愛なさってください。

> Chromeの「Clear Cache」でリロードしてもずれたままです。

Chromeはデベロッパーツール開いてネットワークタブにあるDisable chacheをチェックするだけでキャッシュされなくなります。デベロッパーツール開いているときだけですかね。これが案外便利です。

chromeはひとまず置いておいて、キャッシュをクリアすればひとまず正しく表示されるということならそのcssなりは間違ってはないんだろうと思います。
実際にキャプションが入っているテストページみたいなものを公開してもらえれば確認しやすいですけれども。

それから別件ですがカエレバのリンクがhttpになってます。
それとどこの部分かは不明ですがiframeが読み込まれていないみたいな感じでコンソールでエラーが出てるっぽいです。

Hidekichiさん、わいひらさん、ご返信ありがとうございます。

わいひらさんお手間かけまして申し訳ありません。

>今は、不具合が出ていない状態なんですよね？代替テキストが出ていないので。
>不具合が出ている状態にできますか？

通常は、Simplicityのカスタマイズ設定項目　「Alt属性値をキャプション表示」　を管理者のみにしています。
現在、全てのユーザーに表示と変更しましたので見えるかと思います。

使用する画像は、主にPixabay Imagesから検索して挿入しています。
検索文字がそのまま画像のタイトルになり、その際、代替テキストのみ入力し、キャプションは入力していません。

今回、テスト的にキャプションに文字を入力（Pixabay Images）して表示したところ、
キャプションの枠が優先されるのか、センター表示されました。
しかし、代替テキストのみ入力してキャプションを入力しないと左寄せになります。

この状態がわかりやすいように、追加でh2見出しの下にイラスト画像を、サルネイムサイズ150×150で
代替テキストのみ入力して挿入してみました。

記事には２点の画像が挿入された状態で、トップ画像はセンター表示、サルネイムは左寄せに見えます。

これらは全て、私のChromeでの通常表示での見え方ですのでご了承ください。

>一応確認なんですが、「Alt属性値をキャプション表示」関連の不具合なんですか？

キャプションを表示する。したい。できない。ではないです。
記事を編集し、挿入した画像に代替テキストを入力、そして、プレビューなり更新した場合のみズレる。
しかも、私のChromeでの通常表示だけがズレる。シークレット表示では正常という現象です。
重複しますが、他のブラウザはどのモードでも正常に表示されています。
ズレ具合はトピに貼った、リンク先のグーグルドライブの画像の通りです。

>不具合ページは以下のページでよいのでしょうか、
>https://3kabouzu.com/urayomi01/

はい、このページとあと一つぐらいしか縦長の画像は使っていないので、左寄せになっているのがわかりました。
私のChromeでの通常表示だと、横長の画像もズレてはいるのですが、ほぼいっぱいに表示されるため気にならなかったのです。

代替テキストは、わいひらさんの記事を見てからグーグル的に重要なんだとわかり、入力するようにして、その後、過去記事も編集時には気をつけて更新するようにはしていますが、全て入力はされていません。
なので、代替テキスト欄が空白の画像は指示通りセンターにきています。

Hidekichiさん

いつもありがとうございます。
気がつきませんでした。ふと、自分のアドレスバーを再確認したらおっしゃる通り、あらら、鍵表示が無くなってました。
ありがとうございます。調べて修正いたします。

>Chromeはデベロッパーツール開いてネットワークタブにあるDisable chacheをチェックするだけでキャッシュされな>くなります。デベロッパーツール開いているときだけですかね。これが案外便利です。

活用させていただきます。

>それとどこの部分かは不明ですがiframeが読み込まれていないみたいな感じでコンソールでエラーが出てるっぽいです。

自分ではiframeタグを使って何かをするってのはないので、怪しいところがわかりません…　不明です。（笑）
何かのプラグインではないかと思いますので、ボチボチ探ってみます。

chromeでも問題はないようです。firefox同様に表示されています。が、osの違いやバージョンの事もあるので何とも言えませんが僕の環境では言われているような問題は起こってないのでひとまずはそのままでも大丈夫ではなかろうかと思います。

もしかしてその下のおっさんの遺影みたいなやつが問題ならdisplay: inline-blockが問題です。

inline-blockのままでやるなら、

.hover-image {
    left: 50%;
    transform: translate(-50%);
}

を追加すれば全部センターになります。
センターにするものを指定したい場合は、

.hi--center {
    left: 50%;
    transform: translate(-50%);
}

として、<div class="hover-image　hi--center">となるようにすれば良いですが、これって自動でなってるんでしたっけ？
もし自動でなるならjQieryで入れることはできると思います。

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

>もしかしてその下のおっさんの遺影みたいなやつが問題ならdisplay: inline-blockが問題です。

このおっさんの遺影は、代替テキストのみ記入し、キャプチャーは無しです。
これまでこのやり方で横長画像ばかりだったので、ちょっと気付かなかったのです。

ゴリラの写真の方は、代替テキストとキャプチャーを挿入しています。
キャプチャーを挿入して初めて指示通りセンター表示されました。

>これって自動でなってるんでしたっけ？
>もし自動でなるならjQieryで入れることはできると思います。

Simplicityをデフォルトの状態で使用していますので、このあたりはちょっとわからないので申し訳ないです。
超素人状態なので、ビジュアルモードで記事を作成 → h1見出しの後に画像を挿入 → h2見出し → 記事を作成と、このような流れです。cssに関しても、皆さんのをコピーして、時に画面を真っ白にしながらやってます（笑）

なので、Hidekichiさんがおっしゃるようにするのか、もしくは皆さんが見ても表示上、問題がなければ、
私のchromeの表示の問題だけなので、そのまましばらく様子を見るかですね。

display: inline-blockに関しては、勉強しながらやってみます。（お礼）

ちなみに前レスで答えた.hi–center(仮名)をjQueryで入れるには、

サンプル: imgを探してその親にクラスを入れる | jsFiddle

こんな感じかと。

imgタグに.addCenterを入れます。

<img class="addCenter size-thumbnail" >

jqueryは、#the-contentの中の.addClassがついているimgタグを探します。で、その親に.hover-imageがあればそこに.hi–centerを追加します。

style.cssに.hi–centerを追加しておく必要があります。PHPでhover-imageが入っているのであればサンプルどおりで良いかと思いますが、もし何かしら別のスクリプトで入れてある場合は、最初らへんにでてくる、

$(function() { の部分を
$(window).on("load", function(){ に変更してください。

サンプルの画像はホバーとか面倒なものは入れてませんのであしからずご了承ください。

☓ #the-contentの中の.addClassがついている
○ #the-contentの中の.addCenterがついている

わいひらさん、Hidekichiさん、ありがとうございます。

もちろんです。お手数をおかけいたしまして申し訳ないです。

しかし、奥深くで何かがあるんでしょうね。サイト上で探しまくりましたけど、WP環境でこんな状態というか、事象が引っかかってこないので、私の中では？？？でした。

一応、トピックに書きましたように、どうも、キャッシュの問題でもなく、Simplicity側の問題ではなく、特定のブラウザのごく一部の環境で起きる事象が起きていても、問題なくサイト所見者には通常表示される事がわかれば、今後、同様の現象が起きた方への参考になるかと思いまして、出ている現象を事細かに記した次第です。

ただ、管理者側で見ると、指示通りに画像の位置がなってない状況は、気持ち悪い感じはします。右って言ってるのに左に張り付いて動かない感じが…（笑）

なので、時間が空いた時に、Hidekichiさんのアドバイスを勉強しながらボチボチとやってみます。

ありがとうございました。

わいひらさん、寒くなりますのでお体に気をつけてください。