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

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

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

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

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

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

 

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

●ストーク

画像

 

●スワロー

画像

記事タイトル（h1）

画像

見出し（h2,h3）

 

目次

まず、準備するもの

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

 

サンプルとして画像をダウンロードできますので、ご利用ください。（学習用としてお使いください）

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

 

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

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

 

手順２：ffftpソフトから

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

（※ちなみに上記の手順２はh4スタイルです）

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

 

ストークの見出しをカスタマイズ


画像

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

ひらがな部分の「あなたのドメイン」には「サイトURL」を、お好きなカラーコードは「#」から始まる6桁の英数字です。当サイトは「#191954」となっています。

 

スワローの見出しをカスタマイズ


画像

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

ストークと同様変更してください。

 

最後に

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

 

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




この記事が気に入ったら
いいね または フォローしてね！

この記事を書いた人

一ツ屋 有美子のアバター 一ツ屋 有美子 声優小説家

「自分には何もない」なんて思っているそこのあなた！　私がおもしろエロく、小説で「あなた」を知る方法を教えちゃうよ！　感情をコントロールし言葉で幸せになる方法を小説で表現する声優小説家。 ⇒note｜https://note.mu/ucon_tachibana
【得意】
演技・人間観察・雰囲気読む・感覚を落とし込む・小説書く・サプライズ考える・男性を理解し応援する・難しいことをわかりやすく説明する

関連記事

目次