この記事では、私が12時間越えの戦いの末に編み出した
を説明します。
1つ大前提としてお伝えすると、私は2019年9月にブログを開設しましたが
という状態でした。
なので、もしこの方法が使えなかったり、不具合が出たりしても一切責任がとれません！
ご承知おきください。
それでは説明します。
【THE THOR】サブタイトルボーダーボックスを複数使ったときの見え方
今回の方法では、次のように使い分けることができます！
【THE THOR】サブタイトルボーダーボックスを複数使う方法
必要なことは2つだけです。
① これから紹介するコードをコピー
② テキストエディタで貼り付ける
とても簡単です！
それでは早速コードを紹介します。
サブタイトルボーダーボックス（チェックアイコン付グレー）
コードはこちら
<div class="ep-box es-borderSolidM brc-VLgray bgc-white"> <div class="icon-file-text" style="position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #8c8c8c; font-weight: bold;"><strong> テスト</strong></div> <div> <div class="icon-checkmark2" style="font-size: 10pt; color: #ff1493; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> <div> <hr class="hr-dotted" /> </div> <div class="icon-checkmark2" style="font-size: 10pt; color: #ff1493; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> <div> <hr class="hr-dotted" /> </div> <div class="icon-checkmark2" style="font-size: 10pt; color: #ff1493; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> </div> </div>
背景がないように見えるサブタイトルボーダーボックスです。
アイコン変更方法
『icon-file-text』または『icon-checkmark2』の部分を任意のアイコン名に変更してください。
チェックアイコンの色変更方法
コードの中の『#ff1493』のところを変えれば任意の色に変えることができます。
アイコンを変更するとかなりイメージが変わります。
次のように応用することも可能です。
ブログの背景が白じゃない場合は、サブタイトル部分が浮いてしまうため次に紹介するボックスを使った方が良いです。
サブタイトルボーダーボックス（チェックアイコン付ブルー）
コードはこちら
<div class="ep-box es-borderSolidM brc-Lsky bgc-white"> <div class="icon-file-text" style="position: absolute; display: inline-block; top: -13px; left: 10px; padding: 5px 15px 5px 15px; line-height: 1; font-size: 19px; background-color: #7ecff5; color: #ffffff; font-weight: bold; border-radius: 5px; text-align: center;"><strong> テスト</strong></div> <div> <div class="icon-checkmark2" style="font-size: 10pt; color: #7ecff5; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> <div> <hr class="hr-dotted" /> </div> <div class="icon-checkmark2" style="font-size: 10pt; color: #7ecff5; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> <div> <hr class="hr-dotted" /> </div> <div class="icon-checkmark2" style="font-size: 10pt; color: #7ecff5; text-align: left;"><span style="font-size: 11pt; color: #000000;"> テスト</span></div> </div> </div>
色付きのサブタイトルボーダーボックスです。
アイコン変更方法
『icon-file-text』または『icon-checkmark2』の部分を任意のアイコン名に変更してください。
チェックアイコンの色変更方法
コードの中の『color : #7ecff5』の#7ecff5ところを変えれば任意の色に変えることができます。
サブタイトルの背景色の変更方法
『background-color : #7ecff5』の#7ecff5を任意の色コードに変えれば変更できます。
ボーダー色を変える方法
『brc-Lsky』のLskyを任意の色に変えれば変更できます。
この部分はTHE THOR独自の形式で表現されています。
｢THE THOR ボックス 色｣で調べれば詳しく解説してくれているサイトが出てきます。
サブタイトルボーダーボックス（シンプルグレー）
<div class="ep-box es-borderSolidM brc-VLgray bgc-white"> <div class="icon-file-text" style="position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #8c8c8c; font-weight: bold;"><strong> テスト</strong></div> <div>テスト</div> </div> <div></div>
サブタイトルボーダーボックス（シンプルブルー）
テスト
コードはこちら
<div class="ep-box es-borderSolidM brc-Lsky bgc-white"> <div class="icon-file-text" style="position: absolute; display: inline-block; top: -13px; left: 10px; padding: 5px 15px 5px 15px; line-height: 1; font-size: 19px; background-color: #7ecff5; color: #ffffff; font-weight: bold; border-radius: 5px; text-align: center;"><strong> テスト</strong></div> テスト </div>
色つきです。
記事のアクセントに最適なサブタイトルボーダーボックスです。
【THE THOR】サブタイトルボーダーボックス まとめ
今回はサブタイトルボーダーボックスをコード追記不要で複数使う方法を紹介しました。
サブタイトルボーダーボックスが複数使えることで、THE THORライフは一段と輝きを増します。
今回の方法であなたのより良い記事作りに貢献できると幸いです。
グローバルメニューにカテゴリーなどを表示する際、文字だけだと物足りないと感じる方は多いと思います。 アイコンを表示するとサイトのイメージが大きく変わります。 Before […]
同じTHE THORを使っている方と仲良くしたいので、是非twitter（@tyuuryuu_）のフォローをよろしくお願いいたします！
被リンク、SNSシェアもどんどんお願いします！！