見出しタグ(h3)のリンク色だけ変える方法

PR 2015/5/16

このトピックには8件の返信、2人の参加者があり、最後に綾瀬により10年、 11ヶ月前に更新されました。

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

投稿者

投稿
- 2015年5月16日 11:34 AM #26704
  
  綾瀬
  ゲスト
  
  お世話になっております。
  
  現在、サイト上でランキング形式のブログを書いております。
  「○○のランキングベスト5」のような記事タイトルで、セレクトした5つの商品・サービスを5つ紹介しております。
  
  タグの流れでいうと、
  <h1>○○のランキング紹介してみた</h1>
  <h2>ランキングベスト5</h2>
  <h3>①サービス名</h3>
  <h3>②サービス名</h3?
  <h3>③サービス名</h3?
  <h3>④サービス名</h3?
  <h3>⑤サービス名</h3?
  <h2>まとめ</h2>
  
  以上の流れです。
  
  現在、<h3>の部分にサービス名とその公式ページへのリンクをつけているのですが、
  見出しタグのリンク色が青(一般のリンク色)ですとなかなか不都合があったので、
  今後は一般のテキスト色と同じにしたいと考えております。
  
  カスタマイザーでリンク色を変更すると本文内のリンク色も変わってしまうため、
  これらを解決する方法をご教示お願いできないでしょうか？
  
  質問「<h3>タグ内のリンク色だけ変更する方法をご教示ください」
- 2015年5月16日 2:29 PM #26707
  
  hidekichi
  ゲスト
  
  <h1>〜<最後のh2>を囲む何かしらのdiv class=”何かしら”をつけておいて、
  親・子テーマどちらか(できれば子テーマ)のstyle.cssにと、書こうとしましたが見てもらった方が早いのでfiddleに書いておきました。
  
  http://jsfiddle.net/969dzs3d/
  
  こんな感じでどうでしょうか？
- 2015年5月16日 2:30 PM #26708
  
  hidekichi
  ゲスト
  
  もしかして埋め込めるかな？のテストも兼ねて
  
  <iframe width=”100%” height=”300″ src=”//jsfiddle.net/969dzs3d/embedded/” allowfullscreen=”allowfullscreen” frameborder=”0″></iframe>
- 2015年5月16日 2:31 PM #26709
  
  hidekichi
  ゲスト
  
  はい、埋め込めませんでした（汗）
  
  ということでリンクからどうぞ。
- 2015年5月16日 2:36 PM #26710
  
  綾瀬
  ゲスト
  
  hidekichiさん
  
  ご教示ありがとうございます。
  <div class=>で囲む方法を教えていただきありがとうございます。
  
  今まで1000記事ほどすでに書いているため、この方法しかないのであればやるしかないですよね。
  チャレンジします。
- 2015年5月16日 4:07 PM #26715
  わいひら
  キーマスター
  トピック冒頭の説明だけでは、ちょっと不明な部分もあるので、出来れば、H3部分だけでも実際のHTMLソースを貼っていただければ、詳しくアドバイスできるかと思います。（実際のリンクテキストとURLなどは、別のものに変えても良いので）
  
  ただ、内容から想像するに、以下のように書くのではダメだったのでしょうか？
```
.article h3 a{
	color:#333;
}
```
  もしくは
```
.article h3 a:link{
	color:#333;
}
```
  あと、デベロッパーツールなどで、変更部分を探すという手もあります。
  WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
- 2015年5月16日 4:26 PM #26716
  
  hidekichi
  ゲスト
  
  毎回同じ所に同じ構成でh2なりh3が入っているなら、jqueryで、
  
  http://jsfiddle.net/969dzs3d/1/
  
  こんな感じでもイケるんじゃないでしょうか？
- 2015年5月16日 8:25 PM #26721
  綾瀬
  ゲスト
  わいひらさん、hidekichiさん
  ご教示ありがとうございます。
```
.article h3 a:link{
	color:#333;
}
```
  これをスタイルシートに書き込んだら成功しました。
  ありがとうございます。
- 2015年5月16日 8:32 PM #26722
  
  綾瀬
  ゲスト
  
  ちなみに、<h3>タグの部分は
  
  <h3><a href="リンク" target="_blank" >見出しテキスト</a></h3>
  
  このようにしておりました。
  
  見出しタグにリンクをはると、色や大きさで主張が激しくなることが考えられますので、
  同じような悩みがある方は今回のを参考にしていただけると幸いです。
  
  教えていただいたわいひらさん、hidekichiさん、本当にありがとうございました。
投稿者

投稿