今回も引き続きWordPressのリンクの色や装飾部分のカスタマイズをして行きます。全体的なリンクの色やアンダーライン、太字にする等の装飾をしていきましょう。サンプルとして私の使っているテーマTwenty Twelveで解説します。
まずは一般的に使われている装飾について紹介していきます。リンク部分の装飾に関してはアンダーラインと太字があります。クリックされやすい色として有名なのが青色だと言われています。
そのため、このブログでも本文中のリンクは青色にしてリンク部分と分かりやすいように太字、アンダーラインを入れてます。
スポンサーリンク
記事コンテンツ（本文中）のリンクをカスタマイズ
今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)に記述していきます。記事内のリンクのカスタマイズは次の３つの部分を覚えると簡単です。
- aはリンク
- a:hoverはカーソルが乗った時のリンク
- a:visitedは訪問済みのリンク
私はこのように記述してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* 記事内のリンク */ .entry-content a { text-decoration: underline; /* リンク部分にアンダーライン */ font-weight:bold; /* リンク文字を太字 */ color: #0066cc; /* リンクの色 */ } .entry-content a:visited { color: #0066cc; /* 訪問済みの色 */ } .entry-content a:hover{ color: #7a8285; /* カーソルが乗った時の色 */ } |
私の場合はリンクにアンダーラインや太字を利用してますが、アンダーラインや太字は要らないという方は対応する場所にこのように記述してください。
1 2 | text-decoration: none; /* アンダーライン無し */ font-weight: normal; /* 普通の太さ */ |
また、カーソルが乗った時だけアンダーラインを使いたい場合は先ほどの「.entry-content a:hover」の部分に「text-decoration: underline;」を入れて、「.entry-content a」の「text-decoration: none;」とすればOKです。
サイドバー（ウィジェット部分）のリンク
このサイトでいうとこの部分。この部分の文字の大きさや装飾をカスタマイズしていきます。
この部分の文字の高さと文字の大きさはこのようになってます。
1 2 3 4 5 6 | /* サイドバーの文字 */ .widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget { line-height: 28px; /* 文字の高さ */ font-size: 14px; /* 文字の大きさ */ } |
そして文字色は装飾はこれ。先ほどの部分と同じ要領で、リンクの色、カーソルが乗った時の色、それから訪問済みの色をそれぞれ書き込みます。
1 2 3 4 5 6 7 8 | .widget-area .widget a { color: #000000; /* リンク部分の文字色 */ text-decoration: underline; /* リンク部分にアンダーライン */ font-weight: normal; /* 文字の太さはノーマル */ } .widget-area .widget a:visited {color: #000000;} .widget-area .widget a:hover{color: #7a8285;} |
以上でリンク部分のカスタマイズでした。
アフォ様
親テーマの記述をいじったのか元からそうなのか？はどちらも可能性あるかなと思います。基本的に親テーマはテーマの更新があればすべて初期化されるので、記述を変更していても更新したら元に戻ります。もしくは親テーマの再インストールとか。もし別のサイトもあるならそちらでインストールしてみて親テーマをコピーとかでも良いですね。
しげぞう様
度々申し訳ございません。
前回ご相談させて頂いた質問のアイキャッチ画像に関する問題はプラグインが原因だったことが分かり、直りました。一方でスマホ上でメニューボタンが機能しないことについてはまだ直っていません。header.phpの子テーマの記述を一旦すべて削除して確かめても直らなかったので疑問に思い、twentytwelveの親テーマの記述を確認してみたところ、style.cssの中でいくつか黄色い！マークが出ている箇所がありました。
ここでご質問したいのは、親テーマの記述の中に黄色い！マークが表示されているのは元からそういうものなのでしょうか？それとも私が意図せず親テーマの記述をいじったからでしょうか？
しげぞう様
迅速なご対応ありがとうございます。
返信が遅くなり申し訳ございません。
ご指摘いただきましたようにヘッダーの記述とリロード、別のブラウザで開くとすべて試してみましたがうまくいかなかったようです。
しかし、しげぞう様のアドバイスはとても参考になりましたので、同様にヘッダー以外の記述を元に戻したり別の方法を探してみたりいろいろと試してみようと思います。
また何か進捗があればこの場をお借りしてご報告させていただきたいと思います。
大変ありがとうございました。
アフォ様
コメントありがとうございます。スマホページのメニューが機能ないのはおそらくheader.phpの記述かと思います。現在のheader.phpをメモ帳などにコピペしておいてから一度親テーマのheader.phpの記述をコピペしてheader.phpだけ初期状態に戻してみたら良いかもしれません。
以前私もスマホのメニューボタン同じ事があったのですが、親テーマの更新で子テーマとズレがあったのが原因でした。なので、上記で書いたように一度親テーマのheader.phpと同じ状態に戻せば解決するかもしれません。
それからアイキャッチの問題ですが、スマホで表示されるという事ですので、ブラウザのキャッシュが怪しいかなと思います。サイトを開き、「CTRl」と「F5」を一緒に押してリロードして確認してみて下さい。それからもし可能であればPCで別のブラウザを使って表示させてみて下さい。別のブラウザできちんと表示できているなら問題ないかと思います。
しげぞう様
どうも初めまして
コメントさせていただくのはこれが初めてですが、以前からこのサイトで勉強させていただいておりました。
とても分かりやすく、いつも参考にさせていただいています。
本当にありがとうございます。
現在もwordpressを概ねこのサイトの手順通りに構築し、おすすめのプラグインもほとんどインストールしました。
しかし、現在いくつか不具合がありまして、自分なりに子テーマの記述を見直したりプラグインを停止させてみたりしたのですが解決には至っておらず、しげぞう様のご意見を頂きたいです。
不具合についてですが、
・スマホで表示させたときにデフォルトでヘッダーにあるメニューボタンが押しても何も表示されない（以前は押せばナビゲーションメニューが表示されたので、私がどこかのコードをいじってしまったか、あるいはプラグインの影響でしょうか？）
・PCで表示させたときに記事内にアイキャッチ画像として挿入した画像がサムネイルとしては表示されない（スマホ上では表示される）
機能を追加するというのは、その分おもりを背負う
のと一緒のイメージなのですね。
勉強になります。
cocoon見ました。
無料でここまでできるのは素晴らしく、初めから表示
スピードアップ化されているなど、モチベーションが
否が応でもあがってきました！
しげぞう樣のページでもっと知識を高めたいと思い
ますが、何分教典ともいえる膨大で素晴らしい内容な
ので、一歩一歩学んでいきますね。
また不明点がありましなたらよろしくお願いいたします。