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

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

Cocoonのデフォルトの見出し

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

今回は「投稿」「固定ページ」両方のメイン部分の見出しをカスタマイズしていきます。

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

デフォルト見出しのリセット

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

/*デフォルト見出しリセット*/
.article-header h1,
.entry-header h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
	padding:0;
	border:none;
	background:none;
}

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

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

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

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

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

見出しの変更方法

例えば、下の見出しに変更したい場合、

ボーダーで囲った見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border: 1px solid #333333;
	background: #EEEEEE;
	padding: 10px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border: 1px solid #333333;
	background: #EEEEEE;
	padding: 10px;
}

例としてH2の見出しを変更するの「H2の場合」のコードをコピーします。

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

このようにH2の見出しが変わります。

変更する対象の見出しを指定する

例では、タイトル(H2)を変更するので、.entry-content h2 と指定しましたが、タイトル(H3)を変更したい場合は、.entry-content h3 と指定します。(変更する箇所が2か所ある場合もあります。)他のH5、H6も同じやり方です。ちなみにタイトル(H1)はそのままコピーしてペーストして下さい。

色を変更する場合

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

かっ…、簡単ですよね(汗)

見出しデザインとコード

左に太いボーダーと下線の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border-bottom: 1px solid #333333;
	border-left: 5px solid #333333;
	padding: 10px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border-bottom: 1px solid #333333;
	border-left: 5px solid #333333;
	padding: 10px;
}

ボーダーで囲んだ見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border: 1px solid #333333;
	padding: 10px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border: 1px solid #333333;
	padding: 10px;
}

男ならシンプルで太目の下線一本の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border-bottom: 5px solid #333333;
	padding: 10px 0 10px 0;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border-bottom: 5px solid #333333;
	padding: 10px 0 10px 0;
}

ドットにしたら可愛くなる説的な見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	padding: 10px 0 10px 0;
	border-bottom: 3px dotted #FF9999;
	color: #FF9999;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	padding: 10px 0 10px 0;
	border-bottom: 3px dotted #FF9999;
	color: #FF9999;
}

配色のセンスが問われる下線の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	padding: 10px 0 10px 0;
	border-bottom: 6px solid;
	border-image: linear-gradient(to right, #D900D9 0%, #FFC926 100%);
	border-image-slice: 1;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	padding: 10px 0 10px 0;
	border-bottom: 6px solid;
	border-image: linear-gradient(to right, #D900D9 0%, #FFC926 100%);
	border-image-slice: 1;
}

途中で色が変わる下線の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	position: relative;
	padding-bottom: 10px;
	border-bottom: 4px solid #CCCCCC;
}
.article-header h1::after,
.entry-header h1::after{
	position: absolute;
	content: "";
	border-bottom: solid 4px #0085B2;
	bottom: -4px;
	width: 20%;
	display: block;	
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	position: relative;
	padding-bottom: 10px;
	border-bottom: 4px solid #CCCCCC;
}
.entry-content h2::after{
	position: absolute;
	content: "";
	border-bottom: solid 4px #0085B2;
	bottom: -4px;
	width: 20%;
	display: block;	
}

最初の文字だけが大きく赤色の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	padding: 10px 0 10px 0; 
	border-bottom: 1px solid #333333;
}
.article-header h1:first-letter,
.entry-header h1:first-letter{
	font-size: 150%;
	color: #FF0000;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	padding: 10px 0 10px 0;
	border-bottom: 1px solid #333333;
}
.entry-content h2:first-letter{
	font-size: 150%;
	color: #FF0000;
}

はい。ここテストに出まーすの見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	background: linear-gradient(transparent 50%, #FFFF00 50%);
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	background: linear-gradient(transparent 50%, #FFFF00 50%);
}

はい。ここ絶対にテストで出まーすの見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	background: linear-gradient(transparent 0, #FFFF00 0);
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	background: linear-gradient(transparent 0, #FFFF00 0);
}

細い上線とちょっと太い下線一本の見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border-top: 1px solid #468C00;
	border-bottom: 3px solid #468C00;
	padding: 10px;
	background: #EEEEEE;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border-top: 1px solid #468C00;
	border-bottom: 3px solid #468C00;
	padding: 10px;
	background: #EEEEEE;
}

左のボーダーの色を変えた見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 5px solid #33CCFF;
	padding: 10px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border-top: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 5px solid #33CCFF;
	padding: 10px;
}

