スワローってカッコいいんだけど、サイドバーがシンプルすぎなんだよね～
と思っているそこのあなた！
サイドバー（ウィジェット）タイトルをカスタマイズしたり、カテゴリーやタグの文字前にアイコンなんか埋めちゃったりしませんか？
早速、こちらをカスタマイズしていきましょう！
サイドバーのデザインをサイトの雰囲気に合わせよう！
カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください
スワロー
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* サイドバータイトル */ .widgettitle { background: #fffefc; border-bottom: 3px solid #c4eff2; color: #565656; font-size: 1em; padding: .65em .8em; margin-top: 0; margin-bottom: .75em; overflow: hidden; } /* サイドバーカテゴリー */ .widget.widget_categories li a::before{ font-family: "fontawesome"; content: '\f07b'; margin-right: 3px; } .widget.widget_categories li ul a::before{ font-family: "fontawesome"; content: '\f15c'; color: #888; margin-left: 4px; } .widget.widget_categories li ul ul a::before{ font-family: "fontawesome"; content: '\f101'; color: #a0a0a0; } |
ストーク
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* サイドバータイトル */ .widgettitle { background: #fffefc; border-bottom: 3px solid #c4eff2; color: #565656; font-size: 1em; padding: .65em .8em; margin-top: 0; margin-bottom: .75em; overflow: hidden; } /* サイドバーカテゴリー */ .widget.widget_categories li a::before{ font-family: "fontawesome"; content: '\f07b'; margin-right: 3px; } .widget.widget_categories li ul a::before{ font-family: "fontawesome"; content: '\f15c'; color: #888; } .widget.widget_categories li ul ul a::before{ font-family: "fontawesome"; content: '\f101'; color: #a0a0a0; } /* サイドバータグ */ .widget.widget_tag_cloud a.tag-cloud-link{ padding: 0.1em 0.6em; margin: 0 0.2em 0.3em 0; display:inline-block; font-size: 13px!important; background: #fefdfb; border-radius: 3px; color: #3f3f3f; box-shadow: 0 0 1px; opacity:0.8; } .widget.widget_tag_cloud a.tag-cloud-link::before{ font-family: "fontawesome"; content: '\f02b'; margin-right: 3px; } .widget.widget_tag_cloud a.tag-cloud-link:hover{ filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; opacity: 0.4; color: #383838; } |
以上で終了です！
カラーはメインカラー（全体の70%に使う色）やその同系色（全体の25%に使う色）にすると、よりキレイに見えます^^
ではでは、お読みくださりありがとうございました♪
