ブログをカスタマイズした。

f:id:Kawan0116:20210507164633p:plain

昨日、ブログのカスタマイズをしたのでご紹介する!

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

サイドバー(黒い部分)のカスタマイズを行った。

画像の上にマウスの矢印を乗せた時、画像が変化する仕組み。

CSS的にはこんな感じになる。

.urllist-with-thumbnails li .urllist-image:hover {
  opacity: 0.2;
  border: 0;
}

opacityで透明度を調整している。とても簡単である。

なお、上のをコピペしても無理な場合があると思うので、自分のブログのHTMLやCSSを確認してカスタマイズするように。

トップページの画像のカスタマイズ

トップページの画像の上にマウスの矢印を持って行くと変化する仕組みである。

CSSを書いてみよう。

.page-archive .entry-thumb:hover {
  opacity: 0.81;
}

こちらもopacityで調整している。

opacityを使っただけ

今回は、opacityを使っただけである。

モダンブラウザに対応していると思う。

レガシーブラウザであるIEにも対応しているのである。

対象のclassが分かれば、実装は簡単である。

なお、マウスの矢印が画像に乗った時に変化させる為、「hover」を使っている。

なので、マウスの矢印を画像の上に乗せた時に何か変化させたい場合は「hover」を使えば良いだろう。

CSSにあまり詳しくない人でも比較的簡単だと思う。

もちろん、対象のIDなりclassなりを探る必要はあるけどね。

chromeだったらデベロッパーツールで確認出来るので、もし、カスタマイズをしたいという場合は、chromeを使っても良いかもである。

僕は、chromeのデベロッパーツールを使っているけどね。

前は、Edgeを使っていたのだけど、まぁ、chromeが人気なのでchromeを使っている。

なお、今回はレイアウトに関する部分ではない。

例えば、コンテンツとサイドバーの配置を変えたら、それなりに対応する必要があるし、各種ブラウザで表示のテストをしないといけない。

これが地味に面倒なんだよねぇ~。

なので、出来るだけレイアウトに関する部分は避けているのである。

さいごに

今回はマイナーアップデート。

自分に言いたい。

「ブログデザインをする暇があるならブログ書け!」と(笑)。

まぁ、ブログをカスタマイズするのも楽しみの1つ。

今後もブログをカスタマイズするだろう・・・。

追記(2021年5月30日)

現在、新しい方法に切り替わっている。サイドバーおよびトップページの画像の上にマウスの矢印を持って行くと拡大させるようにした。

また、カテゴリーボタンの改造も行った。

コードの公開は出来ないというかしたくても出来ないのである。

何故なら、コードが絡まって何が何やら分からないからだ・・・。

なので、もし僕と同じようにしたい方はネット検索するべし。