HOME → 3 WordPress → 04 運用とトラブル → 

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

WordPress Twenty Seventeen
文章の一部に画像が重なる問題への対処
子テーマの style.css を変更
 
記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。
文字と画像が被る
 
以下に、この現象が発生するケースと、対処方法を記録。
 

 

スポンサー リンク

 

 
 
下図の、テスト - 1 は メディアファイルへのリンクがない場合で、このケースでは文字と画像が被らないが、テスト - 2 のように メディアファイルへのリンクを設定すると、文字と画像が被る
 
メディアファイルへのリンクを設定して置けば、下図のように画像をクリックすると拡大表示されるので、この機能は使いたい。
文字と画像が被る
 
そこで、子テーマの style.css に、文字と画像が被らないようにマージンを設定して、強制的に画像位置を下げた。
/*-----------------------------------------------------------*/
/* 文字とメディア追加した画像が被らないように位置調整 */
/*-----------------------------------------------------------*/
img {
	border-style: none;
	margin-top: 2px;
}
/*-----------------------------------------------------------*/
 
2px のマージンを取った場合の間隔。(1px だと被る)
文字と画像が被る
 
5px のマージンを取った場合の間隔。(3px が最適と思われる)
文字と画像が被る
 
css を変更した時の注意点 = ブラウザのキャッシュをクリアすること。
キャッシュをクリアしないと変更した css が適用されないので、変更の都度キャッシュをクリアする。下図は、Chrome の『詳細設定』画面。
 
『キャッシュされた画像とファイル』にチェックを入れ、消去する。
文字と画像が被る
 

 

※:追加の問題点
文字の下の段に貼り付ける画像を、左寄せ or 右寄せ した場合、スマホで見ると文字と画像が重なる。
 

 

以上。
(2017.11.11)

 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください