MENU
ファンレターを書いてみませんか?

当サイトの作品を読んで、「なんかちょっと心がソワソワしたぞ」「うるっとしちゃった」「単純に文章が好き!」という方は、私にファンレターを送って下さい。

応援されることは嬉しい。
応援する方は2倍嬉しい。

あなたのお気持ち待ってます。

ばなやん(一ツ屋有美子)にファンレターを贈る

コピペでOK! STORK,SWELLの見出しカスタマイズ

2020 2/28
コピペでOK! STORK,SWELLの見出しカスタマイズ

デザインをカスタマイズするには、「外観」→「カスタマイズ」→「追加css」と移動し、コードを入力することが必要です。

サルワカさんでも、素敵なデザインの見出しのコードを教えてもらえるのですが、「h1」を「h2」などにしてコードをコピペしてもなかなかうまくいかない……ってことがありますよね。
というのも、これってどのテーマにも言えることですが、コンテンツ部分に名前(class名、IDなど)がついているからなんです。

だからその「class名」を「h2,h3,h4」の前にクラス名を入力しなければいけません

  • 旧STORK、SWALLOWなら「.entry-content」(.contentだけでもいいかもしれません)
  • SWELLなら「.post_content」

と入力する必要があります。

実際には
<div class=”クラス名”>h2タグとか、ここに本文を書いていく</div>
こういう感じで「div」というタグでくくります。

そのdivのclass名を先程お伝えしたものにすると、メイン記事(コンテンツ)全体のh2,h3,h4が変更されます。
一部分の見出しだけ変更したければ、divのclass名を指定すればOKです。

当サイトの見出し(h2,h3,h4)のスタイルシート

h3のスタイルはこんな感じです

h4はこんな感じ

小説関係の記事、雑記などメインの記事はこのスタイルにしています。

追加cssに記述する前に、「投稿リスト」から見出しの装飾を「なし」にしておいてください!

/* h2,h3,h4 */
.post_content h2{
  margin: 3em -16px 1em;
	padding: 0.8em;/*文字周りの余白*/
  color: #454545;/*文字色*/
  background: #faf6f0;/*背景色*/
  border-left: solid 8px #d8f5ed;/*左線(実線 太さ 色)*/
}

.post_content h3{
	border-left: solid 6px #f8f3e9;
	position: relative;
	padding: 8px 18px;
	height: 2.0em;
  margin: 2em -8px 0.6em;
}
.post_content h3:after{
	position: absolute;
  content: " ";
  border-left: solid 6px #d8f5ed;
	left: -6px;
	top: -2px;
  height: 70%;
}

.post_content h4{
	border-left: solid 4px #f8f3e9;
	position: relative;
	padding-left: 14px;
	height: 1.6em;
  margin: 1.4em 0 ;
}
.post_content h4:after{
	position: absolute;
  content: " ";
  border-left: solid 4px #d8f5ed;
	left: -4px;
  height: 50%;
}

デザインカテゴリー

h3はこんな感じです

h4はこんな感じ

全体的に丸っこいです。webデザイン関係の記事でこちらの見出しにしています。

/* デザインh2 h3 h4 */
.wd h2 {
	background: transparent;
	border-left: transparent;
	position: relative;
  margin: 3em 0 1em;
  color: #454545;
	font-size: 140%;
	text-shadow: 0 0 2px white;
	box-shadow: 0 0 0 rgba(0, 0, 0, .03);
	padding: 3em 0 0;
}
.wd h2:before {
  content: "";
  position: absolute;
  background: #d8f5ed;
	margin-top: 1.5em;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -32px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.wd h3 {
	border: transparent;
	background: transparent;
	position: relative;
  color: #454545;
  margin: 2em 0 0.6em;
  padding: 8px 6px;
}
.wd h3:before {
  content: "";
  position: absolute;
  background: #fff1bf;
	margin-top: 2px;
	width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
.wd h3:after{
	border-left: transparent;
}

.wd h4 {
	position: relative;
  color: #454545;
  text-shadow: 0 0 2px white;
  margin: 1.2em 0 1.0em;
	padding: 12px 10px 0;
	border-left: transparent;
}
.wd h4:before {
  content: "";
  position: absolute;
	margin-top: 10px;
  background: #fde2e5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
	left: -8px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
.wd h4:after{
	border-left: transparent;
}

 

カスタマイズは時間がかかるけど、オリジナル感も出せて達成感がありますよね!

ストークやスワローのカスタマイズの記事はこちら↓↓

あわせて読みたい
ストーク・スワローの見出し(h2,h3,h4)をカスタマイズ
ストーク・スワローの見出し(h2,h3,h4)をカスタマイズストークやスワローって、初心者でもすぐに始められるくらいデザイン性にも優れていて便利(スマホ対応)なのですが、皆使っている・・・・・・というのが、ちょっと引...
一ツ屋有美子@声優小説家
ここまでお読み下さり、ありがとうございます!!

ブログランキングに参加してます!

次のリンクをクリックして応援してもらえると嬉しいです。
よろしくお願いします(@゚∀`@)ノ

 



この記事が気に入ったら
いいね または フォローしてね!

注意

特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。