buttoblog

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

ふきだし追加&リストと目次のデザイン【ブログカスタマイズ10】

f:id:buttobimusic:20161101183437j:plain

地味にやってたカスタマイズ、備忘録として書いときます。

 

 

ふきだしを入れてみた

f:id:buttobimusic:20170922212413p:plain

ヘローーーぶっとびだよーーーん

これ!!やってみたかった!!!

今回もサルワカさんのページを参考にさせていただきました。もうサルワカさんだいすき…お世話になりっぱなし…

まだ色合いとか大きさとかは変えるかもです。もう少しアイコン大きい方がいい気がしてるし…。

 

可愛いリストを使いたい

f:id:buttobimusic:20170922212413p:plain

普段使いは普通のリストでいいとして、なんかちょっと強調したいときとか特徴的なリストを使ってみたいなぁ〜〜〜〜

ということで作ってみましたジャン!!!

  • こんな感じで
  • チェックマークになるんだよ〜〜〜
  • 長文だとどんな感じになるか見てみたいからここは長めの文章にしてみる。といっても特に書くこともないんだけど、だからといって伸ばし棒とかにょろんとかにすると不思議なところで改行されるからいやだなぁと思ってさぁ。ちなみに今のBGMはスーパーファミコン悪魔城ドラキュラの「鍾乳洞」だよ大好きだよ悪魔城ドラキュラ山根ミチル…!!
    こんくらいでどうかな?brも試してみてるのさ。
  • いいね!

こちらもサルワカさんのやり方でございます。

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

全部のリストに反映されちゃうと困るのでclassの名前指定(っていうのかな)は自分でやってみました。

あと記事における表の位置をもうちょっと変えたかったので自分で margin を追加しました。こんくらいならスマホで見たときもちょうどいいかな?
具体的には

 margin-right: 15px;
 margin-left: 15px;

をul.の中に追加したよー。


 

追記:目次のデザイン一新

とりあえずでやってた目次のデザインを変えました!可愛い!
まぁまだこれも取り急ぎなんだけども、でも気に入ったのができたぞ(^ω^)

f:id:buttobimusic:20180926120958p:plain
(スクショしたのはこちらの記事の目次)

こちらのストライプデザインを参考にさせていただきました。色合いは自分のブログ用にカスタマイズ。

あとマウスオーバーで下線が入るようにしたかったので

 .entry-content ul.table-of-contents li a:hover{
 text-decoration:underline;}

を追加しました。

 

しかし段々HTMLとかCSSのことがわかってきた感あるぞ〜〜〜!前よりいろいろ調整効くようになってきて我ながら嬉しい(^ω^)

他にもやりたいカスタマイズが結構あります!
この調子でどんどんいい感じにしていきたいでござる〜〜〜(^ω^)(^ω^)(^ω^)