Affinger

【アフィンガー5】誰でも簡単に見出しの中に小さな文字を入れる方法

2020年7月27日

・アフィンガーで、見出しの中に小さな文字を入れるにはどうすればいいの?

こんな悩みを解決します。

この記事を書いている人

この記事を書いている僕は、副業ブログで収益6桁を稼ぐ大学生。
Twitter(@you_blog2912)を運営中。

今回は、以下のような見出しの作り方について紹介します。

完成形の見出し例

アフィンガー5のカスタマイズ見出しの中に小さな文字を入れる方法

上のように、見出しの中の一部の文字を小さくするだけで、キーワードを含めつつ、スッキリとした見出しを作ることが可能です。

さっそく作り方を確認していきましょう!

アフィンガーカスタマイズ見出しの中に小さな文字を入れる方法は2つある!

実は、見出しの中に小さな文字を入れる方法は、2つあります。

  • HTMLで入力
  • キャッチコピーを使用

僕は、2つ目のキャッチコピーを使う方法で行っていますが、自分の執筆スタイルに合わせて、使い分けてみてください。

見出しの中に小さな文字を入れる方法➀HTMLで入力

以下のコードを、見出しの中にコピペすればOKです。

HTMLコード

<p><span class="st-h-copy">小さくしたい文字を入力</span></p>

例えば、上の見出しは以下のようなコードで作成しています。

<h3><span class="st-h-copy">見出しの中に小さな文字を入れる方法➀</span>HTMLで入力</h3>

本当にコピペするだけなので簡単ですね!

『AddQuicktag』というプラグインに保存しておくと、HTMLコードを簡単に出せるようになるので、頻繁に使う場合は、登録しておきましょう。

見出しの中に小さな文字を入れる方法➁キャッチコピーを使用

上では、HTMLを用いて直接入力しましたが、キャッチコピーボタンでも簡単にできます。

アフィンガー5で見出しの中に小さな文字を入れる方法

小さくしたい部分をドラッグして、上の画像の部分から『キャッチコピー』を選択すればOKです。

アフィンガー5で見出しの中に小さな文字を入れる方法

完成形

わざわざHTMLを打ち込まなくていいので、簡単ですね!

まとめ: 見出しの一部を小さな文字にして見やすい見出しを作ろう!

今回は、見出しの中に小さな文字を入れる方法について紹介しました。

  • HTMLで入力
  • キャッチコピーを使用

キーワードを入れつつ、文字数が多くてもスッキリした見出しを作ることができるので、見出しが長くなったときはやってみてください。

当ブログでは、他にもアフィンガーのカスタマイズについて紹介しているので、参考にしてみてください!

関連記事
アフィンガーのヘッダーにカード型リンクを設置する方法【おすすめ記事の設定も】

アフィンガーカスタマイズ一覧

-Affinger