buttoblog

ぶっとび(buttobimusic)の音楽活動や演奏会感想など書いてます。ご依頼もこちらから!

ブログカスタマイズ6【引用、画像に枠つけてクリックで拡大されないようにした】

f:id:buttobimusic:20161101183437j:plain

今回のカスタマイズはずっと気になってた「引用」デザイン画像に枠線をつけてさらにクリックで拡大されないようにしました。
他こまごまと微調整!ずっと放置してた目次も改善したよ! 

 

引用のデザイン

引用はこんな感じにカスタマイズしましたー!

使ってみて使いやすいように変えてこうねー。
これは太字マーカーだとこう。

使わせてもらったのはこちらのサイト。
30種類もデザイン案があって見てるだけでも楽しいです(^ω^)

ただ、コピペしただけだとデザイン崩れがあったので、blockquoteの中に自力で以下のコードを足してそれっぽくしました。

    border-width: 1px;
    border-style: solid;
    border-color: #ffffff;

 

画像クリックで拡大表示されないようにする

PCでそんな気なく画像クリックしたら拡大表示されるのが結構面倒だったのでやめてみました!

こちらのサイトのコードをそのままコピペさせていただきました。書く場所はフッタ。

 

画像にうっすら枠をつける

画像の背景が白いときにブログの背景と同化しちゃって見にくい気がしてたので、フラットな枠を薄くつけてみました。

画像全部に枠を付ける方法はこちら。記事の下の方、7にあります。CSSに書くタイプ。

 

ただこれだとサイドバーの画像にも枠がついてしまい、私はどうもそれが好きじゃなかったのでこちらを参考にさせていただきました。ヘッダーに書きます。

Amazonアソシエイトについてのところをサイドバーの画像に変更。
正直コピペでカスタマイズしてる身なのでよくわかってないですが、自分でサイドバーのソース見てclass指定の文字に置き換えてみたらできたからオッケーかな!笑

具体的には

 .hatena-asin-detail-image
 →.urllist-image-link

に変えました。

 

※追記※ 2021/1/13

特定の画像に枠線をつけないようにしたかったので、こちらのページを参考にコードを付け足しました。

 

目次のカスタマイズは以前書いた記事を編集してそちらに書きましたー。