今回のカスタマイズはずっと気になってた「引用」デザインと画像に枠線をつけてさらにクリックで拡大されないようにしました。
他こまごまと微調整！ずっと放置してた目次も改善したよ！
引用のデザイン
引用はこんな感じにカスタマイズしましたー！
使ってみて使いやすいように変えてこうねー。
これは太字。マーカーだとこう。
使わせてもらったのはこちらのサイト。
30種類もデザイン案があって見てるだけでも楽しいです(^ω^)
ただ、コピペしただけだとデザイン崩れがあったので、blockquoteの中に自力で以下のコードを足してそれっぽくしました。
border-width: 1px;
border-style: solid;
border-color: #ffffff;
画像クリックで拡大表示されないようにする
PCでそんな気なく画像クリックしたら拡大表示されるのが結構面倒だったのでやめてみました！
こちらのサイトのコードをそのままコピペさせていただきました。書く場所はフッタ。
画像にうっすら枠をつける
画像の背景が白いときにブログの背景と同化しちゃって見にくい気がしてたので、フラットな枠を薄くつけてみました。
画像全部に枠を付ける方法はこちら。記事の下の方、７にあります。CSSに書くタイプ。
ただこれだとサイドバーの画像にも枠がついてしまい、私はどうもそれが好きじゃなかったのでこちらを参考にさせていただきました。ヘッダーに書きます。
Amazonアソシエイトについてのところをサイドバーの画像に変更。
正直コピペでカスタマイズしてる身なのでよくわかってないですが、自分でサイドバーのソース見てclass指定の文字に置き換えてみたらできたからオッケーかな！笑
具体的には
.hatena-asin-detail-image
→.urllist-image-link
に変えました。
※追記※ 2021/1/13
特定の画像に枠線をつけないようにしたかったので、こちらのページを参考にコードを付け足しました。
目次のカスタマイズは以前書いた記事を編集してそちらに書きましたー。
