CSSの見出しを改造してみよう

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

投稿日: カテゴリー: プラグイン

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

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

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

 

 

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

 

見出しが 意図しない所に付いちゃった…。

テンプレートだけでは無く、プラグインが影響を受ける場合も有ります。

例えば、サイドバーの記事最新記事一覧などで使うプラグインなどのタイトルが影響を受けてしまい、意図しない場所に見出しタグが付いてしまうと、とても使えない状態になってしまいます。

 

それならいっそ…口惜しいけど見出しは諦めるか…

【ちょっと諦めるのは早いですよ!】

 

 

プラグイン【AddQuicktag】を使えば即解決いたします。

このプラグインのいいところは、タグを事前に登録できて使いたい所で即使う事が出来る事にあります。

そしてもう一つ入れておきたいプラグインは【Simple Custom CSS】このプラグインは、CSSを登録できるプラグインになりますので、もしも知らないなんて場合はコチラも一緒に登録しておきましょう。

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

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

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

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

シンプルカスタムCSS

好きな見出しを見つけて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】の出番ですね!それではもう少しお付き合い下さい(^^)

AddQuicktagにHTMLを登録しておけば、ブログ更新作業が楽に!

設定画面

先ほどインストールしておいたAddQuicktagにタグを入れていきますので

設定→AddQuicktag

の順番でクリックしていくとこの画面にたどり着くと思います。

ABBクイックタグ

 

一番左の名前は何でもOKですので、好きな名前を入れてください。

右側も適当にチェックを入れておいてこれで準備完了です

<h2 class="midasi">

真ん中の上にコレを入れて、下には

</h2>

を入れてください。

コレで設定完了です。すると、いつものブログを登録する投稿画面に【Quicktag】と言う項目が出てきますので、見出しに設定したい言葉を上からなぞれば、見出しにしてくれます。

コレで、テンプレートやプラグインに影響をされない見出しが完成しました。とても扱いやすいので、見出しタグがむき出しになっているテンプレートでは重宝すると思います。