ミックススキン（グリーン、ブルー、レッド）をカスマイズする記事です。
ミックススキンのカスタマイズなので、右のサイドバーにある「スキン切り替え」からミックススキンを選択してください。
以前のバージョンの見出し（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: "";
}
コメント