コピペで見出しを装飾してみました。

ワードプレスで見だし(h1~h6)を入れる際、追加CSS等でデザインを編集していたのですが、CSSで直接h2やh3を書き換えるとテーマによってはサイトのデザインが崩れてしまう場合があり、どうしても上手くいかないケースが出てきました。 ^^:)

これは管理人が、きちんとWordPressやCSSを学んでいないのが原因なのですが、基本から覚えるのは無理そうなので、なるべく楽をして見出しの装飾を行えないかチャレンジしてみることにしました(^^;

見出し(タイトル)は、SEO的にキッチリとh1~h6を使い分けた方が良いのかもしれません。ですが単純にデザインとしてだけで見れば h1~h6 にこだわらず表示させても良いような気がします。

昔はサイトデザインのため見出しやバナー、ボタンなどは殆ど画像ファイルを作って表示させたりしていましたから、、、、

CSSは素人同然なので他所さまのソースを利用させてもらうことにしました。

Googleで 「見だし CSS」で検索するとたくさんのサイトが出てきます。
今回はサルワカ様の「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」を参考にさせてもらうことにしました。

ネットのありがたみが一番実感できます。

このブログもそうですが、最近のテーマは、ほとんどと言って良いほど「拡張CSS」が使えます。無い場合は子テーマの style.css を編集するか、プラグイン「Simple Custom CSS」等を入れても良いかもしれません。

「拡張CSS」に見出しのCSSをコピーして貼り付けます。

ただし h1 の部分は .midasi01 ~ .midasi04 に書き換えます。

 

装飾を加えたいテキストに(テキストモードで)以下のようなタグで囲みます

<p class=”midasi01″> 見出し1(表示させる文字) </p>

 

手入力が面倒な場合は、プラグイン AddQuicktag をインストールして、予めタグを登録しておくと便利です。

表示例

拡張CSSに登録した 見出し1~4がそれぞれ反映されます

<p class=”midasi01″>見出し1</p> ↓

見出し1

<p class=”midasi02″>見出し2</p> ↓

見出し2

<p class=”midasi03″>見出し3</p> ↓

見出し3

<p class=”midasi04″>見出し4</p> ↓

見出し4

これらには h1~6 要素は反映されていません。このテーマの場合、例えば 見出し1にh2要素を入れると

<h2 class=”midasi01″>見出し1</h2>↓

見出し1

上記のようにになってしまいデザインが崩れてしまいます?

また、NAKAESHOGO様のサイトを参考にして、↓のようなCSSを追加して

以下のようなタグで囲ってみましたがうまく表示されません?

<h2 id=”danraku2″>見出し1</h2> ↓

見出し1

 

class で指定しても id で指定しても、元々テーマで指定してあったデザイン要素が反映されるようです?

試しに h4 で指定してやるとデザインは崩れません。見出し1で指定したCSSとかぶっていないみたいです?

 

<h4 class=”midasi01″>見出し1</h4>↓

見出し1

かぶる と言うのは正確ではなくて、cssは後から記述されたものが優先されるはずだったので、上書きした要素以外の部分が表示されているという事なんだと思います。

つまる所、テーマでデザインされている部分は、あまり触れない方が良いのかもしれないと思うようになりました(^^;

この辺はテーマのデザインで変わってくると思うので h要素が必要な場合はテーマによって使い方を変えれば良いと思います。

拡張CSSにしろ、子テーマの style.css を編集にしろ、ある程度の危険は伴うと思われますので慎重にした方が良いですね。

それにしても、もっと早くCSSの勉強をしておけば良かったな~と思う今日この頃であります ^^;)

・・・最近、備忘録ネタしか書いていませんが、物忘れの激しい管理人にとっては、とても助かっています ^^;)

 

 

 


スポンサーリンク