今回も引き続きWordPressのリンクの色や装飾部分のカスタマイズをして行きます。全体的なリンクの色やアンダーライン、太字にする等の装飾をしていきましょう。サンプルとして私の使っているテーマTwenty Twelveで解説します。
まずは一般的に使われている装飾について紹介していきます。リンク部分の装飾に関してはアンダーラインと太字があります。クリックされやすい色として有名なのが青色だと言われています。
そのため、このブログでも本文中のリンクは青色にしてリンク部分と分かりやすいように太字、アンダーラインを入れてます。
記事コンテンツ（本文中）のリンクをカスタマイズ
今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)に記述していきます。記事内のリンクのカスタマイズは次の３つの部分を覚えると簡単です。
- aはリンク
- a:hoverはカーソルが乗った時のリンク
- a:visitedは訪問済みのリンク
私はこのように記述してます。
/* 記事内のリンク */
.entry-content a {
text-decoration: underline; /* リンク部分にアンダーライン */
font-weight:bold; /* リンク文字を太字 */
color: #0066cc; /* リンクの色 */
}
.entry-content a:visited {
color: #0066cc; /* 訪問済みの色 */
}
.entry-content a:hover{
color: #7a8285; /* カーソルが乗った時の色 */
}私の場合はリンクにアンダーラインや太字を利用してますが、アンダーラインや太字は要らないという方は対応する場所にこのように記述してください。
text-decoration: none; /* アンダーライン無し */ font-weight: normal; /* 普通の太さ */
また、カーソルが乗った時だけアンダーラインを使いたい場合は先ほどの「.entry-content a:hover」の部分に「text-decoration: underline;」を入れて、「.entry-content a」の「text-decoration: none;」とすればOKです。
サイドバー（ウィジェット部分）のリンク
このサイトでいうとこの部分。この部分の文字の大きさや装飾をカスタマイズしていきます。
この部分の文字の高さと文字の大きさはこのようになってます。
/* サイドバーの文字 */
.widget-area .widget p, .widget-area
.widget li, .widget-area .widget .textwidget {
line-height: 28px; /* 文字の高さ */
font-size: 14px; /* 文字の大きさ */
}そして文字色は装飾はこれ。先ほどの部分と同じ要領で、リンクの色、カーソルが乗った時の色、それから訪問済みの色をそれぞれ書き込みます。
.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見ました。
無料でここまでできるのは素晴らしく、初めから表示
スピードアップ化されているなど、モチベーションが
否が応でもあがってきました！
しげぞう樣のページでもっと知識を高めたいと思い
ますが、何分教典ともいえる膨大で素晴らしい内容な
ので、一歩一歩学んでいきますね。
また不明点がありましなたらよろしくお願いいたします。
あき様
通常有料テーマだと1万円代が多い気がしますが、多分サポートとか付いている分高くなっているのではないでしょうか？
もちろん勉強したら有料テーマのようなデザイン、機能を自分で作成できますが、１つ１つ調べながらになると思いますのでかなりの時間と労力がかかるかと思いますし、機能を追加すればするほど表示が遅くなったりするのでそのバランスも難しい所です。
これはあくまで個人的な意見ですが、無料テーマで十分と思ってます。わいひらさんの「Cocoon（コクーン）」とか無料テーマではありえないレベルのテーマだと思ってます。
⇒https://nelog.jp/cocoon
どうも初めまして。
WordPress始めようとして、こちらのページに
たどり着きました。
そんなWordPressのことを調べているうちにこ
ちらのページにもたどり着きました。
このテーマは、
「カラム設定はプラグインでも出来きますが、
「ELEPHANT2」の凄いところは、スマホから見
てもカラムが落ちないところなんです。」
とのことでしたが、価格を見てぶっ飛んでしま
いました！
TwentyTwelveでもこのようなことは可能でしょ
うか？
HTMLとCSSは勉強しました。
お忙しい中申し訳ございませんが、どうぞよろ
しくお願いいたします。
gori様
わざわざ報告ありがとうございます！問題解決できて良かったです！また何か分からない部分などあればいつでもコメント下さい。また、今後も記事を増やしていくつもりなので今後もよろしくお願いします！
しげぞう様
ファイルを確認したところsingel.phpに見出しの装飾コードが貼り付けていました。削除したところ無事解決いたしました。ほんと助かります！それにしても、しげぞうさんのサイトは細かいところまで訪問者の為に見やすいように作られているなぁ、と感心することがたくさんあり色々と真似ばかりさせてもらってます。本当勉強になることが多く、今後も色々質問させてもらうと思いますが宜しくお願いします。
gori様
返信ありがとうございます。投稿したページの一番下に見出しの装飾コードが表示されるというのはおそらく、スタイルシート以外のPHPファイルに間違って装飾コードが貼り付けてあるのが原因だと思います。怪しいのは「content.php」もしくは「singel.php」だと思います。
この２つのファイルを確認してみればどちらかに表示されているコードと同じ記述があると思いますので、確認をしてみて下さい。
しげぞうさま
ブログの幅や行間のコードを教えていただきありがとうございました。無事に反映され、とても読みやすくなり大満足です！
しかしまた問題が、、、次は投稿したページの一番下に見出しの装飾のコードが表記されてしまいました。
一度コードを消してみたのですが、なぜか表記されたままです。
これはどういう問題が起こっているのでしょうか？
本当問題ばっかですみません
gori様
コメントありがとうございます。読みやすいと思って頂けると非常に嬉しいです。サイドバーの太字ですが、スタイルシートに一度こちらを追加してみて下さい。
/* サイドバーの太字 */ .widget a { font-weight: bold; }それとブログの幅や行間はこちらのコードを追加して下さい。現在はフォントもちょっと変更してます。スタイルシートです。
/* フォント */ body{ font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; font-size:15px; color:#222; } body.custom-font-enabled{ font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } /* ブログの幅 */ @media screen and (min-width: 600px) { .site {max-width: 900px;} .widget-area {width: 33.4%;} .site-content {width: 61.00%;} } @media screen and (min-width:600px){ .ie8 .site{max-width:900px} .ie8 .widget-area{width:width:33.4.%} .ie8 .site-content{width:61.00%} } /* 文字の大きさと行間 */ .entry-content p { line-height:1.75em; font-size:16px; }しげぞう様
やはり、なぜかコードが反映される場合と反映されない場合があります。
今、反映されないのはサイドバーの文字を太字に変更するコードです。
自分でスタイルシートもいじったりしていたのでもしかしたらコードがおかしくなっているかもしれないので一度見てもらいたいです、
あとしげぞう様の「アフィリエイトで稼ぐ方法を全部話そうと思う」の文字のサイズ、行間、コンテンツ全体の幅、記事のコンテンツの横幅、サイドバーの横幅、がとても見やすくてぜひ真似をさせていただきたいのですがよろしければコードを教えてくれるとありがたいです。
お手数おかけしますが宜しくお願い致します。
gori様
返信ありがとうございます。問題も解決できたようで良かったです。おそらく原因はブラウザのキャッシュではないかと思います。ブラウザには以前のデータを残しておいて再度そのページを開いた時にすぐに表示できるようにしています。「Ctrl」と「F5」を一緒に押すと再読み込み（リロード）されますので、反映される事がありますし、リロードしなくても時間が経てば反映される場合もあります。
なので、別のブラウザで確認したり、スマホで確認すると反映されている場合って結構多いです。
しげぞう様
こんばんは、間違って途中で投稿してしまいました、すみません。
今朝相談させてもらった件ですが、なぜか突然反映されてました、
問題はとりあえず解決したのですが今回の問題はなぜ起きたのでしょうか？
質問ばかりですみません
gori様
コメントありがとうございます。CSSが反映されない場合に確認するべきポイントは４つあります。
１．使っているテーマの確認
私の場合はTwenty Twelveを元にカスタマイズしていますが、これ他のテーマでは違う場合があります。もし違うテーマであればテーマ名を教えて下さい。
２．リロード
以前のデータが残っていて反映が確認できない場合がありますので、ブログを表示させて「Ctrl」と「F5」を一緒に押して確認して下さい。
３．記述ミス
リロードしても反映されない場合にはコードの記述ミスがあるかもしれません。CSSの途中で「 } 」が抜けていたり、１つミスがあるとそれより後の記述も反映されない場合がありますので、一度以前の記述も含めて確認をしてみて下さい。
４．私の紹介コードのミス
一応確認してから記事にしているのですが、時々私も記事内のコードにミスがあります。すみません！なので、上記３点でも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、反映されない原因を探す事ができると思います。どうぞよろしくお願いします。
しげぞう様
いつもこのサイトにはとてもお世話になっております、このサイトのお陰で 着々とサイトが出来あがってきたのですが、いきなりつまずいてしまい質問させて頂きます。
リンクの文字のカスタマイズでしげぞう様の仕様？をコピーして自分のスタイルシートに貼り付けたのですが、全く反映されません。文字の大きさなどをイジってみても何も変わらずです。フォントの文字のカスタマイズ、見出しのカスタマイズでも同様の現象です。何故でしょうか？ちなみに、サイドバーのカスタマイズはコピーして貼り付けたら反映されました
お手数お掛けしますがご教授のほどよろしくお願いします