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

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

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

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

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

 

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

ストーク

 

スワロー

 

まず、準備するもの

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

 

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

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

 

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

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

 

手順2:ffftpソフトから

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

(※ちなみに上記の手順2はh4スタイルです)

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

 

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


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

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

 

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


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

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

 

最後に

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

 

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

 







橘右近をシェアで応援!!

おススメは「エックスサーバー

アクセスが早いので読者さんのストレスを軽減! 離脱を防げる!
安心のSSL化が無料
大量アクセスでもダウンしない! ちゃんと表示される!



ワードプレステーマなら「ストーク

初心者に優しい設定で、すぐに執筆にとりかかれる!
カスタマイズ方法がわからなくてもキレイなデザイン!
何もしなくても自動的にスマホ対応!!



ABOUTこの記事をかいた人

「生きる」と「愛」をテーマにし、言葉で世界を変える小説家。 役者経験を活かし、自分を見つめることで人生を豊かにさせる方法を伝えるマインドコーディネイター。webデザインで色んな人のビジネスに関わり、自分の世界観を広げ、子供たちが楽しくビジネスを学ぶ学校を作るのが夢。 【得意】 演技・人間観察・雰囲気読む・感覚を落とし込む・小説書く・サプライズ考える・男性を理解し応援する・難しいことをわかりやすく説明する