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

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

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

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

Q&A

解決済

1回答

540閲覧

ブログのテキストリンクの色を変えたいです。

RYOsan

総合スコア6

WordPress

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

0グッド

0クリップ

投稿2020/05/30 03:34

ご覧頂きありがとうございます。

現在”wordpress”のライオンメディアにてブログを運営(全く自慢できるアクセス数ではありませんが)しています。
HTMLやCSS、PHPなど超基本的な事は少しは勉強しましたが、それでもプログラミングに関してはド素人です。

当初の当初、ブログのイメージカラーをオレンジ色にしたいと思い、リンク色をCSSでオレンジ色に指定した微かな覚えがあります。

しかし最近になってやはり、Googleと同じ青色(1A0DAB)にしようと思い[カスタマイズ]の[追加CSS]という項目に

a { color:#1A0DAB; }

を記述しました。しかし公開済みの記事のリンク色に変化がみられません。

一度消去して、どこかのウェブサイトに載っていたリンクデコレーションも兼ねたコード↓

a { font-weight:bold; text-decoration:none; } a:link { color:#1A0DAB; } a:visited { color:#6600FF; } a:hover { color:#FF0099; text-decoration:underline; } a:active { color:#33CC00; }

を記述してみましたところ、文字は「青色+下線」になり、訪問済みなどの条件により色も変化したので「これでいいか」と一時は思いました。

しかし、よく確認するとリンクテキストのみならず「目次の文字」まで青色やら下線が引かれたので結局コードは消去し元に戻しました。

恐らく、過去に追加したオレンジ色のリンクCSSが邪魔をしているのでは無いかと思いましたが、追加した場所もわからずに手が付けられません。

望むことは「記事中のテキストリンクの色を統一したいが、目次などは色の変更も下線追加もして欲しくない」というものです。

非常にわかりにくい文章になっているかと思われますが、なにぶん超初心者なのものでお許しください。

ご回答、お待ち申しております。

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

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

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

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

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

guest

回答1

0

ベストアンサー

WordPressの、以下URLの「ライオンメディア」というテーマを使っていると理解しました。
http://lionmedia.fit-jp.com/

以下のような書き方でいかがでしょうか?
「.l-main」配下の要素だけが指定したリンク色になります。

CSS

1.l-main a { 2 font-weight:bold; 3 text-decoration:none; 4} 5 6.l-main a:link { 7 color:#1A0DAB; 8} 9 10.l-main a:visited { 11 color:#6600FF; 12} 13 14.l-main a:hover { 15 color:#FF0099; 16 text-decoration:underline; 17} 18 19.l-main a:active { 20 color:#33CC00; 21}

new1ro様、回答ありがとうございます。
先ほど試しましたところ、SNSのボタンやタグの色まで青色に変更されましたので、とりあえず元に戻しました。
「リンクテキストのみ青色」ではありませんでした。
ですので恐縮ですが「ベストアンサー」はもう少しお待ちします。

上記コメントがあったため追記します。こちらでいかがでしょうか?

a { font-weight: bold; text-decoration: none; } a:link { color: #1A0DAB; } a:visited { color: #6600FF; } a:hover { color: #FF0099; text-decoration: underline; } a:active { color: #33CC00; } /* 以下を追加。文字が「青色になってしまう」箇所を発見し次第、以下のように追加してください。 */ .globalNavi .globalNavi__list .current_page_item a, .globalNavi .globalNavi__list .current_page_item a:link, .globalNavi .globalNavi__list .current_page_item a:visited { color: #ccc; /* 仮に文字色をグレーにしています。好きな値に設定してください。 */ text-decoration: none; } .globalNavi .globalNavi__list .current_page_item a:hover, .globalNavi .globalNavi__list .current_page_item a:active { color: #fff; /* 仮に文字色を白にしています。好きな値に設定してください。 */ text-decoration:none; }

投稿2020/05/30 04:23

編集2020/06/01 07:31
new1ro

総合スコア4528

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

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

RYOsan

2020/06/01 07:16

new1ro様、回答ありがとうございます。 先ほど試しましたところ、SNSのボタンやタグの色まで青色に変更されましたので、とりあえず元に戻しました。 「リンクテキストのみ青色」ではありませんでした。 ですので恐縮ですが「ベストアンサー」はもう少しお待ちします。
new1ro

2020/06/01 07:33

追記しました。 aタグの書き方はもとに戻し、 あとは地道に、文字色が気に入らない箇所を個別に追加していくしかないと考えます。 (ライオンメディアというテーマにはあまりくわしくないので、あくまでCSS視点での回答です。)
RYOsan

2020/06/01 09:23

何とか思い通りにできました! ありがとうございました。また機会がありましたらよろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問