ストークやスワローって、初心者でもすぐに始められるくらいデザイン性にも優れていて便利（スマホ対応）なのですが、皆使っているというのが、ちょっと引っかかりますよね。
- 見出しだけでもオリジナルの画像が使えれば皆と差がつけられるのになぁ
- シンプルでカッコいいんだけど、ちょっとつまらない……
ということがあるかと思います。
今回は、そんな見出しのカスタマイズ方法を公開します。
サーバーへ「ffftpソフト」または「ファイルマネージャー」から見出しに使う画像をアップロードできる方を対象としておりますので、ご了承ください。
こんな風にカスタマイズします
●ストーク
●スワロー
記事タイトル（h1）
見出し（h2,h3）
まず、準備するもの
- 見出しに使う画像
- 画像をアップロードするためのフォルダ（サーバーに直接アップロードします）
サンプルとして画像をダウンロードできますので、ご利用ください。（学習用としてお使いください）
用意した画像を、サーバーへアップします。
その際、対象ドメイン（サイトURL）のフォルダに「images」を作りましょう。
手順１：サーバーのファイルマネージャーから
サーバーの「ファイルマネージャー」から対象ドメインを選択
⇒「public_html」
⇒右のサイドバーにある『作成』の項目に「images」という名前のフォルダを作る←ここにアップします
手順２：ffftpソフトから
対象ドメインフォルダ⇒「public_html」⇒フォルダを新規作成。名前は「images」で
（※ちなみに上記の手順２はh4スタイルです）
では、実際にカスタマイズしていきましょう！
ストークの見出しをカスタマイズ
コードを公開しますので、こちらをそのままコピペして、一部を修正してください。
「外観」⇒「カスタマイズ」⇒「追加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 |
/* h2 */ .entry-content h2{ font-size: 136%; line-height: 2.0; text-align: left !important; background: transparent url(あなたのドメイン/images/h2.png) no-repeat !important; border-bottom: 2px #191954 solid; color: #1a264b; padding: 16px 0 8px 50px; margin-bottom: 18px; border-radius: 0 !important; box-shadow: none; } /* h3 */ .entry-content h3{ border-left: transparent !important; background: transparent url(あなたのドメイン/images/h3.png) no-repeat !important; border-radius: 0 !important; padding: 10px 0 8px 50px; font-size: 120%; } /* h4 */ .entry-content h4{ border-left: 3px solid お好きなカラーコード; padding: 6px 0 .2em .4em; font-size: 110%; } |
ひらがな部分の「あなたのドメイン」には「サイトURL」を、お好きなカラーコードは「#」から始まる6桁の英数字です。当サイトは「#191954」となっています。
スワローの見出しをカスタマイズ
コードを公開しますので、こちらをそのままコピペして、一部を修正してください。
「外観」⇒「カスタマイズ」⇒「追加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 55 56 57 58 59 60 61 62 |
/* h1 */ #inner-content h1 { position: relative; font-size: 160%; line-height: 1.4; padding:0.25em 1em; display: inline-block; top:0; } #inner-content h1:before, h1:after { position: absolute; top: 0; content:''; width: 8px; height: 100%; display: inline-block; } #inner-content h1:before { border-left: solid 1px gray; border-top: solid 1px gray; border-bottom: solid 1px gray; left: 0; } #inner-content h1:after { content: ''; border-top: solid 1px gray; border-right: solid 1px gray; border-bottom: solid 1px gray; right: 0; } /* h2 */ .entry-content h2{ font-size: 136%; line-height: 1.8; background-color: transparent; background: url(あなたのドメイン/images/azana-h2.png) no-repeat !important; text-align: left !important; border-bottom: 2px #191954 solid; color: #2b2b2b; padding: 12px 0 6px 54px; border-radius: 0 !important; box-shadow: none; } /* h3 */ .entry-content h3{ border: transparent !important; background: transparent url(あなたのドメイン/images/azana-h3.png) no-repeat !important; border-radius: 0 !important; padding: 16px 0 4px 48px; font-size: 120%; margin-top: 1.0em; margin-bottom: 0.4em; } /* h4 */ .entry-content h4{ border-left: 4px solid お好きなカラーコード; padding: 0 0 .2em .4em; font-size: 110%; } |
ストークと同様変更してください。
最後に
ダウンロードした画像のサイズに合わせて見出しの画像を作ると、余白などうまくいくと思います。
文字と画像が重なってしまう場合は、「padding」の数値を変更してください。
※なお、このカスタマイズにより何か異変を生じても、当サイトは一切の責任を負わないものとします。
