buttoblog

ぶっとびの活動場所。ゲーム音楽とか作曲とかバイオリンとか日常とか。

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

f:id:buttobimusic:20161101183437j:plain

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

 

引用のデザイン

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

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

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

 

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

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

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

 

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

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

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

 

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

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

具体的には

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

に変えました。

 

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

 

広告を非表示にする