8月
7

[WordPress]見出しのデザインを変えてみました。

Colorful Typography Unleashed (for widescreen displays)
Colorful Typography Unleashed (for widescreen displays) Photo by arnoKath

昨日は、「Yoko」の子テーマを作ったので、
早速、見出しデザインで遊んでみました。
やっぱり、子テーマがあると楽ですね〜

私のブログは、アイコンが派手な以外は、シンプルだと思いますww
色合いも、押さえています。
が、たまには気分を変えてみたいなって(*´艸`*)
この位なら、手軽に変えられますですね。

[WordPress]「Yoko」の子テーマを作りました。 | iPhoneとマヨテキメモ

私は、WordPressでブログを書いていますが、 以前はTwenty Elevenテーマの子テーマを作り、 CSSなどをちょこちょこ、素人ながらも弄っていました。 しかし、時流によりレスポンシブテー …

全体のカラー

先ほども申しましたが、私のブログは全体にシンプルで地味w
ま、それが好きなんですけど。。

見出しデザイン-4
見出しデザイン-4 Photo by mayo1950

見出しもこんな感じでグレーですw

見出しデザイン-1
見出しデザイン-1 Photo by mayo1950

でも、ちょっとは色つけてもいいじゃないかと、試しにやってみました♪
始めはこれでした。
左側にアクセントとなる黄色の棒に、下線はグレーの点線です。
できたのがこれです。

見出しデザイン-5
見出しデザイン-5 Photo by mayo1950

見出しデザインだけでイメージ変った?

やってみると面白くなって、
今度は少しだけ、下線の太さと間隔をあけてみました。
私のイメージとしては、ただの点線でなくステッチなんです!
柄に合わないけど、ちょっくら可愛くなったかも(*´艸`*)
こっぱずかしいww

見出しデザイン-2
見出しデザイン-2 Photo by mayo1950

子テーマがあると、直にさわれて便利です。

見出しデザイン-3
見出しデザイン-3 Photo by mayo1950

このようにしました。

/*-----見出しグリーンステッチ----*/
.single h2{
font-size: 24px;
border-left: 7px solid #1abc9c;
border-bottom: 2.5px dashed #fcd400;
border-bottom: width:2px;
padding: 0.4em 0.3em;
margin: 3.5em 0 0.7em;
}

これで、ちょこちょこ、変えるのも楽しくなりました。
この程度のステップアップでも、できたのが嬉しい。
まだ、WordPress 3.6 にはしていません。
では、では。。

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


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

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


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.