ウェブサイト構築

wordpressで記事本文のリンクの色だけを変え下線を入れる方法

wordpressの記事中のリンクの色だけを変える方法がなかなかわからず、かなり苦戦したので、ここにその作業方法を書き残しておきたいと思います

リンクの色を黒から青に代え下線を入れたかった

自分が入れたテーマのデフォルトではリンクの色が黒の状態で下線もありませんでした
(画像はクリックで拡大します)

記事のリンクの色を青に代えたかった

これではどこがリンクなのか、サッパリわかりません (@_@;)
これを青くして下線も入れ、訪問者にも「これはリンクですよ」ということをわかりやすくしたかったため、変更する作業をしました

スタイルシート:CSSをいじってリンクの色&下線を変更します

まずは

外観→テーマの編集→スタイルシート(CSS)

スタイルシートを出します

そしてスタイルシートの中の
記事エリアを操作している部分を探します

スタイルシート:記事本文のリンクの色を青くする方法

見つけましたら、そこに変えたい情報を打ち込んであげます

私のテーマの場合は
・post_content に情報を打ち込むことで、記事中の設定を変更できるようになっていたので、こちらに情報を打ち込んであげます

こんな感じで・・・

スタイルシート:記事本文のリンクの色を青くする方法

post content(記事本文) a(リンク) の {}(変更内容) と言った感じです
記述の内容等についての詳細は、こちらのサイトを参考にさせていただきました

http://dokidome.com/wp-customize/480/

こちらのサイトでは entry-content という場所に変えたい内容を記述しておりますね

というわけで無事、記事中のリンクの色のみを変えること&下線をつけることに成功しました (*´ω`*)

記事のリンクの色のみを青く変えることに成功!

ちなみにこれを理解するのに、私は3時間もかかってしまいました orz…
初心者アフィリエイターはこうやりながら1つ1つ覚えていくしかないですね 笑)

 

サイト全部のリンクの色をいっぺんに変えることも可能です

 

スタイルシートをいじれば、記事リンクの色だけではなく、サイト全部のリンクの色をいっぺんに変えることも可能です♪

まずは同じように

外観→テーマの編集→スタイルシート(CSS)

スタイルシートを出します

そしてスタイルシートの中の
基本設定をしている部分

a {} という場所を探します

サイトのリンクの色を青に変える

a はリンクを意味するので aに続く {} の中の情報を変えてあげます

そうすることで、本文中だけではなく、全部のリンクの色が変わりました

サイトのすべてのリンクの色を青く設定する

ただ、私のwebサイトの場合

色んな所にリンクが貼られているのと、タブリンクまで青く変化してしまうと、どうしてもうるさいイメージになってしまうので

ウエブサイトのリンクの色をすべて青くする設定

本文中のリンクの色だけを青くすることにしました

リンクを青くする&下線を入れてあげることで
クリック率が上がることは色々なところで叫ばれてます♪

スタイルシートをちょっといじるだけで、変更することができるので(初心者の自分でもできたので大丈夫!)

ぜひ試してみてください♪

ABOUT ME
自己紹介(あっき)
あきら
ワーホリ・海外ボランティアをきっかけに旅行が好きになりました。 Twitterやインスタなどで繋がれたら嬉しいです。よろしくお願いします^^
【絵本を出版しました!】

amazon kindleより絵本を出版しました!

 

あっき
あっき
Kindle Unlimitedの会員ならば無料で、会員じゃなくてもコーヒー1杯よりも安いお値段で楽しめますのでぜひぜひ読んでいただけたら嬉しいです。(・∀・)ノ

【絵本】イギリス・ダートムーアでポニーさんたちにあいました(写真で楽しむ絵本)

ダートムーアでポニーにあいました・絵本を出版しました(記事下)

 

【絵本】イギリス・ダートムーアでポニーさんたちにあいました【amazon公式ページはこちら】