【コピペOK】シリウス見出しデザインの変更！カスタマイズできひんを解決

オリジナル教材に詰め込みました

渾身の1ページで稼ぐノウハウ

キーワードの選び方
アフィリエイトサイトの作り方
中古ドメインの取り方・使い方

実践者の結果を見る

簡単＆結果がすぐわかる

ここでは、シリウスの見出し変更（カスタマイズ）例を少し公開しています。

少しというのにはワケありでして。。。自分用にデザイン検討したものだからです（汗）

かなり昔に作ったシリウスサイトの順位が上がっているようで、デザインがあまりにもダサ。。。な初期テンプレートだったので、今っぽく「新デフォルトテンプレート」にチェンジ。

そして、ついでに見出しもカスタマイズしよう！と思ってCSSをいじっていたらけっこうハマってしまいました。でも、なんとか解決できたのでついでにシェア記事を書こう！と思った次第です^^;

ということで

コピペで使えるシリウスの見出しデザイン変更例3つ
シリウスの見出しカスタムにハマった理由と対策

をお送りします！

コピペOK！シリウス見出しデザインの変更例3つ！
見出しデザインのカスタマイズがうまくできないときにする作業！
1. ①CSSのバックアップを取る
2. ②h2,h3,h4に関わるCSSを削除する（無効化する）
まとめ
1. 追記：購入者特典に追加！

コピペOK！シリウス見出しデザインの変更例3つ！

まずはこっちの方が需要があるでしょうね。

コピペで使えますが、それなりに下準備も必要なので、結局のところ私がデザイン変更にハマった理由も読むことになると思いますｗ

3つですが、色などをカスタムしやすいようにやり方も添えてあります。デザインがよければ持っていってくださいね。

以下に出てくるCSSを「ユーザー指定スタイル」の一番下にコピペします。

背景色ベタ

今っぽいフラットデザインの超シンプルならこれを。色は無限に、上下左右の空きも、角の丸みも調節できます。丸みがいらなければborder-radiusから下3行のやつを0pxにすれば角のあるデザインになりますよ。

#main h3 {
  overflow:visible;
  padding: 1rem 2rem; /*パディング。上下の空き、左右の空きの順で変更可*/
  margin: 0 0 1rem; /*マージン。上、左右、下の順で変更可*/
  background: #ffb6c1; /*背景色変更可*/
  border-radius: 3px; /*丸み変更可。下の2行も一緒に変更。丸みがいらない場合は0に。*/
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: #fff; /*文字色変更可*/
}

ステッチ風

ステッチ風デザインです。ナチュラルなサイトに合いますね。背景色は「box-shadow」のところでも使われているので、変えたい場合は「background」「box-shadow」の2箇所を変えます。

#main h3 {
  overflow:visible;
  margin: 0 6px 1rem; /*マージン。上、左右、下の順で変更可*/
  padding: 1rem 1rem; /*パディング。上下、左右の順で変更可*/
  color: #555; /*文字色変更可*/
  background: #ffc0cb;  /*背景色変更可。下の色も同時変更*/
  box-shadow: 0px 0px 0px 6px #ffc0cb; /*背景色変更可。上の色も同時変更*/
  border: 1px dashed #db7093; /*点線の色変更可*/
}

折返しリボン

リボンを折り返したようなデザインです。おしゃれで気に入ったので結局コレを採用しました。

#main h3{
  overflow:visible;
  position:relative;
  margin: 0 0 2rem; /*マージン。上、左右、下の順で変更可*/
  padding: 1rem 1rem; /*パディング。上下、左右の順で変更可*/
  background: #6aa7cd; /*色変更可*/
  color: #fff; /*文字色変更可*/
}
#main h3:after{
  position: absolute;
  content: '';
  bottom: -12px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #ccc transparent transparent; /*折れ部分ccc。色変更可*/
  border-width: 0 30px 12px 0;
}

問題なのはこれです。これが私が今回ハマったやつです^^;

「:after」とかいう少し複雑なCSSを使っているので、「ユーザー指定スタイル」にコピペするだけではうまくいかないですね。元々のデザインと混じったような見出しになったはずです。

じゃあどうするかというと、テンプレートに元々設定されているCSSを削除する必要があります。