【スワロー・ストークカスタマイズ】サイドバーをカスタマイズしてみよう!

ばなやん@声優小説家
スワローってカッコいいんだけど、サイドバーがシンプルすぎなんだよね~

と思っているそこのあなた!
サイドバー(ウィジェット)タイトルをカスタマイズしたり、カテゴリーやタグの文字前にアイコンなんか埋めちゃったりしませんか?

早速、こちらをカスタマイズしていきましょう!

サイドバーのデザインをサイトの雰囲気に合わせよう!

ばなやん@声優小説家
カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加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%に使う色)にすると、よりキレイに見えます^^

ではでは、お読みくださりありがとうございました♪

スポンサーリンク
注意
特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です