スクリーンショット 2012 08 09 9 45 15

どうも、じんないたくみです。

以前から人気ブロガーの使っているクールな見出しに憧れていました。
そして僕も、そのクールな見出しをずっと使いたかったのです。

FC2時代にもそれを導入することはできたのですが、いっそWordPressに移行したらやったろう、と温めていました。

今回、念願かなって、クールな見出しを使うことに成功したので、その使い方をシェアしたいと思います。

参考にしたサイト

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス

めっちゃ分かりやすくて、参考になりました。

サンプルもいくつかあるので、気に入ったものがあれば、それを導入してみてください。

使うための準備

今回紹介するコードは、上に使っている見出しの場合ですが、手順はどの場合も同じです。

CSSに以下のコードをコピー&ペーストします。

h2{
    background: #fff;
    border-top:1px solid #ddd;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    border-left:3px solid #3cf;
    padding: 5px 0 5px 10px;
    background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */
    -pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* ie */
    behavior: url(images/PIE.htc);  /* ie */
}

ペーストするCSSのシートは、WordPressの
「外観」→「テーマの編集」
を選び、右にずらずら並んでいる中の
「スタイルシート(Style.css)」
というやつです。

そこに上記のコードをコピー&ペーストすればOKです。

実際に使う方法

上記のコードの場合は、記事の中の使いたい場面で

<h2>見出し</h2>

とすれば、OKです。

「見出し」の部分は好きな見出しを書きましょう!

まとめ

  • クールな見出しを使ってブログをスタイリッシュにしよう!

見出しがクールだと、なんかいいですよね!
ずっと憧れていたので、なんだか感謝カンゲキ雨嵐です。

これから、スタイリッシュなブログを書いていきましょう!!!