アフィモンのネットで稼ぐぞ!初心者向けアフィリエイトで小遣いを稼ぐ方法

WordPressテーマ『Cocoon』のサイドバーの見出しをカスタマイズ

Cocoonのデフォルトのサイドバーの見出し

デフォルトのサイドバーの見出しもシンプルで見やすいと思いますが、このサイドバーの見出しを少しカスタマイズしていきます。

私のWordPressの環境はCocoonの親テーマのみをインストールしている状態ですので、子テーマも入れた状態での確認ができません。もしも変なレイアウトになった場合はゴメンナサイ。

デフォルトサイドバーの見出しのリセット

まずは、デフォルトのサイドバーの見出しの背景色、パッディング(内部の余白)をリセットします。文字の大きさ、太文字、マージン(外部の余白)はそのままにします。

/*デフォルトサイドバー見出しリセット*/
.sidebar h3{
	padding: 0;
	background: none;
	border-radius: 0;
}

上のコードをコピーします。

「外観」>「カスタマイズ」をクリックします。

「追加CSS」をクリックします。

赤枠内にペーストして、「公開」をクリックします。

このようにデフォルトのサイドバーの見出しがリセットされたと思います。

サイドバーの見出しの変更方法

例えば、下のサイドバーの見出しに変更したい場合、

/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	padding: 10px 0 10px 0;
	background: #CCCCCC;
	border: 1px solid #333333;
	text-align: center;
}

コードをコピーします。

「追加CSS」の青枠内にペーストして「公開」をクリックします。
(青枠の上にある「デフォルトサイドバー見出しリセット」はそのまま残しておいて下さい。)

このようにサイドバーの見出しが変わります。

色を変更する場合

例(上の青枠)のコードの中で #****** と英数字がありますが、ココは色を指定する箇所です。borderは枠、backgroundは背景です。色見本を見て、好きな色に変更して下さい。(先頭の「#」、最後の「;」は入れ忘れないで下さい。)

簡単ですよね。

サイドバーの見出しデザインとコード

/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	padding: 5px 0 5px 0;
	text-align: center;
}
/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	background: linear-gradient(transparent 50%, #FFFF00 50%);
}
/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	padding: 5px 0 5px 0;
	text-align: center;
	background: #0085B2;
	color: #FFFFFF;
}
/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	padding: 5px 0 5px 0;
	text-align: center;
	background: #FF7F00;
	color: #FFFFFF;
	border-radius: 40px;
}
/*サイドバー見出しカスタマイズ*/
.sidebar h3{
	padding: 5px 0 5px 0;
	text-align: center;
	border: 3px dotted #FFBFBF;
	color: #FF9999;
	border-radius: 40px;
}
スポンサーリンク
スポンサーリンク
アフィモンのネットで稼ぐぞ!初心者向けアフィリエイトで小遣いを稼ぐ方法

コメント

タイトルとURLをコピーしました