CSSを用いた見出しデザインは色々なサイトで紹介されているのですが、いざ使ってみるとテンプレートやプラグインで見出しタグを使っていて変な所に見出しが付いちゃう事ってないですか?
無料系、有料系問わず見出しタグがそのまま貼り付けてある場合があるのですが、そうするとCSSやHTMLを理解していないと解決出来なくて結局諦める人も居るかもしれません。
そんな時【簡単】に解決できる方法をご紹介致します。
CSSを使って見出しをコピーしたけど…意図しない場所が影響を受けてしまう
テンプレートだけでは無く、プラグインが影響を受ける場合も有ります。
例えば、サイドバーの記事最新記事一覧などで使うプラグインなどのタイトルが影響を受けてしまい、意図しない場所に見出しタグが付いてしまうと、とても使えない状態になってしまいます。
それならいっそ…口惜しいけど見出しは諦めるか…
【ちょっと諦めるのは早いですよ!】
プラグイン【AddQuicktag】を使えば即解決いたします。
このプラグインのいいところは、タグを事前に登録できて使いたい所で即使う事が出来る事にあります。
そしてもう一つ入れておきたいプラグインは【Simple Custom CSS】このプラグインは、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】の出番ですね!それではもう少しお付き合い下さい(^^)
AddQuicktagにHTMLを登録しておけば、ブログ更新作業が楽に!
先ほどインストールしておいたAddQuicktagにタグを入れていきますので
設定→AddQuicktag |
の順番でクリックしていくとこの画面にたどり着くと思います。
一番左の名前は何でもOKですので、好きな名前を入れてください。
右側も適当にチェックを入れておいてこれで準備完了です
<h2 class="midasi">
真ん中の上にコレを入れて、下には
</h2>
を入れてください。
コレで設定完了です。すると、いつものブログを登録する投稿画面に【Quicktag】と言う項目が出てきますので、見出しに設定したい言葉を上からなぞれば、見出しにしてくれます。
コレで、テンプレートやプラグインに影響をされない見出しが完成しました。とても扱いやすいので、見出しタグがむき出しになっているテンプレートでは重宝すると思います。
関連記事一覧
HPをスマホで見ると横にズレる【その原因はテーブルタグにある!】かもしれません。
WP(ワードプレス)の基本的な操作方法【ブログ編】
ブログを使って企業サイトを強くする方法!
ワードプレスにお問い合わせフォーム(Contact Form 7)を追加しよう!
センス関係なし!とっても簡単なCSSを使ってBOX(囲み)を作ってみよう♪
便利『Shortcodes Ultimate』のプラグインで横に2分割する!
Googleマップをワードプレスへ埋め込みレスポンシブ対応させるプラグイン
スマホで撮影した写真が何故会社用HPの写真に向かないのか?
蒲郡市で観光ついでに撮影をしたので依頼の参考までに
一眼レフカメラが届いたのでHPに必要な小物撮影をしてみた!