スポンサーリンク

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 ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。

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

記事を読む

WordPress【Twenty Twelve】カスタマイズ追記いろいろ。。

wordpressのマルチサイト化で作成した新サイトをオープンして、コンテンツ作りを少しずつ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

Facebook「Like box」から「Page Plugin」へ ~作成のポイントとスマホやサイドバーで右端が切れてしまう場合の対処法~

新しくサイトを作っていて、いつものノリでFacebookのLike box作成ページへ行った

記事を読む

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

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

記事を読む

Message

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


follow us in feedly  

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

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