【Swallow / STORK / SWELL】見出し（h2,h3,h4）カスタマイズ

「Swallowスワロー」「STORKストーク」「SWELLスウェル」って、初心者でもすぐに始められるくらいデザイン性にも優れていて便利（スマホ対応）なのですが、多くの人が使っているためカブってしまうことがあるというのが、ちょっと引っかかりますよね。

見出しだけでもオリジナルの画像が使えれば皆と差がつけられるのになぁ。
シンプルでカッコいいんだけど、ちょっとつまらない……

と、私は思っていました。

ですので、当サイトでカスタマイズしたcssコードを公開いたしますので、ご参考にどうぞ^^

まず、準備するもの

1. 見出しに使う画像（画像をつけたい人のみ）
2. 画像をアップロードするためのフォルダ（サーバーに直接アップロードします）

用意した画像を、サーバーへアップします。
その際、対象ドメイン（サイトURL）のフォルダに「images」を作りましょう。

手順１：サーバーのファイルマネージャーから

サーバーの「ファイルマネージャー」から対象ドメインを選択
⇒「public_html」
⇒右のサイドバーにある『作成』の項目に「images」という名前のフォルダを作る←ここにアップします

手順２：ffftpソフトから

対象ドメインフォルダ⇒「public_html」⇒フォルダを新規作成。名前は「images」で

では、実際にカスタマイズしていきましょう！

「Swallow」「STORK」の見出しカスタマイズ

どのテーマにも言えることですが、コンテンツ部分に名前（class名、IDなど）がついているため、記事全部の見出しを変更したい場合は、h2,h3,h4（見出しタグ）の前に「ID」をつけて下さい。

「Swallow」「STORK」の場合は「.entry-content」です。

後述しますが、一部の見出しのみを変更したい場合は<div>～</div>でクラス分けします

cssコード

/* h2 */
.entry-content h2{
  text-align: left !important;
  color: #505050;
  background: transparent;
  border-bottom: 4px solid #eaeaea;
  border-radius: 0 !important;
  box-shadow: none;
  position: relative;
}

.entry-content h2:after{
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #c4eff2;
  bottom: -4px;
  left: -4px;
  width: 25%;
}


/* h3 */
.entry-content h3{
  border-top: transparent !important;
  border-bottom: transparent;
  border-left: 8px solid #c4eff2;
  padding-left: 16px;
  font-size: 116%;
  height: 100%;
  color: #505050;
}


/* h4 */
.entry-content h4{
  border-left: transparent !important;
  position: relative;
  padding-left: 1.6em;/*アイコン分のスペース*/
  line-height: 1.4em;
  font-size: 110%;
  margin-bottom: 10px;
  color: #505050;
}

.entry-content h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1.2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 6px;/*アイコンの位置*/
  color: #c4eff2; /*アイコン色*/
}

カラーコードは当時のサイトの配色となっておりますので、ご自由に変更してください。

画像付き見出し

「h2.classクラス名」と名前を付けて分類しましょう。
実際に投稿画面でh2タグを入力する時、「h2 class=””」とclass名を指定します。
class名は何でもいいですが、自分がわかりやすいものにしましょう。

大好きなスーツアクターの浅井さん（戦隊ヒーローの変身後を演じている方）の見出しはわかりやすいように、class名を「asaisan」としています^^

/* 浅井さん見出し */
h2.asaisan {
    font-size: 126%;
    line-height: 2.0em;
    background: transparent url(画像のURL) no-repeat !important;
    border-bottom: 4px #ef454a solid !important;
    color: #1a264b;
    padding: 10px 16px 10px 68px!important;
    margin-bottom: 12px;
    border-radius: 0 !important;
    box-shadow: none;
}

↓実際に記事で使う時はこう書きます。

<h2 class="asaisan">見出し</h2>

以上で「Swallow」「STORK」の見出しカスタマイズは終了です。

「SWELL」の見出しカスタマイズ

「STORK」などと同じように、「h2,h3,h4」の前に「.post_content」と記入してください。

/* 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%;
}

画像付き見出しも基本的に先程ご紹介した方法ですので、こちらでは割愛します。

最後に

ダウンロードした画像のサイズに合わせて見出しの画像を作ると、余白などうまくいくと思います。
文字と画像が重なってしまう場合は、「padding」の数値を変更してください。

ポイントは追加cssに記述する見出しタグ（h2,h3,h4）の前に

と書いて下さい。