見出しのデザインにテキストが重なってしまいます。

PR 2018/3/24

このトピックには3件の返信、1人の参加者があり、最後にtoruiにより8年、 4ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2018年3月21日 5:18 PM #59392
  
  torui
  ゲスト
  
  いつもお世話になっております。
  見出しについて教えていただいてもよろしいでしょうか。
  
  FontAwesomeを使って見出しを作成したのですが、テキストと重なってしまってとても見にくくなっております。
  テキストを少し右へずらしたいのですが、padding-leftなどを入れてはみたのですが反映されません。
  
  もし問題がございましたら教えていただけましたら幸いです。
  
  下記サイトの中段くらいにある、「マイクの専門用語」の項目の中の「指向性」などの項目が矢印とテキストが重なってしまっております、
  http://singer-mixer.com/dynamic-condenser-microphone/
  
  よろしくお願いいたします。
- 2018年3月21日 5:55 PM #59394
  Akira
  ゲスト
  position: absolute; を使われているのが原因です。
  
  h4:before に指定されている CSS を下記のものにご変更ください。
```
h4:before {
  font-family: 'FontAwesome';
  content: "\f0a9";
  font-size: 1.75em;
  position: relative;
  left: 0;
  top: 0.1em;
  color: #FF9100;
  margin-right: 8px;
}
```
  最後の margin-right: 8px; でテキストとの余白を調整できます。
  
  また、子テーマの style.css の 1 番下に、余計な } があります。これ以降に CSS を追加すると不具合が起きる可能性があるため、削除されることをおすすめします。
- 2018年3月21日 6:01 PM #59395
  
  Akira
  ゲスト
  
  ごめんなさい。間違ったことを書いてしまいました。
  
  子テーマの style.css の 1 番下の } は、消してはいけません。メディアクエリを閉じるために必要なので、そのままにしてください。申し訳ないです。
- 2018年3月21日 8:00 PM #59396
  
  torui
  ゲスト
  
  無事解決しました！
  本当にありがとうございました。
投稿者

投稿

3件の返信スレッドを表示中

トピック「見出しのデザインにテキストが重なってしまいます。」には新しい返信をつけることはできません。