今日はカスタマイズ記事をお届けします。
はてなブログの記事で選択した記事をぼかしすカスタマイズになります。
探していたけどなかなかなかったので、自分で作ってみました。
あっという間にできて簡単だったので、みなさんもぜひやってみてください。
カスタマイズ
さっそくカスタマイズしていきます。
コードは以下の3行で終わり。
.archive-entry：hover{
opacity:0.7;
}
カスタマイズ場所
上のコードを下の場所に貼り付けてください。
ダッシュボード→デザイン→スパナマーク→デザインCSS
ダッシュボード→デザイン
カスタマイズ（スパナマーク）
デザインCSS
この赤枠にコードをペーストします。
カスタマイズ結果
カスタマイズ結果はこんな感じ。
マウスカーソルを乗せた記事が薄い白色になります。
モヤがかかったようになり、選択しているということが分かりやすくなりますね。
Before
After
使用しているテーマ
当ブログでは、テーマ【UnderShirt】を使用しています。
コード解説
はてなブログでは、記事のclassは「.archive-entry」となっています。
.archive-entryの{}内にコードを書いていくことになります。
記事を選択した時
.archive-entry:hover
が記事を選択した時。
これより以下のコードで色や文字サイズなどを指定することになります。
選択した記事を透けさせる
そして以下のコードで記事を透けさせています。
opacity:0.7;
透け方を変える
透け方を変えるには「0.7」の数字を0.1単位でいじってあげればOKです。
１が通常です。
数値を大きくしたら濃くなり、
数値を小さくしたら薄くなります。
カスタマイズで見やすいTOPページを
以上が記事一覧のカスタマイズです。
おしゃれでなおかつ、みやすいTOPページを心掛けたいですね。
それでは。
その他のカスタマイズ
その他にもカスタマイズ記事ありますので、よかったら参考にしてください。
はてなスター機能を残したまま非表示にする
記事一覧のカスタマイズ
記事一覧を大きなカード型へ
記事を枠線で囲む
選択した記事を透けさせるカスタマイズ
サイドバーをカスタマイズ
サイドバーを見やすくする