スポンサーリンク

WordPress【Twenty Twelve】 リンク色の変更方法まとめ

公開日: : 最終更新日:2015/04/15 WordPressに挑戦!

illust1040_thumb

ふと。。「ブログ内のリンク色」を変えてみようかな?と思い立ちました。
カスタマイズの大半は、(ほとんど全部?)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;】は、マウスポインタが乗った時のリンク色です。

15

今回は、リンク色だけの変更なので、赤枠内の【#21759b】の部分を変更したい色コードに書き換えます。

ちなみにデフォルトの【#21759b】は、こんな色。
21

当ブログでは、リンク色の王道☆(笑)【#0044cc】に変更しました。
22

直感的に好きな色に変更したいという方は、こちらのサイトが便利かと思います。
>HTML色見本

ブログ内全体の変更

上記の作業で、【記事本文中】のリンク色の変更は出来ました。
でも、ブログ全体を見渡してみると、カテゴリー、アーカイブなどのウィジットエリア、ページナビゲーション、コメント欄。。あちらこちらに、デフォルトのリンク色、【#21759b】を使用している部分があります。

そこで再び、パソコンの【Ctrl】キーを押しながら【F】を押す作業で、今度は、下記コードを入力してみます。
color: #21759b;

右端に【11件の一致】と出ています。
「style.css」内で、この色コードは11か所で使われている事がわかりました。
(最初に説明した/* Body, links, basics */内のコードも含みます。)

17

下記画像のように、該当部分が黄色でマークされていますので、全てを変更したいリンク色に変更します。

16

以上で、ブログ内全体のリンク色の変更は終了です。
私の様に、CSSの知識が無い初心者の方でも簡単です。o(〃^▽^〃)o




関連記事

WordPress ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。

1つのwordpressで、ブログを複数管理できるように変更する機能として【マルチサイト化】

記事を読む

ブログリニューアルと新サイトのご紹介です♪

こんにちは♪ ご訪問ありがとうございます。(*^_^*) ブログをリニューアルしました♪ この

記事を読む

WordPress関連-LinkWithinマルチサイト表示方法とプラグインリスト追記

今日は久しぶりにWordPress関連の記事内容となります。 のんびりと(長々と?)書いて

記事を読む

インターネットカフェから・・・

最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし

記事を読む

当ブログで使用しているプラグインリスト

つい最近まで、wordpressの存在すら知りませんでしたから、当然どんなプラグインがあるの

記事を読む

本当に簡単だった♪ロリポップのWordPress簡単インストール

wordpressでブログを作っていく際にまず最初にする作業は【wordpressのインスト

記事を読む

WordPressインストール後 最初にやっておきたい事リスト

wordpressのインストールが成功したら、記事投稿の前にやっておきたい事。。 やっておいた方が

記事を読む

超簡単☆WordPressファビコン設置方法まとめ

当ページでは、wordpressにファビコンを設置する際の手順をまとめておきたいと思います。 ファ

記事を読む

プラグイン設置以外のカスタマイズ記録

こちらのページは、プラグイン設置以外のカスタマイズ記録になります。 これまでのプラグイ

記事を読む

文字がにじむ。ぼやける。。Twenty Twelveヘッダー画像の謎。。

当ブログで使用しているテーマ【Twenty Twelve】は、カスタムヘッダーと言って、自分

記事を読む

Message

メールアドレスが公開されることはありません。


follow us in feedly  
  • HN:ai
    北海道在住
    ▶プロフィール詳細へ

    当ブログは北海道限定情報サイト
    「北海道ディレクトリ」登録サイトです。

    北海道ディレクトリ

PAGE TOP ↑