はてなブログ

【はてなブログ】リンクの色と目次の色をカスタマイズ

f:id:langnerdmom:20210323125531j:plain:w300
こんにちは!3月9日から始めたこのブログ「ゆるミニマリズム」。

昨日までに、だいぶ色んなカスタマイズを試してみました。

そしてそれを、出産するまでに超特急で忘備録を書いちゃう『はてなブログをカスタマイズ』シリーズ。

今回は、リンクの色について発見したことをご紹介しますね


リンクの色は青がいい?

参考記事ブログのリンクテキストに最適な色は?色々試した結果おすすめはこれ! | マネートライ

という記事を読んでいて、読者目線だとリンクの色は青色が分かりやすいことを知る。

  • ブログのカスタマイズで必死
  • このブログのメインである英検1級のための勉強を全然していない焦り

そんなこんなで上記の記事の色を、まるまるっと使わせてもらうことにしました。笑

リンクの色
リンクの色



リンクを選択時
リンクを選択時の色

.entry-content a:not(.btn){
color: #1A0DAB !important;
text-decoration: none;
}
.entry-content a:hover:not(.btn){
color: #f89172 !important;
text-decoration: underline;}

上記のコードをデザインCSSに貼り付けるだけ💛

:not(.btn)とは?

:not(.btn)とは()内のコードには適用しないという意味になります。


()内の.btnを変えれば他のものに使えます。

使っているボタンデザインのリンク色も青色になってしまったので、青色にならないようにこのコードを加えています。

必要ない方は、:not(.btn)をまるっと消して大丈夫です!

変わってしまった目次の文字色を戻す

リンクの色を変えるとなぜだか、目次にも作用しちゃうんですよね。

参考記事【はてなブログ】目次のカスタマイズ(コピペで簡単&解説付き) – Bambi's BLOG

で、たくさんの目次が紹介されているのを発見。

青色に変わってしまった、目次の色を変更するため参考にしました。

/*目次の中*/
.entry-content .table-of-contents li a,
.entry-content .table-of-contents li a:visited {
color: #ee8ea0 !important; /* リンク文字の色 */
text-decoration: none; /* リンクの下線消す */}
.entry-content .table-of-contents li a:hover {
color: #8ea1ed !important; /*マウスオーバーの色 */}

color: #○○○○○○ ;

2か所の「○○○○○○」の部分を好きなカラーに変更すればOKでした!

自分の好きなリンクのお色に変えるもよし。

参考にしたサイト様」のお色をまるっと使わせて頂いちゃうのもよし。

自分好みのブログ作りを一緒に楽しみましょう~!


現在は、はてなブログのテーマストアにある「パステルノート」を使用しているので、違うリンクカラーになっています。