ネットと副業

副業が本業の収入を大きく超えたので会社やめました

CSS はてなブログ

《はてなブログ》記事のタイトルのマウスオーバー時の下線をなくしたいのでCSS改修します。

投稿日:

f:id:nekonkeo:20151004183248j:plain

前々から気がついてはいたものの、まぁいいかと放置してたのです。

このはてなブログ、記事のタイトルがリンク仕様になっててマウスオーバーすると下線でるのがあんま好かんです(;´Д`) 記事のタイトルがそこまでリンクアピールする必要があるかしらん。

ってことで、CSS改修します。

もとの状態はこんな感じ。

この記事を読んでいただいているということは、すでにCSS改修が完了してしまっているというわけで、どんな状態だったかは画像で失礼します。

通常こんな感じで

f:id:nekonkeo:20151004183612j:plain

で、マウスオーバーすると下線がつく

f:id:nekonkeo:20151004183640j:plain

ベースの色味が青が気にいらねーのと、訪問済みだと色が微妙にかわってしまい気持ち悪いです…(;´Д`)色も変えちゃいましょう。

早速、デザインCSSの改修作業

てことで、記事タイトルのそもそも文字色を変更、マウスオーバーしても下線が出ないようにし、訪問済みだろうが色が変化しないようにします。文字色は本文と同じように真っ黒ではなく、ちょいとグレー気味にします。

はてなブログの管理画面のメニューからデザインを選びます。

f:id:nekonkeo:20151004183909j:plain

スパナマークを選んで

f:id:nekonkeo:20151004184000j:plain

一番下デザインCSSを開きます

f:id:nekonkeo:20151004184143j:plain

すると、CSS飛び出るので、この一番下にCSSを追加していきます。

f:id:nekonkeo:20151004184359j:plain

CSSいじくるので、このデザインCSSだけでも必ず現状をバックアップとりましょう。私の場合CSS全体をコピーして、テキストエディタにペースト、日付つけて保存しておきます。

f:id:nekonkeo:20151004184445j:plain

テキストエディタにペーストして保存しておきます。

ブログ全体のリンクとなるところはすべてひとくくりに、マウスオーバーや訪問済みの場合の色変更の設定がされているようなので、記事タイトルのみに変更をぶっこみます|д゚)ノ⌒●

まず色の変更。記事本文と同じ色#454545をentry-titleに設定します。

.entry-title a{
      color:#454545
}

さらに、リンクをマウスオーバーしたときに何も変更されないようにします

.entry-title a:hover{
       text-decoration:none;
}
すごく余談ですが、このCSS属性text-decoration好きです。デコレーションてのがケーキみたいで(o o);

そして、訪問済みの場合もデフォルトと同じ色を設定しておきます。

.entry-title a:visited{
       color:#454545;
}

以上3点をデザインCSSの一番下にこんな感じでぶっこみます|д゚)ノ⌒●

f:id:nekonkeo:20151004184815j:plain

CSSの中に全角スペースなど余計なものが入るとトラブルの原因になるので、入らないように注意しながらそーっと作業します(;´Д`)

完成後こんな感じです。

f:id:nekonkeo:20151004185414j:plain

うんうん、色がしまっていい感じです。

もしかして、テーマによってCSSクラス名の.entry-titleってとこが違うかもしれんです。改修自体は大袈裟なものではないですが、何が起こるかわかりませんので改修自体は自己責任でお願いします。

前述したとおり、テキストエディタなどにコピペして、自分のパソコンとかクラウド上とかにバックアップとっておきましょう。

トラブったときにすぐ戻せるように( ・∀・)ノ

 

-CSS, はてなブログ

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

《はてなブログ》超簡単 記事の見出しを飾り付けてみるCSS

記事の途中で出てくる見出しがちょっと寂しいので、飾ってみたいと思います。自分でデザイン考えてCSSをいじくりたおすのも楽しい作業ですが、今回は簡単にできそうな方法で進めてみます。 サンプルを探します。 …

no image

《CSS》HTMLでテキストを箱打ちしたい→印刷の文字組みまで遡る。

活版印刷からCSSにまで。 Webデザインをイラストレーターで感覚的に作業をつづけていて、「さてHTMLにするか」ってコーディングに入るときに、「おや?デザインしたはいいけど、これってCSSでどうやっ …

no image

はてなブログからWordPressに引越

  まず、はてなブログのデータをエクスポートします。 “設定”の“詳細設定”ページ、下のほうにエクスポートリンクがあります。   エクスポートするとテキストファイルがダウンロードされます。このファイル …

no image

〈はてなブログ〉記事カテゴリーの設定方法

  ブログには記事のカテゴリーを設定する機能があります。 たとえば、デザイン関連の記事であれば、 「デザイン」というカテゴリをつけておくと そのブログの、「デザイン」カテゴリの記事だけを、 まとめて見 …

no image

GoogleのBloggerから、はてなブログへ引越しする方法をまとめました

前置き Bloggerからエクスポートする はてなブログにインポートする   はてなブログを1つ増やす   はてなブログにインポートできる形式   BloggerエクスポートファイルをMT形式に変換す …