Twenty Seventeen 文字と画像が被る 問題への対処

記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。

下図の、テスト - 1 は メディアファイルへのリンクがない場合で、このケースでは文字と画像が被らないが、テスト - 2 のように メディアファイルへのリンクを設定すると、文字と画像が被る。

メディアファイルへのリンクを設定して置けば、下図のように画像をクリックすると拡大表示されるので、この機能は使いたい。

/*-----------------------------------------------------------*/
/* 文字とメディア追加した画像が被らないように位置調整 */
/*-----------------------------------------------------------*/
img {
	border-style: none;
	margin-top: 2px;
}
/*-----------------------------------------------------------*/

2px のマージンを取った場合の間隔。（1px だと被る）

5px のマージンを取った場合の間隔。（3px が最適と思われる）

css を変更した時の注意点 = ブラウザのキャッシュをクリアすること。
キャッシュをクリアしないと変更した css が適用されないので、変更の都度キャッシュをクリアする。下図は、Chrome の『詳細設定』画面。

『キャッシュされた画像とファイル』にチェックを入れ、消去する。

以上。
(2017.11.11)