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

Sponsored Link

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

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

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

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


Sponsored Link

リンクの色は青がいい?

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

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

  • ブログのカスタマイズで必死
  • このブログのメインである英検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でした!

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

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

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


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

息子と娘にこどもちゃれんじを始めました

幼児教育にまったく興味のなかった筆者。

そのせいなのか、3ヶ国語が入り乱れているせいなのか、息子が「発達遅れ」だと病院の先生から言われ、いろいろ検討した結果お家で出来る知育をはじめました。

こどもちゃれんじ」、モンテッソーリ、幼児向けの「ポピー」に挑戦中。

0歳向けの「こどもちゃれんじ」は、モンテッソーリ教具としても使えそうなので、生後2ヶ月の娘も受講の登録をしました。

この記事を書いた人
Ai
Ai

ミニマリストに憧れる、外国語が好きな2児(2歳&0歳)のママ。

育休中に日本語教育能力検定試験と英検1級の合格を目指しています。ハーフの子の育児、知育、外国語、お家のこと、家計など気ままにブログで書いています。

取得資格:仏検3級、TOEIC830、日本語教師養成講座420時間

Aiをフォローする
はてなブログブログのこと
Sponsored Link
Aiをフォローする
ゆるミニマリズム

コメント

タイトルとURLをコピーしました