8月
2

【WordPress】CSSで見出しデザインを付けてみましたが。

8月 2, 2013in wordpressTag: ,

Smile
Smile Photo by seyed mostafa zamani

前回のテーマで使っていた見出しのデザインが、テーマを変えた時点でなくなっていました。
しばらく、そのままやっていましたが、
文字だけが大きい見出しだと、どうも味気ないなって思っていました(´・_・`)

見出しcss-10
見出しcss-10 Photo by mayo1950

やっと重い腰を上げて、付けようと思ったのはいいのですが、
CSSに追加してみても、上手くいかないんです。:゚(;´∩`;)゚:。
そのことをTwitterで呟いていたら、有り難い事にお二人の方からコメントを頂きました♪
ありがとうございます!

ブログのソースコード

ブログを表示してソースコードを見ると、記事タイトルは「h2 class=”entry-title”」となっていて、どうやら「h2」のようです。
私は、記事本文に見出しを「h2」しかほとんど使っていないです。
これって、かぶってるやん。。

自分が使っているテーマのクラス名は?

テーマに寄って、クラス名が違うようです。
とりあえず、当たって砕けろ方式でやってみたw

こちらのサイトが初心者向けの見出しの参考になります。

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方 | delaymania

WEBデザイナーの@delaymaniaです。 テキストの左側と下側だけをボーダーで囲ったデザインの見出しって、いろんなブログで良く見かけますよね。 CSSだけで作る見出しとしてシンプルで使い勝手がい …

いや、ちゃんと始めから見れば済む事でしょうが、
そこが素人、こわーい

テーマ編集から、スタイルシート(style.css)を開きます。
クラス名の後に、見出しデザインを追加してみました。

見出しcss-6
見出しcss-6 Photo by mayo1950

見出しが付いたのはいいけど、これだと記事タイトルの後にも見出しがついている。

見出しcss-8
見出しcss-8 Photo by mayo1950

次に、こんなのも試しました。

見出しcss-1
見出しcss-1 Photo by mayo1950

見出しcss-2
見出しcss-2 Photo by mayo1950

でも、反映されない。

見出しcss-3
見出しcss-3 Photo by mayo1950

これも、だめ。

見出しcss-4
見出しcss-4 Photo by mayo1950

見出しcss-7
見出しcss-7 Photo by mayo1950

私の使っているテーマ「Yoko」

ブログのソースコードから、単一記事は「,single-entry-content」であることは分かりました。
なので、それをクラス名として。

見出しcss-5
見出しcss-5 Photo by mayo1950

おおおー、やっとできました\(^o^)/
記事のタイトルには見出しデザインは付かなく、記事の本文の「h2」にはデザインが反映されました。

見出しcss-11
見出しcss-11 Photo by mayo1950

でも、問題は残っています。
ここの、記事をお読み頂き、というところは「h2」なのです。
単一記事では、反映されませんねぇ。。

見出しcss-9
見出しcss-9 Photo by mayo1950

とりあえず、まっ、いいか。
ではでは。。

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.