WordPressテーマSANGOの質問

目次やボックス内で下線がなくなってしまう件について

アバター
taku

いつもお世話になっております。
目次やボックス内で下線がなくなってしまう件についてのご相談です。
番号付きリストや番号無しリスト、ボックス内などで中に文字リンクがある場合、文字リンクの下線が消えてしまいます。
https://saruwakakun.com/sango/comments?id=4077
こちらの記事を参考にさせていただき、
.entry-content li a {
text-decoration: underline;
}
/*ホバー時の装飾*/
.entry-content li a:hover {
text-decoration: none;/*下線を消す*/
color: #色コード;/*色を変える*/
}
こちらのCSSを導入しましたがbox内のリンクの下線は消えたままとなっております。
また逆に目次に下線が出てきてしまい目次の下線もできれば消したいと思っております。ご教示いただけましたら幸いです。

カスタマイザーでデザイン設定
カスタマイザーでデザインや細かな設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2020/01/20

お世話になっております。
仰る通り、該当のコメントで紹介しているのは、箇条書き(リスト内)内でテキストリンクに下線を表示する方法です。

コンテンツ内のすべてのテキストリンクに対して下線を引きたい場合は、以下のCSSを追加します。

.entry-content a {
  text-decoration: underline;
}
/* ホバー時の装飾 */
.entry-content a:hover {
  text-decoration: none;
}

よろしくお願いいたします。

アバター
taku
2020/01/20

ご対応いただきありがとうございます。
早速導入させていただいたところ全てのリンクに下線を引くことができました。
ただこちらですと目次のリンクにも下線が出てきてしまうのですが、目次の下線を削除することはCSSの設定で可能でしょうか?
可能でしたらご教示いただけましたら幸いです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2020/01/21

失礼しました。整理すると以下のようになります。

/* リスト内のリンク/ボックス内のテキストも下線を表示 */
.entry-content li a, .sng-box a {
    text-decoration: underline;
}
/* ホバー時 */
.entry-content li a:hover, .sng-box a:hover {
    text-decoration: none;
}
/* 目次もリストになってしまうので下線を消す指定をする */
.toc_list li a {
    text-decoration: none;
}

参考までにSANGOのデフォルトの仕様では、段落内(pタグ内)のリンクにのみ下線が表示されるようになっています。
ボックス内のリンクで下線が表示されなかったのは「ボックスの中だから」ではなく、そのリンクがpタグ内になかったから…ということになります。
ボックスの中であっても、段落の中であればデフォルトで下線は表示されます。上のCSSは「pタグ内に限らず、ボックス内のリンクすべてに下線を引く」という指定になります

よろしくお願いします。

アバター
taku
2020/01/25

ご対応いただきありがとうございます。
早速導入させていただきました。
なおこちらのCSSを導入させていただいたところ目次のリンクには下線が出て来ませんでした。ありがとうございます。
ただ本文のリンク(ボックス内ではないところです)でリンクの下線がひかれているところとひかれていないところが混在するようになったのですが、こちらに関してはご教示いただいたようにタグを使っていないからなのでしょうか?
なお私は改行する際は「 」や「」を使用しています。

【例①】
こんにちは。
 
takuです。

【例②】
こんにちは。

takuです。

のような形です。
本文中にもリンクが出るようにするためには改行は~で行うのが望ましいでしょうか?何度も質問攻めにしてしまい申し訳ございませんが、ご教示いただけましたら幸いです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2020/01/25

正しいHTMLの使い方をする場合、本文の段落文はpタグ内に含めることになっています。
(ただし、見出し(h1〜h6タグ)、リスト(liタグ)、表(table)などに含まれるテキストは、pタグに含める必要はありません)
pタグで囲んだ文章は1つの段落とみなされ、その前後で改行が入ります。

WordPressのエディターで執筆をおこなった場合、基本的に自動で文章がpタグに囲まれるのですが、カスタマイズやSANGOの設定で自動整形をオフにしている場合、ご自身でテキストをpタグで囲む必要があります。

「本文のリンク(ボックス内ではないところです)でリンクの下線がひかれているところとひかれていないところが混在する」というのは、pタグに含まれている文章と、含まれていない文章が存在するということだと思います。
SANGOではpタグ内のリンクのみ下線が引かれるようになっているため、pタグに含まれていないリンクには下線が表示されません。

対策

対応としては、以下のいずれかになると思います。

①本文の段落をpタグに含めるようにする(改行にはpタグのみを使う)

②pタグに含まれていないリンクもすべて下線が引かれるようにする

こちらは、ちょっと副作用(意図しないリンクにまで下線が引かれてしまうこと)が怖いですが…。具体的にはCSSを以下のようにします。

/* 本文内のリンクすべてに下線をひく */
.entry-content a {
  text-decoration: underline;
}
/* ホバー時 */
.entry-content a:hover {
  text-decoration: none;
}
/* 目次リストの下線は消す */
.toc_list li a {
  text-decoration: none;
}

↑こちらだと「ただし目次のリンクの下線はオフにする」という指定をしています。もし他にも表示されてほしくないところにまで下線が引かれた場合、同じように「ここは下線を非表示にする」というCSSを追加する必要があります。
よろしくお願いします。

アバター
taku
2020/01/25

ご対応いただきありがとうございます。
解決いたしました。
色々とお手数をおかけしてしまい申し訳ございません。
優しく教えていただき誠にありがとうございました。
今後とも宜しくお願いいたします。

サルワカくん
サルワカくん
2020/01/26

解決したようで良かったです!
よろしくお願いいたします。