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

ということがあるかと思います。
今回は、そんな見出しのカスタマイズ方法を公開します。
サーバーへ「ffftpソフト」または「ファイルマネージャー」から見出しに使う画像をアップロードできる方を対象としておりますので、ご了承ください。
↓↓こんな風にカスタマイズします
通常の見出し2
見出し3
見出し4
浅井宏輔さん用見出し2
左側に画像もつけてみました^^
まず、準備するもの
- 見出しに使う画像(画像をつけたい人のみ)
- 画像をアップロードするためのフォルダ(サーバーに直接アップロードします)
用意した画像を、サーバーへアップします。
その際、対象ドメイン(サイトURL)のフォルダに「images」を作りましょう。
手順1:サーバーのファイルマネージャーから
サーバーの「ファイルマネージャー」から対象ドメインを選択
⇒「public_html」
⇒右のサイドバーにある『作成』の項目に「images」という名前のフォルダを作る←ここにアップします
手順2:ffftpソフトから
対象ドメインフォルダ⇒「public_html」⇒フォルダを新規作成。名前は「images」で
では、実際にカスタマイズしていきましょう!
メインの見出しをカスタマイズ
コードを公開しますので、こちらをそのままコピペして、一部を修正してください。
「外観」⇒「カスタマイズ」⇒「追加css」に、修正したコードを貼り付けてください。
なお、先に「カスタマイズ」⇒「投稿・固定ページ」から見出しデザインを「下線(ストーク)」「シンプル(スワロー)」と設定しておいてください!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
/* 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; /*アイコン色*/ } |
カラーコードは当サイトの配色となっておりますので、ご自由に変更してください。
画像付き見出し2
「h2.class名」と名前を付けて分類しましょう。
実際に投稿画面でh2タグを入力する時、「h2 class=””」とclass名を指定します。
class名は何でもいいですが、自分がわかりやすいものにしましょう。

1 2 3 4 5 6 7 8 9 10 11 12 |
/* 浅井さん見出し */ h2.asaisan { font-size: 126%; line-height: 2.0em; background: transparent url(https://magokoroplus.com/wp-content/uploads/asaisan-h2.png) 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; } |
以上で終了です。
最後に
ダウンロードした画像のサイズに合わせて見出しの画像を作ると、余白などうまくいくと思います。
文字と画像が重なってしまう場合は、「padding」の数値を変更してください。
※なお、このカスタマイズにより何か異変を生じても、当サイトは一切の責任を負わないものとします。
シンプルでカッコいいんだけど、ちょっとつまらない……