【CSS】WPのテンプレートに影響されない見出しを作る

CSSを用いた見出しデザインは色々なサイトで紹介されているのですが、いざ使ってみるとテンプレートやプラグインで見出しタグを使っていて変な所に見出しが付いちゃう事ってないですか？

無料系、有料系問わず見出しタグがそのまま貼り付けてある場合があるのですが、そうするとCSSやHTMLを理解していないと解決出来なくて結局諦める人も居るかもしれません。

そんな時【簡単】に解決できる方法をご紹介致します。

CSSを使って見出しをコピーしたけど…意図しない場所が影響を受けてしまう

Simple Custom CSSのプラグインを入れる

外観→プラグイン→新規追加→検索窓口で【Simple Custom CSS】を検索

すると画像の様に、様々なのが出てきますのでSimple Custom CSSを選らんで即今すぐインストールを選びます。

コレでOKです。ひとまずコイツは放置しておいて次に【AddQuicktag】をインストールしますが、基本のインストールのしかたは同じなので上記繰り返し行ってください。

好きな見出しを見つけてSimple Custom CSSに入れる！

好みもあると思いますので、今回は極簡単な見出しを紹介いたしますが【見出し　CSS】や【見出し　デザイン】などと検索すると結構色々な見出しを見つけれると思います。
見出しを入れる場所は
外観→カスタムCSS　にそのままコピーして入れて登録しておいて下さい。

見出しの見本

h2 {
	padding: 1em;
	border: 3px solid #ccc;
	border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

見出しの見本

h2{
	position:relative;
	padding:13px;
	padding-left:15px;
	font-weight: bold;
	font-size: 22px;
	background-color: #149874;
	color: #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
 
h2:before{
	content:\'\'; 
	height:25px; 
	width:2px; 
	display:block; 
	position:absolute; 
	top:5px; 
	left:4px; 
	background-color:#fff;
	border-left: 4px solid #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

見出しの見本

h2 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #149874;
        font-size: 22px;
}
h2::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: \'\';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

見出しタグを少し改造して、使いやすくする

上記のまま使うと、同じ事を繰り返してしまうので、タグを改造してテンプレートやプラグインに影響を及ぼさないようにしておきます。改造の箇所はコチラのコードを参考にして下さい。

.midasi {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #149874;
        font-size: 22px;
}
.midasi::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: \'\';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

【h2】になっていた場所に【.midasi】を入れて変えておきます。複数ある場合は【.midasi1】【.midasi2】とでも入れておけばOKです。これをSimple Custom CSSに登録しておけばOKです。

ただ、このままでは使えません。

そこで【AddQuicktag】の出番ですね！それではもう少しお付き合い下さい（＾＾）