2016年04月05日

リンク色の変更方法

スポンサーリンク

さくらブログは、何故かリンクがピンク色です。
目立ちますので他ブログとの差別化は図れると思いますが、ピンク色のリンクは、ちょっと派手過ぎて見慣れません。

そこで、リンクの色を変更してみようと思います。
このカスタマイズをすると、記事、サイドバー内、記事下のCommentなど、全てのリンク部分の色が変わります。

この記事は、テンプレート「さくらブログの超シンプル(右サイドバー)」を使用している場合の解説となります。
基本的に、どのテンプレートでも同じようにカスタマイズ出来るはずですが、テンプレートによってコードや場所が違うかも知れません。
元のコードを全部コピーして、テキストエディタに貼り付けて保存しておきましょう。
バックアップを取っておけば、改造に失敗しても戻す事が出来ます。

さくらブログの【デザイン】→【デザイン設定】→適応されているデザインタイトルをクリックします。
CSSが表示されます。

下記CSSを一番下に追加してみましょう。


/* ▼-----リンク色の変更-----▼ */
a:link{
color:#0066cc; /* 未訪問のリンク色 */
text-decoration: none; /* アンダーラインなし */
}
a:visited{
color:#551A8B; /* 訪問済みのリンク色 */
text-decoration: none; /* アンダーラインなし */
}
a:hover{
color:#00ccff; /* カーソルが乗った時の色 */
text-decoration: underline; /* アンダーラインあり */
}
a:link {
font-weight:bold; /* リンクを太字にする */
}
/* ▲-----リンク色の変更 ここまで-----▲ */

a:linkで、リンクの色を全部青くしています。
a:hoverで、カーソルが乗ると明るい青になります。
a:visitedで、訪問済みのリンクを紫にします。


上記のように、私は未訪問のリンク色を青、訪問済みは紫にしています。
これは、ブラウザのリンクで良く使われる配色です。

黒字にした方が、ページデザイン的に落ち着いた配色になります。
色は、カラーコード表を載せているサイトが多くありますので、それを観て好きな色に変更してください。
アンダーラインの設定も必要無ければ、消して構いません。

必要な部分を書き換えたり、消したりして好きな形にしてください。

変更した結果を【プレビュー】してください。
満足行く形になったら【保存】を忘れずに。

サイドバーの文字色(リンク文字色)だけを変更する

〜追記(2016/05/11)〜

トップページに目次表示するようにしたら、トップページがリンクの青文字だらけになってしまいました。
全てのリンク色を一気に変更したのが原因です。

トップページ青文字だらけ画面

目次が無ければ、サイドバーのリンク色が青文字のままでも問題ありません。

トップページの目次表示は、1クリックで目的の記事に飛べますので非常に便利です。
ただ、最初に目に入る画面が、青文字ばかりでは見た目に宜しくありません。

そこで、サイドバーの文字色のみ黒く表示されるように変更します。

トップページサイドバー黒文字画面

どうでしょうか?
青い文字だらけではなくなり、見やすくなりました。

実際の手順をご説明します。

【デザイン】→【デザイン設定】→「適用されているタイトル」をクリックして、CSSを表示させます。
一番下までスクロールしたら下記のコードをコピペしてください。

/* ▼-----サイドバー文字色変更-----▼ */
.side a{
color: #000; /*文字色*/
}
.side a:link{
color: #000; /*リンクの文字色*/
}
.side a:visited{
color: #551A8B; /* 訪問済みのリンク色 */
}
.side a:hover{
color: #949494;/* カーソルが乗った時の色 */
}
/* ▲-----サイドバー文字色変更 ここまで-----▲ */

カーソルが乗った時の色や訪問済みの色など、必要無いものは削除しても構いません。

このブログは、明らかなリンクは青文字で、カーソルを乗せると明るい青にしています。
タイトルなどの黒文字にもリンクを張っていますが、見た目を重視して文字を青くしていません。
タイトルは、カーソルに乗った時に薄いグレーにする事にしているので、サイドバーのリンク色もこれに合わせています。

1つ違うところは、訪問済みで色が変わる点です。
タイトルとは違い、サイドバーリンクは訪問したかどうかの足跡を残した方が、解りやすくなりますので色を変えるようにしています。

サイドバーにあるカテゴリは、そのカテゴリ内の記事を全て見たら訪問済み色にしたいところです。
現状は、1カテゴリに5件の記事があっても、カテゴリをクリックしてリンク先の1記事見るだけで、そのカテゴリが訪問済み色になってしまいます。

目次のリンク色により、カテゴリのリンクから記事に飛んだとしても、どの記事を見たかは一目で解るでしょう。
カテゴリだけ訪問済み色にならないようにする事も考えましたが、細かく設定するのが面倒なのでやっていません。

ご参考にしてくださいませ〜!

スポンサーリンク
posted by ノービス at 05:14 | Comment(0) | さくらブログ カスタマイズ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: