THE THOR の便利機能のひとつ【 タグ管理 】
「タグ管理」はとても便利な機能ですが、必ずついてくる枠線がいらないときもありますよね？今回は「タグ管理」で作ったコンテンツの枠線を消去するカスタマイズです。
ちなみに↑これも「タグ管理」で作って枠を消しています。内容を更新したくなったらもとの「タグ管理」を修正すれば全ての記事に反映されてとても便利。
THE THOR タグ管理 の枠線を消去するCSS
追加CSSにコードを記述します。
外観 → カスタマイズ → 追加CSS
コードは以下をコピペ。
/*タグ管理のボーダー消去*/
.afTagBNone .afTagBox {
border: none!important;
padding: 0px;
background: transparent;
}
枠線を消すCSSの他に新しいクラス名 afTagBNoneをつけています。このクラス名をつけた「タグ管理」のみ枠線を消去。クラス名は任意で変えてもらっても大丈夫です。全ての「タグ管理」から枠線を消去する場合はこのクラス名は必要ないので削除してください。
これで準備は完了です。
枠をつけない「タグ管理」にクラス名を付与する方法
「タグ管理」にクラス名をつけるには、生成されたショートコードを<div>で囲みます。
投稿画面のテキストで<div>とクラス名を追加
これで「タグ管理」に枠をつけないCSSが適用されます。
では実際にサンプルでみてみましょう。
「タグ管理」の枠を消すサンプル
追加CSSにコードが記述済みとなっている状態から「タグ管理」のショートコードを利用します。サンプルでは「タグ管理」にボタンを登録しています。
「タグ管理」の通常のショートコードを表示
[afTag id=14478]
使用したコードは[[afTag id=XXXXX]]です。ボタンなのに枠線がついていてカッコ悪いし背景色も必要ないですね。
「タグ管理」の枠線を消すCSSを適用
投稿画面のテキストでクラス名を付与します。使用したコードは<div class=”afTagBNone”>[[afTag id=XXXXX]]</div>
枠線が無くなり普通のボタンになりました。これで「タグ管理」を使い一元管理することができます。
カスタマイズは以上です。
※カスタマイズは自己責任でお願いします。
【おまけ】『タグ管理』の枠線の色を変更
追加CSSに以下を記述
/*タグ管理のボーダーカラーを変更*/
.afTagBox {
border: 5px solid #b22222!important;
}
#b22222を好きな色コードに変更してください。5px の数値を変更すると太さが変わります。solid を変更すると枠線のパターンが変更可能です。
| 枠線の種類 | 表示 | 枠線の種類 | 表示 |
| solid | 実線 | ridge | 山型 |
| dotted | 点線 | inset | 左と上が濃い(立体的) |
| dashed | 破線 | outset | 右と下が濃い(立体的) |
| double | 二重線 | hidden | 非表示 |
| groove | 谷型 | none | なし（標準） |
テーブルテーブルのスクロールをお知らせ
あとがき
「タグ管理」は基本的にアフィリエイトのために用意されていると思うので、このような使い方は邪道かもしれません。アフィリエイト用であればバナーやボタン、説明などをまとめるために枠が必要だと思います。
しかし何でもショートコード化できる便利なツールとして使うなら【枠あり/枠なし】が選べるようになると嬉しいですね。フィットさんお願いします！
コメント