ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

カテゴリー:WordPress    |    タグ:

ブログの見出しデザインに困ったのでこのジェネレータを使ってみた『 CSS見出しジェネレーター | Web道』

このブログは、Stinger3というテーマをもとにゴニョゴニョ…カスタマイズしているのですが、見出しデザインにとても迷っていたところとてもよいものがあるらしいと教えてもらい作成しました。

とっても便利なジェネレータ『Web道 CSS見出しジェネレーター』


使い方

使い方というほどでもありませんが、見出しの種類は

  • 吹き出し
  • リボン
  • 普通(枠上)
  • 普通(枠下)
  • 普通(枠上下)

5種類の中から選ぶことが出来ます。

他にも、枠の色や影をつけたり文字色などなど様々に変更することができ、1番下にあるジェネレートというボタンを押すと結果がすぐさま反映されて見ることができます。

結果がその場で見れるのはとても嬉しいですよね。何度でも作り直すことができるので、気に入るものができるまでひたすらジェネレート!!

見出しデザインが決まったら

これでよしっ!と思うモノが出来たら、CSSを変更していきます。

Stinger3の見出しタグ

Stinger3では、h2h3を見出しタグとして使用しているので、その部分のCSSを変更させます。

見出しとコメントが書かれているのでとてもわかりやすいです。


このブログ用に作ったもの

実際に使用しているので見て頂けるとわかるのですが、h2は、このジェネレータを使ってリボンを選択して作成しました。

h3は、ボーダーの種類を変更しただけなので代わり映えしてないのですが、実際に使っているh2のCSSを参考になるかわかりませんが、貼り付けておきます。

すごく簡単にできるのでいろいろと試して、すてきな見出しを作成してみてください。

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2013/09/29    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

トップページキャプチャ

Stinger3の子テーマ「Stinger-minimum」を2/11リリースします。【予告】

タイトルで言い切ってしまっていますが、近日中にStinger3の子テーマ「Stinger-minim

記事を読む

twitter1

【WordPress】TwitterCards(ツイッターカード)に対応する方法

先日、Twitterを始めたので、TwitterCards(ツイッターカード)にも対応。ということで

記事を読む

wordpress_stickers_everywhere

アイキャッチ(サムネイル)画像の大きさを変更する【Stinger3カスタマイズ】

いくつかお問い合わせを頂いたので、アイキャッチカスタマイズについてこの記事でお返事とさせて頂こうと思

記事を読む

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

ohajiki

ol要素をCSSで装飾(デザイン)する方法を実践したみたので備忘録

サイドバーの所に、WordPress Popular Postsを使ってランキングを表示させてみた際

記事を読む

コメントを残す

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2019年1月
    « 12月    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
電子書籍ストア BookLive!
PAGE TOP ↑