WordPress【Twenty Twelve】 リンク色の変更方法まとめ
公開日：
:
最終更新日：2015/04/15
WordPressに挑戦！
ふと。。「ブログ内のリンク色」を変えてみようかな？と思い立ちました。
カスタマイズの大半は、（ほとんど全部？）web上の情報を参考にさせて頂いていますが、当ブログで使用しているテーマ【Twenty Twelve】のリンク色の変更方法については見つける事が出来ませんでした。
「ちょっとは自分で考えなさい。」という事かな？？＾＾
文字色やリンク色などの「装飾」の変更は、CSS。
この位の知識しかありませんが。。やってみたら出来た♪（笑）
当ページでは、wordpress3.5.1 テーマ 【Twenty Twelve】使用での リンク色の変更方法をまとめてみようと思います。
※ファイル編集は必ずバックアップを取ってから行ってください。
「子テーマ」を作成しておくと、テーマのアップグレードの際に変更内容が消えることがありません。
style.cssの編集
テーマ編集「style.css」を開いて、下記画像の場所を探して下さい。
※パソコンの【Ctrl】キーを押しながら【F】を押すと、上部に検索窓が現れます。
下記コードをコピーしてペーストすると、「style.css」内の該当コードに黄色でマークがつくので探しやすくなります。
/* Body, links, basics */
赤枠で囲んだ【color: #21759b;】の部分が、<Body>内（記事本文中）のリンク色です。
少し上の【color: #444;】は、通常文の文字色。
少し下の【color: #0f3647;】は、マウスポインタが乗った時のリンク色です。
今回は、リンク色だけの変更なので、赤枠内の【#21759b】の部分を変更したい色コードに書き換えます。
ちなみにデフォルトの【#21759b】は、こんな色。
当ブログでは、リンク色の王道☆（笑）【#0044cc】に変更しました。
直感的に好きな色に変更したいという方は、こちらのサイトが便利かと思います。
＞HTML色見本
ブログ内全体の変更
上記の作業で、【記事本文中】のリンク色の変更は出来ました。
でも、ブログ全体を見渡してみると、カテゴリー、アーカイブなどのウィジットエリア、ページナビゲーション、コメント欄。。あちらこちらに、デフォルトのリンク色、【#21759b】を使用している部分があります。
そこで再び、パソコンの【Ctrl】キーを押しながら【F】を押す作業で、今度は、下記コードを入力してみます。
color: #21759b;
右端に【１１件の一致】と出ています。
「style.css」内で、この色コードは１１か所で使われている事がわかりました。
（最初に説明した/* Body, links, basics */内のコードも含みます。）
下記画像のように、該当部分が黄色でマークされていますので、全てを変更したいリンク色に変更します。
以上で、ブログ内全体のリンク色の変更は終了です。
私の様に、CSSの知識が無い初心者の方でも簡単です。o(〃＾▽＾〃)o
関連記事
-
-
当ブログで使用しているプラグインリスト
つい最近まで、wordpressの存在すら知りませんでしたから、当然どんなプラグインがあるの
-
-
ブログリニューアルと新サイトのご紹介です♪
こんにちは♪ ご訪問ありがとうございます。（*^_^*） ブログをリニューアルしました♪ この
-
-
Facebook「Like box」から「Page Plugin」へ ～作成のポイントとスマホやサイドバーで右端が切れてしまう場合の対処法～
新しくサイトを作っていて、いつものノリでFacebookのLike box作成ページへ行った
-
-
WordPressでブログを作ろうと思った理由
はじめに カテゴリー『WordPressに挑戦！』の記事は、自身のメモ代わりの投稿記事となりま
-
-
プラグイン設置以外のカスタマイズ記録
こちらのページは、プラグイン設置以外のカスタマイズ記録になります。 これまでのプラグイ
-
-
WordPress ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。
１つのwordpressで、ブログを複数管理できるように変更する機能として【マルチサイト化】
-
-
ドメイン取得とレンタルサーバー選び
ドメインとレンタルサーバーとは？ wordpressを利用するにあたって、必要になるのが「ドメ
-
-
インターネットカフェから・・・
最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし
-
-
超簡単☆WordPressファビコン設置方法まとめ
当ページでは、wordpressにファビコンを設置する際の手順をまとめておきたいと思います。 ファ
-
-
WordPressインストール後 最初にやっておきたい事リスト
wordpressのインストールが成功したら、記事投稿の前にやっておきたい事。。 やっておいた方が
