質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1054閲覧

WordPressで記事内のリンクの色をそれぞれ分けたいです。

Cyan

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/11/21 21:30

###概要と試したこと
タイトル通りですが、WordPressで記事内のリンクの文字色を分けたいです。
何が原因かは既にわかっているのですが、解決法がわからず、困っております。

参考にしたページはこちらです

/* 記事内のリンク */ .entry-content a { text-decoration: underline; /* リンク部分にアンダーライン */ font-weight:bold; /* リンク文字を太字 */ color: #0066cc;} /* リンクの色 */ .entry-content a:visited { color: #0066cc;} /* 訪問済みの色 */ .entry-content a:hover{ color: #7a8285;} /* カーソルが乗った時の色 */

上記のコードをコピペして、記事内に存在するリンクの色が自動的に#0066ccになるように設定しました。

その後、こちらの記事に沿って、ボタン風な見た目にしたリンクを作ろうとしましたが、無念。
そのリンクの文字色まで#0066ccになってしまいます。
細かく言うと、マウスをホバーする前の状態のリンクの文字色が#0066ccのままだということです。
「それでは、記事内のリンクの文字のデフォルト色を変えればいいのでは?」ということで、#0066cc#fffにしましたが、ここでまた問題発生。
目次を勝手に出力してくれるプラグインを入れているのですが、この目次の文字色まで真っ白になってしまい、コンテンツの背景と同化してしまいました・・・。

こちらが私の使用したボタン風な見た目にするためのCSSです。

.article-btn a{ display:block; text-decoration:none; padding:7px 10px; border-radius:4px; font-weight:bold; color:white;/* ボタンの文字色 */ background-color:#e34c26;/* ボタンの背景色 */ border:2px solid #e34c26;/* ボタン枠の背景色 */ transition:all 0.5s; text-align:center; } .article-btn a:hover{ color:#e34c26; border:2px solid #e34c26;/* マウスオーバー時のボタンの背景色 */ background-color:white;/* マウスオーバー時のボタンの背景色 */ }

この後、解決方法を探るべく、記事内のリンクの色とウィジェット内のリンクの色を分ける方法を掲載している記事は見つけましたが、私が実現したいのは同じ記事内でのリンクの文字色を変えたいということです。

どなたか、解決方法を教えてくださると助かります。
宜しくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)
WordPress 4.8.3
親テーマのTwentyTwelveのバージョン: 2.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dit.

2017/11/21 23:47

CSSは後に記載されたもので上書きされていきますが、.entry-content a…の記述より後に.article-btn a{…の記載をしても同じ結果ですか?ご確認ください。
Cyan

2017/11/22 00:55

お返事ありがとうございます。ですが、おや・・・今見たら正常に動作しました。.entry-content a…は今、style.cssのほぼ上部にあり、.article-btn a{…の記述は今いちばん下にありますので、ボタンのCSSで上書きされている状態です。ここで一つ疑問なのですが、今現在は.article-btn a{…のせいで、リンクの文字色がwhiteになっているはずなのに、なぜ同じ記事の他のリンクの文字色には影響されないのでしょうか?何か特別なことをしたわけでもありません。
dit.

2017/11/22 01:00

キャッシュ等の問題だったかもしれませんね。記述順も問題なさそうなので完全に蛇足でした、すみません。「記事のほかのリンク」がarticle-btn内になければwhiteになることはないと思います。
Cyan

2017/11/22 01:03

あ、すみません。。。やはり問題はそのままでした。<p class="article-btn"><a href="URL" target="_blank" rel="noopener">TEST</a></p>このa hrefの後にURLを入力していなかっただけでした。URLが入っていないんですから、もちろん文字は白のままですよね。リンクがないんですから・・・。今リンクを入れたら、やはり#0066ccのままです。何度もすみません。
guest

回答1

0

ベストアンサー

こういう状況を想定してコメントしてました。
実際はどのようになってますか?

html

1<div class="entry-content"> 2 entry-content内の文字列 3 <p class="article-btn"> 4 entry-content内にあるarticle-btn内の文字列 5 <a href="#">article-btn内のリンク</a> 6 </p><!-- article-btnおわり --> 7 <a href="#">entry-content内のリンク</a>(article-btn内ではない) 8</div><!-- entry-contentおわり -->

css

1/* 記事内のリンク */ 2.entry-content a { 3text-decoration: underline; /* リンク部分にアンダーライン */ 4font-weight:bold; /* リンク文字を太字 */ 5color: #0066cc;} /* リンクの色 */ 6.entry-content a:visited { 7color: #0066cc;} /* 訪問済みの色 */ 8.entry-content a:hover{ 9color: #7a8285;} /* カーソルが乗った時の色 */ 10 11.article-btn a{ 12 display:block; 13 text-decoration:none; 14 padding:7px 10px; 15 border-radius:4px; 16 font-weight:bold; 17 color:white;/* ボタンの文字色 */ 18 background-color:#e34c26;/* ボタンの背景色 */ 19 border:2px solid #e34c26;/* ボタン枠の背景色 */ 20 transition:all 0.5s; 21 text-align:center; 22} 23.article-btn a:hover{ 24 color:#e34c26; 25 border:2px solid #e34c26;/* マウスオーバー時のボタンの背景色 */ 26 background-color:white;/* マウスオーバー時のボタンの背景色 */ 27}

【参考サンプル】
上記のみであればこのように表示されているはずです

【追記】

css

1.article-btn a:visited{ 2 color:white; 3}

を追加してみてください。

css

1.entry-content a:visited { 2color: #0066cc;} /* 訪問済みの色 */

がありますがボタンの方にvisitedがないので、リンクの色というよりは訪問済みの色になっているのではと思います。

投稿2017/11/22 01:13

編集2017/11/22 01:31
dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cyan

2017/11/22 04:41

dit.さん、ありがとうございました。 おっしゃるとおりで、訪問済みの色になっておりました!! 現在は正常に動きました。 本当に助けてくださってありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問