訪問ありがとうございます!ゆっくりご覧ください!

【THE THOR】サブタイトルボーダーボックスを複数使う方法【コード追記不要】

 

 

 

 こんなあなたにおすすめ!
なんでサブタイトルボーダーボックスが1種類しか使えないんだ!!

ボックスで記事をおしゃれにしたいのにできない!!

THE THORは他の機能は良いのにここがもったいない…

 

 

この記事では、私が12時間越えの戦いの末に編み出した

 

サブタイトルボーダーボックスを複数使う方法

を説明します。

 

1つ大前提としてお伝えすると、私は2019年9月にブログを開設しましたが

 

HTML?CSS?なにそれ呪文?

 

という状態でした。

 

なので、もしこの方法が使えなかったり、不具合が出たりしても一切責任がとれません!
ご承知おきください。

 

 

それでは説明します。

 

 

 

【THE THOR】サブタイトルボーダーボックスを複数使ったときの見え方

 

もともとTHE THORに備え付けのサブタイトルボーダーボックスは、皆さんよくご存じのこれです

 

 

今回の方法では、次のように使い分けることができます!

 

 試す前にお読み下さい!
 不具合の責任はとれません!

 記事レイアウト崩壊を防ぐためにバックアップしてからお試しください!

 良い方法だと思ったら被リンクやSNSシェアしてくれると嬉しいです♪

 

 この方法の利点
 コード追記不要です!

 サブタイトルにカーソルを合わせてそのまま文字を編集できます!(『サブタイトル編集』をおさなくて良い)

 手軽に色などを変えられます!

 

 

 この方法の留意点
 後からレイアウトを変えるときは1つ1つ編集し直す必要があります!

 HTML・CSS初心者が作ったため正攻法じゃない可能性あります!

 コピペがちょっとめんどくさいです!(定型文登録などがおすすめ)

 サブタイトルが長いとレイアウトが崩れます!

 

【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>&nbsp;

 

 

色付きのサブタイトルボーダーボックスです。

 

アイコン変更方法

『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シェアもどんどんお願いします!!