Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

記事の中のリンク文字について
 
共有:
通知
すべてクリア

[解決済] 記事の中のリンク文字について

17 投稿
3 ユーザー
9 Reactions
1,395 表示
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

お世話になっております。

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

   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3160
 

border-bottomは罫線です、リンクの下線ではありません。
border-bottomは間違いなので削除して下さい。
text-decorationを削除すれば、記事中のリンク下に下線が表示されます。

.entry-content a {
  /* 下線を消す */
  text-decoration: none;

  /* 下に罫線 */
  border-bottom: 3px solid #000;

  color: #000;
}

   
わいひら reacted
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@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;

}

 

に変えたのですが、文字リンクには下線が出るのですが、記事内の画像とブログガードにも下線がでてしまいます。

文字リンクだけ下線をつけたく、画像(リンクされている)などには下線をつけたくないのですが。どうすればよろしいでしょうか?


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8101
 

bbchanさん

そもそものご質問内容が、曖昧な気がします。
(ミスリードを起こすと思います)

投稿者:: @bbchan

記事の中のリンク文字だけに下線でリンク先を作りたく 

これは、どういう内容なのでしょうか。

サイドバー等のリンクについては下線を消して、記事本文のリンクだけに下線を残すということでしょうか。

なぜ、borderにするのかが良く分からず、下線とは他のご要望でしょうか?
(下線をborderにしたいというご要望でしょうか?)


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8101
 

bbchanさん

ご要望がはっきりしませんので、以下のように仮定させていただきます。

  • サイドバー等の記事本文以外の部分は、aタグのリンクの下線を消す
  • 記事本文のaタグのリンクには下線をつける
    (ブログカード等には下線をつけない)
a {
    text-decoration: none;
}
:where(.entry-content) a {
    text-decoration: underline;
}

なお、ご要望に文字色のことは記載されていませんでしたので、ご提示はしませんでした。
適宜ご調整いただければと思います。
(ご提示いただいたCSSでは、文字色も変更されているようですが、意図が不明でしたので)

ご要望と異なるようでしたから、ご放念ください。


   
わいひら reacted
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@mk2_mk2

 

@mk2_mk2

 

説明が下手で申し訳ありません。

サイドバー等のリンクについては下線を消して、記事本文のリンクだけに下線を残すということでしょうか。

 

はい、その通りです。

記事のテキスト文字にだけ、下線を引きたいです。

出来れば少し離した状態で。

 

こんな感じにしたい画像を添付しておきます。


   
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@mk2_mk2

 

こちらで下線のみ表示できました!

ありがとうございました。

 

説明が下手で本当に申し訳ないです。。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3160
 

@bbchan さん

CSSを理解されていないようなので、私のコードは@bbchanさんがコードの説明をしたにすぎません。
当然、コピペしても状況は変わりません。
文章で書いた事をして欲しかったです。


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3160
 

@mk2_mk2 さん
そもそもborder-bottomと、text-decorationを勘違いしている節があり。
単にCSSを削除しても解決したかと思います。


   
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@chu-ya

あまり理解していなく、申し訳ありません。

ちなみに画像のような表示にはどうすればよろしいでしょうか?


   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 3年前
投稿: 3160
 

@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
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@chu-ya

ありがとうございます。

毎回リンクを挿入するたびにclassで挿入する以外にない感じですね??

わたしが最初に投稿していたのだと画像などにも下線が入ってしまうので、それしかありませんよね 😣 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8101
 

chu-yaさん

ご要望がはっきりしませんでしたので、とりあえず最初にbbchanさんにご提示いただいたものは、考慮せずにご提示させていただきました。

いろんな方法をご提示しても良いのかなと。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8101
 

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」を指定すれば、太さも指定できるかもですが、うろ覚えです。

試しておりませんので、うまくいかない場合は、すみません。

そして、もう寝ます。(既に布団の中からスマホで書いていますし)


   
わいひら and bbchan reacted
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@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 様も何度もありがとうございました!

 

 


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8101
 

bbchanさん

そうですね。

画像があると助かることが多いです。

ただ、画像だけでも難しいことは多いですね。

  • ご説明(要件が分かりやすいように、箇条書き等でまとめていただくと伝わり易いと思います)
  • 画像
  • 実際の対応内容(今回であればCSS)

 

上記がすべて書かれていると伝わりやすく、ご要望に沿ったお答えをできる可能性も上がると思います。

bbchanさんは、返信が早かったですので、その分助かりました。(中には投げっぱなしで、結局要件が分からない方も・・・)

何にしても、ご要望通りにできて良かったです。


   
わいひら reacted
(@bbchan)
Active Member Registered
結合: 2年前
投稿: 8
トピックスターター  

@mk2_mk2 

はい、わかりました!何度もありがとうございました!

私の説明など、色々と勉強になりました。

ご対応感謝いたします。


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました