QooQカスタマイズ：人気の投稿ガジェットの記事ごとに区切り線をつける方法

毎日日課にしてるqooqカスタマイズの記事を今日もかきますよ～！

だいぶんqooqのHTMLが読めるようになってきて、それにbloggerだけの特別な書き方も調べながらちょっとずつわかってきました！

最初は知恵熱かな…？ていうくらい頭が痛かったんですが笑やっぱり人間なれってひつようですね～。

今日は人気の投稿ガジェットの記事ごとに区切り線をいれるカスタマイズを紹介しちゃいます。

完成予想図

↓↓↓これが！↓↓↓


こうなる！

人気の投稿ガジェットに枠線をつける！

ささ！それではqooqのカスタマイズを始めちゃいましょう！

今回もHTMLの編集はしないのでバックアップはとらなくて大丈夫！カスタマイズからcssの追加でカスタマイズします。

今回もこれをコピペするだけ！カスタマイズ完了っ！

↓↓↓これをコピペ！↓↓↓
.PopularPosts li {
  border-bottom :solid 1px $(other.border);
}
↑↑↑ここまでコピペ↑↑↑

線のカスタマイズ！

コピペしたコードの"border-bottom"の部分を"border"にすると人気の投稿ガジェットの記事ひとつひとつの周りに線がぐるっとひかれます。

コピペしたコードの”solid”の部分を”dotted”に変えると線の種類がドット、点線になります。

”1px”の数字を大きくすると区切り線の太さが太くなります。

"$(other.border)"のところは色です。

読んでみるとカスタマイズカンタン！

bloggerの人気の投稿ガジェットの記事ごとの区切り線、なくてもきれいだけど、あってもきれいでしょ？

わたしはうっすら入ってる方がかわいいっ！と思うのでつけちゃいました。

bloggerだけじゃなくてもホームページのソースコード、右クリックして”検証”っていうのを押せばわかりやすく確認できるをしってからカスタマイズがとてもやりやすくなりましたっ！

追記：
…とqooqの人気の投稿ガジェットのカスタマイズが終わった！…ハズだったんですがさらにキレイにする追加のカスタマイズを行いました♪
続：qooqの人気の投稿ガジェットのカスタマイズ