

スワローってカッコいいんだけど、サイドバーがシンプルすぎなんだよね~
と思っているそこのあなた!
サイドバー(ウィジェット)タイトルをカスタマイズしたり、カテゴリーやタグの文字前にアイコンなんか埋めちゃったりしませんか?
早速、こちらをカスタマイズしていきましょう!
サイドバーのデザインをサイトの雰囲気に合わせよう!


カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください
スワロー
/* サイドバータイトル */ .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; }
ストーク(旧バージョン)
/* サイドバータイトル */ .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%に使う色)にすると、よりキレイに見えます^^
ではでは、お読みくださりありがとうございました♪