こんにちは、テンテンです。
今回は、有料テーマであるTHE THORのサブタイトルボーダーボックスの使い方について解説します。
サブタイトルボーダーボックスとは…?
下記のボックスのことです。
現在、赤い箱の中に文字を入れているので、このように表示されますが、そのまま表示されると下記のようになりますよね。
今回、この中に文字を入れる方法を解説していきます。
では早速、解説に進みます。
THE THOR（ザ・トール）のサブタイトルボーダーボックスの見出しに文字を入れる方法
まずは、サブタイトルボーダーボックスの中に入れる内容（文章）を作り、サブタイトルボーダーボックスを使いましょう。
例）
ここまではできますよね！
①「サブタイトル編集」を使って、見出しを入れましょう。
②「サブタイトルを入力」してOKに進みます。
③これで完成です！
とても簡単ですよね！これで解説終了したいところなのですが、おそらく、できねーじゃんかよと思っている方もいらっしゃると思います。
では、この解決方法を解説させていただきます。
サブタイトルボーダーボックスの見出しに文字が入らない時の対策
これを解決できる方法が、CSSの設定順の変更です。
少しわかりにくい表現になってしまったので、具体的に解説をすると、ブログ記事を書く際、まず文字を入力しますよね。
その上で、フォントサイズを変更したり、文字を濃くしたり、文字の色を変更したりとCSSをいじります。
このCSSの設定順を変更するということです。
サブタイトルボーダーボックス内の見出しに文字が入らない原因は、このCSSの設定順番が原因です。
【サブタイトルボーダーボックスの見出しに文字を入れる解決策】
①テキスト（本文を入力）→②サブタイトルボーダーボックスを使う→③サブタイトル編集を行い見出しを入れる
現在、サブタイトルボーダーボックスの見出しに文字が入らない場合、上記の方法に変更しましょう。
僕はこの方法で解決することができました！
その後に、いろいろと検証してみたのですが、下記のような流れでCSSを設定していくと、サブタイトルボーダーボックスの見出しに文字が入りません。
【サブタイトルボーダーボックスの見出しに文字が入らない事例】
①テキストを入力（本文）→②サブタイトルボーダーボックスを使う→③フォントサイズを変更→④サブタイトル編集を行い、見出しに文字を入れる
サブタイトルボーダーボックスを使った後に、別のCSS設定を加えると、サブタイトル編集ができない仕様なようです。
僕もはじめ、ここでつまづいたのですが、これで解決することができました。
この方法でどうしても解決できない場合、「テキスト」から直接プログラミングコードをいじりましょう。
プログラミングができない方でもわかりやすいように解説させていただきます。
【サブタイトルボーダーボックスのコード】
<div class=”ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred”>ここに本文が入る</div>
このコードは、サブタイトルボーダーボックスのプログラミングコードです。
このコードに、（ title=”見出しを入れる” ）を付け加えましょう。
【title=”見出しを入れる”を付け加える場所について】
<div class=”ep-box es-BsubTradi bgc-white es-borderSolidM es-radius brc-DPred” title=”見出し”>ここに本文が入る</div>
このようにコードを変更すれば、サブタイトルボーダーボックスの見出しを文字を入れることができます。
まとめ
サブタイトルボーダーボックスの見出しに文字を入れる為には、「サブタイトル編集」を使いましょう。
サブタイトル編集を使っても、見出しに文字が入らない場合、CSSの設定順が原因の可能性が最も高いです。
この方法でもどうしても解決できない場合は、直接プログラミングコードをいじって、title=”見出し”のコードを付け加えましょう。
最後まで読んでいただき、ありがとうございました。