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

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

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

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

※当サイトは「エックスサーバー」とwordpressテーマ「ストーク」または「スワロー」を利用しています。
サーバーへ「ffftpソフト」または「ファイルマネージャー」から見出しに使う画像をアップロードできる方を対象としておりますので、ご了承ください。

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

通常の見出し2

見出し3

見出し4

浅井宏輔さん用見出し2

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

 

まず、準備するもの

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

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

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

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

手順2:ffftpソフトから

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

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

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

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

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

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

 

画像付き見出し2

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

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

以上で終了です。

 

最後に

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

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