ストーク・スワローの見出し（h2,h3,h4）をカスタマイズ

ストークやスワローって、初心者でもすぐに始められるくらいデザイン性にも優れていて便利（スマホ対応）なのですが、皆使っている・・・・・・というのが、ちょっと引っかかりますよね。

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

ということがあるかと思います。
今回は、そんな見出しのカスタマイズ方法を公開します。

↓↓こんな風にカスタマイズします

通常の見出し２

見出し３

見出し４

浅井宏輔さん用見出し２

左側に画像もつけてみました^^

まず、準備するもの

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

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

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

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

手順２：ffftpソフトから

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

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

メインの見出しをカスタマイズ

コードを公開しますので、こちらをそのままコピペして、一部を修正してください。
「外観」⇒「カスタマイズ」⇒「追加css」に、修正したコードを貼り付けてください。

なお、先に「カスタマイズ」⇒「投稿・固定ページ」から見出しデザインを「下線（ストーク）」「シンプル（スワロー）」と設定しておいてください！

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

画像付き見出し２

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

浅井さん見出しはわかりやすいように、class名を「asaisan」としています^^

以上で終了です。

最後に

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

※なお、このカスタマイズにより何か異変を生じても、当サイトは一切の責任を負わないものとします。