どうも！
Ganapatiです。
最近空き時間をみては「はてなブログのオリジナルテーマ」を作ろうと研究しています。まあ、はてなブログを利用するのはそうした苦労が不要だからというのが大きいので本末転倒になってしまうのですが、やりながらCSSの勉強にもなるのです。
Wordpress有料テーマSANGOがすごい！（のでパクる）
以前にもご紹介しましたがさるわかくんの作ったWordpress有料テーマ「SANGO」がなかなかすごいです。
はてなブログユーザーでもWPサイトで使っているよなんて人も多いのではないでしょうか？
なので、研究がてら新しいテーマ等に生かせないか、まずはデザインをパクってみることにしました。
SANGOの見出しについて
SANGOの見出しですが、hタグを使用しているものとpタグを利用しているものがあります。
pタグで見出しってどういうこと？と思われる方もいるかもしれませんが、簡単に言えばその時のコンテンツの雰囲気に応じて好きに使える見出しがあっても良いよね。という考え方です。「htmlでいう見出し」と「見た目でいう見出し」の両方をSANGOでは提供しているわけです。
結果的に、全体で30種類を超えるデザインをSANGOでは提供しています。
単純なコピペで使えるように
CSSをコピペしてはてなブログのCSS設定に突っ込むのも考えましたが、スポットで使うためにCSSで全てのデザインを読み込むのもどうなんだろう？
そもそもCSSに大量にぶっこむとわけが分からなくなることもしばしば。半年後「これなんだっけ？」とか思うことなど日常茶飯事。
であれば、そもそもHTML編集画面にそのままコピペして使えるように何とかならないかと思い、強引にインライン化しました。（全部はできませんでしたが）
ちなみに以下のツールを使用。
なお、上記サイトで生成されるコードはかなり無駄が多いです。正直別の記述方法の方が良いんじゃないの？と思う部分も多々あります。ご了承ください。（スポットで使うやつについて精査するほど力が出ないのです。）
パクリコード
スポット見出し一覧（SANGOパクリ版）
まずはSANGOの見本ページからそのままパクったコードをシェアします。
Codepenを使っている人はそのままForkしちゃって下さい。
※サンプル一覧画像
※Codepen
See the Pen SANGOオリジナル見出しインライン版 by ganapati55 (@ganapati55) on CodePen.
スポット見出し一覧（シンプル版）
前述のものはほとんど見本のカラーを踏襲しているのですがカラーが使いにくいという人もいるかと思います。
そこで白黒系のシンプルなものを用意しました。
※見本一覧
※Codepen
See the Pen SANGOオリジナル見出しインライン版（グレー） by ganapati55 (@ganapati55) on CodePen.
利用方法
上記のインライン化したものは希望の見出しに該当する部分をそのままコピペしてHTMLコードとして貼りつけてください。貼りつけたら見出しの文字を変えるだけです。
また、一部の見出しについてはFontawesomeを使用しています。そのため
Codepen上では
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
このような記述を先にしていますが、ご利用の環境によっては既に上記術が存在し不要な場合があります。無くても問題ないようでしたら削除して使って下さい。
また、文字色、背景色、枠線の色などを変えたい場合はオリジナルカラーのものを修正したほうが楽です。
普通にCSSに書き込んで利用したい人はこちら
こちらのコードを使ってみてください。
See the Pen SANGOスポット見出しサンプル by ganapati55 (@ganapati55) on CodePen.
さるわかくん、素敵なデザインをありがとうございます！