ミックススキン(グリーン、ブルー、レッド)をカスマイズする記事です。
ミックススキンのカスタマイズなので、右のサイドバーにある「スキン切り替え」からミックススキンを選択してください。
以前のバージョンの見出し(H2)にカスタマイズする
実は、今のミックススキンは、バージョンアップしたものです。
バージョンアップの時に、ミックススキンの特徴であった見出し(H2)のスタイルを今のシンプルなスタイルに変更しました。
でも、意外とバージョンアップ前の見出しを気に入っていた人が多かったようで、中にはメールで「前の見出しに戻せませんか?」という要望ももらったりしていました。(要望に答えられずすみません)
一度バージョンアップしてしまったので戻すのは難しいですが、以前の見出し(H2)がよかった人向けに、H2だけを前のバージョンにするCSSとアレンジしたCSSを紹介します。
グラデーション+影+吹き出し+先頭大文字
以前のバージョンのH2はこんな感じで、
グラデーション+影+吹き出し+先頭だけ大きい文字
というスタイルでした。
このH2のCSSは次の通りです。
.article h2{ border:none; position: relative; margin-bottom: 30px; padding: 0.8em; background: linear-gradient(#015a32 0% , #27a26b 100%); color: #fff; font-size: 22px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5); } .article h2:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #27a26b; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; } .article h2:first-letter { font-size: 1.7em; }
グラデーション+影+吹き出し
さきほどのH2から「先頭が大きい文字」スタイルを削除したものです。
.article h2{ border:none; position: relative; margin-bottom: 30px; padding: 0.8em; background: linear-gradient(#015a32 0% , #27a26b 100%); color: #fff; font-size: 22px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.5); } .article h2:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #27a26b; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; }
グラデーション+吹き出し
続いては、さらに「影」のスタイルを削除したものです。
.article h2{ border:none; position: relative; margin-bottom: 30px; padding: 0.8em; background: linear-gradient(#015a32 0% , #27a26b 100%); color: #fff; font-size: 22px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .article h2:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #27a26b; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; }
吹き出し
最後は、グラデーションもやめた「吹き出し」だけのスタイルです。
.article h2{ border:none; position: relative; margin-bottom: 30px; padding: 0.8em; background-color: #328a63; color: #fff; font-size: 22px; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .article h2:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #328a63; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; }
コメント