Cocoonのミックススキンをカスタマイズする

スキンをカスタマイズ

ミックススキン(グリーン、ブルー、レッド)をカスマイズする記事です。

ミックススキンのカスタマイズなので、右のサイドバーにある「スキン切り替え」からミックススキンを選択してください。

以前のバージョンの見出し(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: "";
}

コメント

タイトルとURLをコピーしました