効率165センチメートル

ちいさな体で効率的に生きていく

【コピペOK】はてなブログで選択した記事を透けさせる【カスタマイズ】

f:id:k07_20:20191011230947j:plain

 今日はカスタマイズ記事をお届けします。

 

はてなブログの記事で選択した記事をぼかしすカスタマイズになります。

探していたけどなかなかなかったので、自分で作ってみました。

 

あっという間にできて簡単だったので、みなさんもぜひやってみてください。

カスタマイズ

さっそくカスタマイズしていきます。

 

コードは以下の3行で終わり。

 

.archive-entry:hover{
opacity:0.7;
}

 

カスタマイズ場所

上のコードを下の場所に貼り付けてください。

 

ダッシュボード→デザイン→スパナマーク→デザインCSS

 

 ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 

 カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

 

 デザインCSS

f:id:k07_20:20191019092600p:plain

 

この赤枠にコードをペーストします。

カスタマイズ結果

カスタマイズ結果はこんな感じ。

マウスカーソルを乗せた記事が薄い白色になります。

 

モヤがかかったようになり、選択しているということが分かりやすくなりますね。

Before

f:id:k07_20:20191011230755p:plain

After

f:id:k07_20:20191011225930p:plain

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

コード解説

はてなブログでは、記事のclassは「.archive-entry」となっています。

 

.archive-entryの{}内にコードを書いていくことになります。

記事を選択した時

.archive-entry:hover

 

が記事を選択した時。

 

これより以下のコードで色や文字サイズなどを指定することになります。

選択した記事を透けさせる

そして以下のコードで記事を透けさせています。

opacity:0.7;

透け方を変える

透け方を変えるには「0.7」の数字を0.1単位でいじってあげればOKです。

 

1が通常です。

 

数値を大きくしたら濃くなり、

数値を小さくしたら薄くなります。

カスタマイズで見やすいTOPページを

以上が記事一覧のカスタマイズです。

 

おしゃれでなおかつ、みやすいTOPページを心掛けたいですね。

 

それでは。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com