MENU
ファンレターを書いてみませんか?

当サイトの作品を読んで、「なんかちょっと心がソワソワしたぞ」「うるっとしちゃった」「単純に文章が好き!」という方は、私にファンレターを送って下さい。

応援されることは嬉しい。
応援する方は2倍嬉しい。

あなたのお気持ち待ってます。

ばなやん(一ツ屋有美子)にファンレターを贈る

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

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

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

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

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

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

 

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

ストーク

 

スワロー

記事タイトル(h1)

見出し(h2,h3)

 

目次

まず、準備するもの

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

 

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

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

 

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

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

 

手順2:ffftpソフトから

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

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

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

 

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


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

/* 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」に、修正したコードを貼り付けてください。

/* 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」の数値を変更してください。

当サイトのテーマ「SWELL」のカスタマイズはこちら↓↓

あわせて読みたい
コピペでOK! STORK,SWELLの見出しカスタマイズ
コピペでOK! STORK,SWELLの見出しカスタマイズデザインをカスタマイズするには、「外観」→「カスタマイズ」→「追加css」と移動し、コードを入力することが必要です。サルワカさんでも、素敵なデザインの見出しのコー...

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

一ツ屋有美子@声優小説家
ここまでお読み下さり、ありがとうございます!!

ブログランキングに参加してます!

次のリンクをクリックして応援してもらえると嬉しいです。
よろしくお願いします(@゚∀`@)ノ

 



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

注意

特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

目次
閉じる