WordPressの記事内やサイドバーのリンクをカスタマイズ

今回も引き続きWordPressのリンクの色や装飾部分のカスタマイズをして行きます。全体的なリンクの色やアンダーライン、太字にする等の装飾をしていきましょう。サンプルとして私の使っているテーマTwenty Twelveで解説します。

まずは一般的に使われている装飾について紹介していきます。リンク部分の装飾に関してはアンダーラインと太字があります。クリックされやすい色として有名なのが青色だと言われています。

そのため、このブログでも本文中のリンクは青色にしてリンク部分と分かりやすいように太字、アンダーラインを入れてます。

スポンサーリンク

記事コンテンツ(本文中)のリンクをカスタマイズ

今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)に記述していきます。記事内のリンクのカスタマイズは次の3つの部分を覚えると簡単です。

  • 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です。

サイドバー(ウィジェット部分)のリンク

このサイトでいうとこの部分。この部分の文字の大きさや装飾をカスタマイズしていきます。

リンクカスタマイズ-1

この部分の文字の高さと文字の大きさはこのようになってます。

/* サイドバーの文字 */
.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;}

以上でリンク部分のカスタマイズでした。

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

WordPressの記事内やサイドバーのリンクをカスタマイズ”に10件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    gori様

    わざわざ報告ありがとうございます!問題解決できて良かったです!また何か分からない部分などあればいつでもコメント下さい。また、今後も記事を増やしていくつもりなので今後もよろしくお願いします!

  2. gori

    しげぞう様

    ファイルを確認したところsingel.phpに見出しの装飾コードが貼り付けていました。削除したところ無事解決いたしました。ほんと助かります!それにしても、しげぞうさんのサイトは細かいところまで訪問者の為に見やすいように作られているなぁ、と感心することがたくさんあり色々と真似ばかりさせてもらってます。本当勉強になることが多く、今後も色々質問させてもらうと思いますが宜しくお願いします。

  3. しげぞう 投稿作成者

    gori様

    返信ありがとうございます。投稿したページの一番下に見出しの装飾コードが表示されるというのはおそらく、スタイルシート以外のPHPファイルに間違って装飾コードが貼り付けてあるのが原因だと思います。怪しいのは「content.php」もしくは「singel.php」だと思います。

    この2つのファイルを確認してみればどちらかに表示されているコードと同じ記述があると思いますので、確認をしてみて下さい。

  4. gori

    しげぞうさま

    ブログの幅や行間のコードを教えていただきありがとうございました。無事に反映され、とても読みやすくなり大満足です!
    しかしまた問題が、、、次は投稿したページの一番下に見出しの装飾のコードが表記されてしまいました。
    一度コードを消してみたのですが、なぜか表記されたままです。
    これはどういう問題が起こっているのでしょうか?
    本当問題ばっかですみません

  5. しげぞう 投稿作成者

    gori様

    コメントありがとうございます。読みやすいと思って頂けると非常に嬉しいです。サイドバーの太字ですが、スタイルシートに一度こちらを追加してみて下さい。

    /* サイドバーの太字 */
    .widget a {
        font-weight: bold;
    }

    それとブログの幅や行間はこちらのコードを追加して下さい。現在はフォントもちょっと変更してます。スタイルシートです。

    /* フォント */
    body{
    font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', '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 Pゴシック', '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;
    }
  6. gori

    しげぞう様

    やはり、なぜかコードが反映される場合と反映されない場合があります。
    今、反映されないのはサイドバーの文字を太字に変更するコードです。
    自分でスタイルシートもいじったりしていたのでもしかしたらコードがおかしくなっているかもしれないので一度見てもらいたいです、

    あとしげぞう様の「アフィリエイトで稼ぐ方法を全部話そうと思う」の文字のサイズ、行間、コンテンツ全体の幅、記事のコンテンツの横幅、サイドバーの横幅、がとても見やすくてぜひ真似をさせていただきたいのですがよろしければコードを教えてくれるとありがたいです。
    お手数おかけしますが宜しくお願い致します。

  7. しげぞう 投稿作成者

    gori様

    返信ありがとうございます。問題も解決できたようで良かったです。おそらく原因はブラウザのキャッシュではないかと思います。ブラウザには以前のデータを残しておいて再度そのページを開いた時にすぐに表示できるようにしています。「Ctrl」と「F5」を一緒に押すと再読み込み(リロード)されますので、反映される事がありますし、リロードしなくても時間が経てば反映される場合もあります。

    なので、別のブラウザで確認したり、スマホで確認すると反映されている場合って結構多いです。

  8. gori

    しげぞう様

    こんばんは、間違って途中で投稿してしまいました、すみません。
    今朝相談させてもらった件ですが、なぜか突然反映されてました、
    問題はとりあえず解決したのですが今回の問題はなぜ起きたのでしょうか?
    質問ばかりですみません

  9. しげぞう 投稿作成者

    gori様

    コメントありがとうございます。CSSが反映されない場合に確認するべきポイントは4つあります。

    1.使っているテーマの確認

    私の場合はTwenty Twelveを元にカスタマイズしていますが、これ他のテーマでは違う場合があります。もし違うテーマであればテーマ名を教えて下さい。

    2.リロード

    以前のデータが残っていて反映が確認できない場合がありますので、ブログを表示させて「Ctrl」と「F5」を一緒に押して確認して下さい。

    3.記述ミス

    リロードしても反映されない場合にはコードの記述ミスがあるかもしれません。CSSの途中で「 } 」が抜けていたり、1つミスがあるとそれより後の記述も反映されない場合がありますので、一度以前の記述も含めて確認をしてみて下さい。

    4.私の紹介コードのミス

    一応確認してから記事にしているのですが、時々私も記事内のコードにミスがあります。すみません!なので、上記3点でも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、反映されない原因を探す事ができると思います。どうぞよろしくお願いします。

  10. gori

    しげぞう様

    いつもこのサイトにはとてもお世話になっております、このサイトのお陰で 着々とサイトが出来あがってきたのですが、いきなりつまずいてしまい質問させて頂きます。
    リンクの文字のカスタマイズでしげぞう様の仕様?をコピーして自分のスタイルシートに貼り付けたのですが、全く反映されません。文字の大きさなどをイジってみても何も変わらずです。フォントの文字のカスタマイズ、見出しのカスタマイズでも同様の現象です。何故でしょうか?ちなみに、サイドバーのカスタマイズはコピーして貼り付けたら反映されました
    お手数お掛けしますがご教授のほどよろしくお願いします