会社のホームページでよく見る見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border:1px solid #CCCCCC;
	background:#FFFFFF;
	padding:10px 10px 10px 25px;
	position:relative;
}
.article-header h1:before,
.entry-header h1:before{
	content:'';
	position:absolute;
	top:8px;
	bottom:8px;
	left:8px;
	border:5px solid #FF0000;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border:1px solid #CCCCCC;
	background:#FFFFFF;
	padding:10px 10px 10px 25px;
	position:relative;
}
.entry-content h2:before{
	content:'';
	position:absolute;
	top:8px;
	bottom:8px;
	left:8px;
	border:5px solid #FF0000;
}

影を使って浮き上がっているように錯覚させる見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border-top: 1px solid #E1E1E1;
	border-right: 1px solid #A7A7A7;
	border-bottom: 1px solid #B2B2B2;
	border-left: 1px solid #E9E9E9;
	box-shadow: 5px 5px 10px #929292;
	background: #FFFFFF;
	padding: 20px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border-top: 1px solid #E1E1E1;
	border-right: 1px solid #A7A7A7;
	border-bottom: 1px solid #B2B2B2;
	border-left: 1px solid #E9E9E9;
	box-shadow: 5px 5px 10px #929292;
	background: #FFFFFF;
	padding: 20px;
}

ななめ45°ではなく、ななめ30°のストライプの見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	background:repeating-linear-gradient(-30deg, #DDEEFF 0,#DDEEFF 10px, #FFFFFF 10px, #FFFFFF 20px);
	padding:20px;
	color:#007FFF;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	background:repeating-linear-gradient(-30deg, #DDEEFF 0,#DDEEFF 10px, #FFFFFF 10px, #FFFFFF 20px);
	padding:20px;
	color:#007FFF;
}

カフェの看板みたいな縦ボーダーの見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	background: repeating-linear-gradient(90deg, #663300 0, #663300 10px, #824100 10px, #824100 20px);
	padding: 20px;
	color: #FFFFFF;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	background: repeating-linear-gradient(90deg, #663300 0, #663300 10px, #824100 10px, #824100 20px);
	padding: 20px;
	color: #FFFFFF;
}

ドットで囲んだだけで可愛くなる見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border: 3px dotted #FFBFBF;
	border-radius: 10px;
	padding: 20px;
	color: #FF9999;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border: 3px dotted #FFBFBF;
	border-radius: 10px;
	padding: 20px;
	color: #FF9999;
}

ふるゆわ系女子に使ってほしいステッチ風見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	color: #FFFFFF;
	border: 2px dashed #FFFFFF;
	box-shadow: 0 0 0 4px #F9B8CD;
	background: #F9B8CD;
	border-radius: 10px;
	padding: 20px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	color: #FFFFFF;
	border: 2px dashed #FFFFFF;
	box-shadow: 0 0 0 4px #F9B8CD;
	background: #F9B8CD;
	border-radius: 10px;
	padding: 20px;
}

小見出しで使えそうな吹き出し風見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	position: relative;
	padding: 20px;
	background: #EEEEEE;
	border-radius: 5px;
}
.article-header h1::after,
.entry-header h1::after{
	position: absolute;
	top: 100%;
 	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #EEEEEE;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	position: relative;
	padding: 20px;
	background: #EEEEEE;
	border-radius: 5px;
}
.entry-content h2::after{
	position:absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #EEEEEE;
}

ちょっとカッコイイ吹き出し風見出し

H1の場合

/*見出しカスタマイズ*/
.article-header h1,
.entry-header h1{
	border: 1px solid #FF0000;
	padding: 20px;
	position: relative;
	background: #FFFFFF;
	color: #333333;
	border-width: 4px 0 2px 0;
}
.article-header h1:before,
.entry-header h1:before{
	content: '';
	position: absolute;
	border-top: 15px solid #FF0000;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	bottom: -15px;
	left: 50px;
}
.article-header h1:after,
.entry-header h1:after{
	content: '';
	position: absolute;
	border-top: 14px solid #FFFFFF;
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
	bottom: -12px;
	left: 51px;
}

H2の場合

/*見出しカスタマイズ*/
.entry-content h2{
	border: 1px solid #FF0000;
	padding: 20px;
	position: relative;
	background: #FFFFFF;
	color: #333333;
	border-width: 4px 0 2px 0;
}
.entry-content h2:before{
	content: '';
	position: absolute;
	border-top: 15px solid #FF0000;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	bottom: -15px;
	left: 50px;
}
.entry-content h2:after{
	content: '';
	position: absolute;
	border-top: 14px solid #FFFFFF;
	border-right: 14px solid transparent;
	border-left: 14px solid transparent;
	bottom: -12px;
	left: 51px;
}
スポンサーリンク
スポンサーリンク
アフィモンのネットで稼ぐぞ!初心者向けアフィリエイトで小遣いを稼ぐ方法

コメント

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