SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

STINGER8カスタマイズ。範囲選択時の見た目を修正する方法

投稿日:2018年6月21日 更新日:

WordPressテーマのSTINGER8で、本文を選択したときに、サイドバーを含めて選択されたように見えるのが前から気になっていました。

affingerでも同じようになります。

画像で見てもらうとこんな感じです。

MacのSafariだとこうなるみたいです。
左側の本文を選択しているにもかかわらず、選択範囲が右側にまで及んでいるように見えます。

ChromeとFirefoxは大丈夫でした。

見た目だけの問題で、実害はないんですけどね。
気になるので、色々と試してみたところ、直し方が分かったのでシェアします。

範囲選択時の見た目の修正方法

CSSに以下を追加すれば、OKです。

@media print, screen and (min-width: 960px){
  article{
    float:left;
    max-width:100%;
  }
  /*一つ隣の要素でfloatを解除*/
  .st-main .st-aside{
    clear:both;
  }
}

articlefloatを指定したら直りました。

下の画像のように、ちゃんと本文だけ選択できるようになりました。