サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2022年12月9日 00:10
お世話になっております。
cocoon にてHPを作成しております。 記事の中のリンク文字だけに下線でリンク先を作りたく
.element.style {
color: #333;
text-decoration: none;
border-bottom: 3px solid #000;
padding:3px 0px 3px 0px;
}
a:hover{
color: #333;
}
.entry-content a {
text-decoration: none;
border-bottom: 3px solid #000;
color: #000;
}
とCSSに書き込んだのですが、記事中の画像やブログガードにまで下線がついてしまいました。 文字だけに適用させたいです。 どうすればよろしいでしょうか？
ご教授くださいませ。よろしくおねがいします。
WordPressバージョン：6.1.1 PHPバージョン：8.1.13 ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.5.3 カテゴリ数：6 タグ数：2 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.3 style.cssサイズ：1781バイト functions.phpサイズ：203バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：5 Auto Post Thumbnail：1 Retina：0
2022年12月9日 00:37
border-bottomは罫線です、リンクの下線ではありません。
border-bottomは間違いなので削除して下さい。
text-decorationを削除すれば、記事中のリンク下に下線が表示されます。
.entry-content a {
/* 下線を消す */
text-decoration: none;
/* 下に罫線 */
border-bottom: 3px solid #000;
color: #000;
}
わいひら reacted
Topic starter
2022年12月9日 01:10
@chu-ya 様
ありがとうございます。
.entry-content a {
text-decoration: none;
border-bottom: 3px solid #000;
color: #000;
}
を消し
.entry-content a {
/* 下線を消す */
text-decoration: none;
/* 下に罫線 */
border-bottom: 3px solid #000;
color: #000;
}
に変えたのですが、文字リンクには下線が出るのですが、記事内の画像とブログガードにも下線がでてしまいます。
文字リンクだけ下線をつけたく、画像（リンクされている）などには下線をつけたくないのですが。どうすればよろしいでしょうか？
2022年12月9日 01:27
bbchanさん
ご要望がはっきりしませんので、以下のように仮定させていただきます。
- サイドバー等の記事本文以外の部分は、aタグのリンクの下線を消す
- 記事本文のaタグのリンクには下線をつける
（ブログカード等には下線をつけない）
a {
text-decoration: none;
}
:where(.entry-content) a {
text-decoration: underline;
}
なお、ご要望に文字色のことは記載されていませんでしたので、ご提示はしませんでした。
適宜ご調整いただければと思います。
（ご提示いただいたCSSでは、文字色も変更されているようですが、意図が不明でしたので）
ご要望と異なるようでしたから、ご放念ください。
わいひら reacted
2022年12月9日 01:48
@bbchan さん
CSSを理解されていないようなので、私のコードは@bbchanさんがコードの説明をしたにすぎません。
当然、コピペしても状況は変わりません。
文章で書いた事をして欲しかったです。
2022年12月9日 02:23
@bbchan さん
申し訳ありませんが、先の質問、やりたい事（要件）が全く伝わっていないです。
画像が添付され、書かれたCSSの意味が分かりました。
HTMLを理解している事を前提で回答します。
●要件
リンクの下線を、任意の色、太さにしたい。
●HTML
リンクを記述する際、識別の為、任意のclassを追加する必要があります。
ここではborderとします。
HTMLの記述例
Welcome to ＜a class="border" href="リンク先URL"＞Did You Know＜/a＞, bite-sized,
●CSS
classをborderとしたので以下になります。
a.border {
border-bottom: 3px solid #a4635e;
color: #333;
padding:3px 0px 3px 0px;
text-decoration: none;
}
●ご参考
https://hmaster.net/clink2.html
わいひら reacted
Topic starter
2022年12月9日 02:35
@chu-ya 様
ありがとうございます。
毎回リンクを挿入するたびにclassで挿入する以外にない感じですね？？
わたしが最初に投稿していたのだと画像などにも下線が入ってしまうので、それしかありませんよね 😣
2022年12月9日 02:37
chu-yaさん
ご要望がはっきりしませんでしたので、とりあえず最初にbbchanさんにご提示いただいたものは、考慮せずにご提示させていただきました。
いろんな方法をご提示しても良いのかなと。
2022年12月9日 02:46
bbchanさん
スマホからなもので、たくさん書くのがつらいです。
下線を離したいので、borderだったのですね。
例えば、「text-underline-position」を使用する方法もあると思います。
先程のものとマージしますと、以下のような感じです。
a {
text-decoration: none;
}
:where(.entry-content) a {
text-decoration: underline;
text-underline-position: under;
}
ベースラインより下に、下線が引かれます。
但し、間隔は固定です。
ご自分で下線の位置を調整したい場合は、「text-underline-offset」で指定しても良いと思います。
例えば、以下のような感じです。
a {
text-decoration: none;
}
:where(.entry-content) a {
text-decoration: underline;
text-underline-offset: 5px;
}
数字は適宜ご調整いただければと。
「text-decoration-thickness」を指定すれば、太さも指定できるかもですが、うろ覚えです。
試しておりませんので、うまくいかない場合は、すみません。
そして、もう寝ます。（既に布団の中からスマホで書いていますし）
Topic starter
2022年12月9日 03:14
@mk2_mk2 様
最初から画像を添付していたら良かったと反省しております。
そして就寝前のスマホからありがとうございました！
教えていただいた方法でできました！！
a {
text-decoration: none;
}
:where(.entry-content) a {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 0.2em;
text-decoration-color: #a4635e;
}
これで完璧にできました！
感動です！
本当にありがとうございました！
@chu-ya 様も何度もありがとうございました！
2022年12月9日 07:50
bbchanさん
そうですね。
画像があると助かることが多いです。
ただ、画像だけでも難しいことは多いですね。
- ご説明（要件が分かりやすいように、箇条書き等でまとめていただくと伝わり易いと思います）
- 画像
- 実際の対応内容（今回であればCSS）
上記がすべて書かれていると伝わりやすく、ご要望に沿ったお答えをできる可能性も上がると思います。
bbchanさんは、返信が早かったですので、その分助かりました。（中には投げっぱなしで、結局要件が分からない方も・・・）
何にしても、ご要望通りにできて良かったです。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。