スポンサーリンク

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でブログを作ろうと思った理由

はじめに カテゴリー『WordPressに挑戦!』の記事は、自身のメモ代わりの投稿記事となりま

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

WordPressへのGoogle Analytics導入についての特記事項

私はホームページ作成の際には、アクセス解析にGoogle Analytics(グーグルアナリ

記事を読む

トップページ・カテゴリーページ・アーカイブページなどのサムネイル画像付き抜粋表示方法まとめ

デフォルトの設定では、トップページ・カテゴリーページ・アーカイブページなどを表示すると、【全

記事を読む

ドメイン取得とレンタルサーバー選び

ドメインとレンタルサーバーとは? wordpressを利用するにあたって、必要になるのが「ドメ

記事を読む

Message

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



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

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

    北海道ディレクトリ

    • 子供と遊べる北海道の遊び場情報サイト
      ▶コドベル北海道
    • 北海道民のためのお得情報&節約情報サイト
      ▶得北
    • その他北海道関連のおすすめサイトは
      ▶こちらから♪
PAGE TOP ↑