THORのサブタイトルボーダーボックスは利用頻度の高いスタイルです。ボーダーの色やボックスの背景色は自由に変更が可能です。THO[...]しかし、肝心なサブタイトルボックスのカラーが基本設定で1つしか選べません。THOR使いなら一度はそう思ったことがあるはず。↑出来上がりはこのようになります。カーソルあててみてください。同時に存在してますよwテキストエディタでサブタイトルボーダーボックスのコードにclass名を追加。追加CSSにコードを挿入で出来上がり。長くなりますが順を追って説明していきます。サブタイトルボーダーボックスのコードにclass名を追加まず普通にサブタイトルボーダーボックスを作りテキストエディタでコードを見てみましょう。標準的なSTBB(サブタイトルボーダーボックス)コードを見ると以下のようになっています。(見やすいよう改行しています。title="サンプル">サンプル。標準的なSTBB(サブタイトルボーダーボックス)</div>classの中に半角スペースを挟みつついくつか単語が並んでいますが、これひとつずつがclass名です。たくさんのクラス名の組み合わせで(たくさんの装飾を使って)ボックスができています。この中に、任意のclass名を入れて装飾を追加します。今回はsubcl01、subcl02、subcl03の3つを作り3種類のSTBBをつくりました。半角スペースを入れてclass名を追加してください。title="サブタイトルにクラス名03">うそでしょ、そんなことが・・・</div>ここまで出来たら後は簡単に自由自在です。出来上がりサンプルの上のボックスから順番に見ていきましょう。上、標準のサブタイトルボーダーボックス標準なので特に表記することはないのですが、一応これがベースになるCSSです。下のline-heightはなくてもOK。ボックスの中で文字の縦位置がずれてたので付け加えました。27px;}3番目、水色ボーダーのサブタイトルボーダーボックス2番目と色が変わるだけですね。27px;}以上です。使って変更したいサブタイトルボーダーボックスを指定したあとは、自由に変更できます。あとがきクラス名を追加するという発想が出てくるまで時間がかかりました。作った様々なサブタイトルボーダーボックスですが、基本的には多くの種類を使いわけるようなパーツではありません。それでも「ここだけは!」という場面があるのでは?そんな時にこの記事を思い出して貰えれば嬉しいです。THORは良いペースでアップデートしているので、このカスタマイズも標準装備されそうですね。コメントをキャンセルメールアドレスが公開されることはありません。karaagebow.com。