/*================================== * * 2021/07/01 * bs_box_css * * bs_boxのclass=指定で使うクラス * #bs_box(class=クラス名) * 例　#bs_box(class=paper_default) * 著作権 長岡京健康みらい研究所 * 【重要】nagamira_css2の後、最後に読み込むようにしてください。 * 2021/07/01 * W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認 * 【クラス例】 paper_default　シンプルな紙ふうの枠です。 paper_old　シンプルな紙ふうの枠です。paper_defaultの色違いで古びた感じを出しています。 stech_box　ステッチ風デザイン。可愛い感じが出ます。 stech_box_maroon .stech_boxの色違い。 japan_box_azuki　小豆色の和風な枠。 pointbox_left　ポイントを書く枠です。記事内の重要なポイントや補足事項を書くために使うと良いかもしれません。 arrow_box　三角形の誘導枠。手順の説明などでよく使われる装飾です。 段落の装飾にも使えます。オプション指定で終端では三角形の枠を外せます。 色も無指定時を含めて22色になります。 hidariore_ribbon　obi_ribbonの旧い版。互換性のため残してあります。 obi_ribbon　見出しの装飾などで使われる装飾です。 オプションで右折れリボン、左折れリボン、左右リボン、下向き吹き出し、上向き吹き出しを指定できます。 段落の装飾にも使えます。 色も無指定時を含めて22色になるので幅広い記述が可能です。 応用として見出しの冒頭につくWEBアイコンの属性を枠内で設定できる可能性に気づきます。段落だけでなくパレットで設定された見出し1～3の下線を消す、アイコンを消して、枠に合わせることができます。 2019.03.12 .text_h2h3h4_clear　見出しの下線や行頭アイコンや画像、背景色を消すことで書体の大きさと行高さをのぞいた飾りのない文字列にします。枠のクラス内で入れ子で書式を消すのに使うといいでしょう。 2019.03.13 三角形の誘導枠：下向き　を作る 2019.03.13 .text_h2h3h4_clearの修正と旧名を短く 書体の大きさと行高さ、マージンはそのまま継承するように変更。使い方は変わらず。 .text_h2h3h4_clear　見出しの下線や行頭アイコンや画像、背景色を消すことで書体の大きさと行高さをのぞいた飾りのない文字列にします。枠のクラス内で入れ子で書式を消すのに使うといいでしょう。 2019.03.13 見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定を追加 text_h2h3h4_clearを使った場合と同じ効果がある 2019.03.14 .pointbox_left枠系統をのぞく全ての枠の系統クラス内の段落pのマージンを調整: 句読点がちょうど来た時に改行しないようにする。 0em 0.4em 0em 1em;(上　右　下　左) 2019.03.19 .pointbox_leftをスマホで見た時、左側余白が空いているのでメディアクエリでスマホ時と切り替えて出すようにした。 2019.03.26 text_h2h3h4_clearの旧名text_h1h2h3_clearだとh1も行うと間違えるので変更。 h2が見出し1、h3が見出し2、h4が見出し3 2019.03.31 .pointbox_leftの右側排他領域の調整 paper_default,paper_oldのマージンの調整 2019.04.04 paper_default,paper_oldのマージンの調整 2019.05.03 .pointbox_left　左右マージン調整 2019.05.05 条件セレクタで冗長性を廃止 2019.05.05 text_h1h2h3_clearを削除（もう使っているものがないのとtext_h2h3h4_clearと混同しないため） 2019.05.06 .arrow_box:after,.arrow_box:beforeで疑似要素に四角形を描いて、その上に三角形を描く時、IEやFFで線が出るのを解決する 2019.05.17 .arrow_boxの重複する属性を整理 2019.08.18 「POINT」指定枠の改良 旧版の記述を改良して「#bs_box(class=～」でクラス名を記述するだけでなく、#html2を利用して記述できるようにした。これに加えて、種類を増やしてみた。 クラス名は以下の通り。 .point-box-default .point-box-info .point-box-danger .point-box-primary .point-box-success .point-box-warning のようにして複数色タイプを用意した 2019/08/24 .arrow_boxに色違いのクラス継承を用意した。 2019/08/25 .arrow_box767px未満時スマホ画面時の三角形を半分ほど小さくする 2019.08.25 三角形の誘導枠のテキストのマージン調整（スマホ時とタブレット以上画面幅で） 2019/08/28 「POINT」指定枠の改良を「POINT」指定枠のさらなる改良＆改良に継承。 クラス継承方法がわかったのでメンテナンス性がよくなる。 旧版は廃止、削除済み pointをカタカナに置き換えて、背景を塗りつぶして楕円で囲んだ。これで視認性を向上した。 point本文枠の背景に色をつけた 本文マージンを調整 2019.08.28 従来の記述が多い継承方法を変えて、paper_defaultをpaper_letterに改名。oldの方も改修 2019.08.19 .japan_box_azuki　継承クラスに.japan_box_azuki.sumi　墨色を追加 2019/08/25 .arrow_boxカラム対応のため、幅調整。 文字が入っていないと自動的に最小幅となり、カラム幅に合わせないことが判明。 2019/08/25 .arrow_box767px未満時スマホ画面時の三角形を半分ほど小さくする 2019.08.25 三角形の誘導枠のテキストのマージン調整（スマホ時とタブレット以上画面幅で） 2019/10/02 arrow_boxで使える色を増やした 2019/10/02 defaultのをやめてdefaultと色名だけにする 2019.10.02 .arrow_box　連なる三角形の誘導枠終わりの枠を用意 2019/10/06改修追加 .hidariore_ribbon枠内見出し、段落が対象 .qhm-bs-boxのみ有効なクラス 見出し1～3を書くだけで既に設定された属性をクリアできる便利な機能 2019/10/08改修 .text_h2h3h4_clearに疑似要素クリアと上下マージンのクリア追加 最初に出てくる見出し1のマージン設定をクリア 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする 2019/10/09 文字色などの指定で条件分岐セレクタがないと正常に動かないので以下を追記する [class^="haik-palette-"] 2019/10/18 見出し飾り左折れリボン　赤、紺を追加 2019/10/19 左折れリボン、見出し1のマージン調整 2019/10/19 左折れリボン、色を追加（Boostrapの色と通常の色名クラス） 2019/10/21改修追加 クラスhidariore_ribonが左折れリボンだけしかできなかったのを変更して、通常は帯リボンとして使い、オプション指定で左折れリボンを取り外しして使えるようにした。 2019/10/21 見出し修飾のボーダー（クラス.wellから継承している）を0pxにする 左折れリボンの左からの位置を0pxから3pxへ 2019/10/22 オプションに右折れリボンを追加 2019/10/23 クラスarrow_box,obi_ribbonの色を追加。 現在21色 2019/10/23 見出し装飾：下向き吹き出しを追加 2019/10/23 obi_ribbonクラス見出し1の左右マージンを広げる調整 2019/10/30 見出し装飾にobi_ribbonクラスを枠線で表示するwaku_ribbonクラスを作成 2019/10/30 見出し装飾obi_ribbonクラス、waku_ribbonクラスの角を角張らせるkakuクラスを追加 角張らせている場合のリボン位置調整 2019/11/02 見出し装飾obi_ribbonクラス、waku_ribbonクラスの角を丸くするmaruクラスを追加 角を丸くしている場合のリボン位置調整 2019/11/05 見出し装飾obi_ribbonクラスの文字を黒にする所を箇条書きにすると白色になってしまうのを修正。 2019/11/08 クラスにおけるyellow指定、大文字で始まる「yellow」を「yellow」に修正 2019/12/04 通常の見出し2で白文字を使うようになったため、.text_h2h3h4_clearの文字色を黒に指定 2019/12/04 白を追加 obi_ribbon white waku_ribbon white 主に背景に色がある場合に使う色 2019/12/06 .text_h2h3h4_clearで文字の影を継承しないようにこれを消す 2019/12/26 .japan_box_azuki　箇条書きのための左右マージン、左排他領域調整 2019/12/26 略称のtxt_h234_clrを追加。text_h2h3h4_clearでは長いのと慣れてきたら使う。 2019/12/29 クラスarrow_box　ボタンと混同しないように角の丸めを廃止。 2019/12/30 見出しクリア、マージン設定、統合（複数） 2019/12/30 クラス.text_h2h3h4_clear　見出し3 右マージン修正 2020/01/13 クラス.text_h2h3h4_clear　文字色を黒を薄く#333に修正 コントラストが強すぎるので目にやさしく 2020/07/13 arrow_box見出し1，2，3の余白調整 2020/07/13 三角形の誘導枠のテキストのマージン左右値を調整 2020/07/16 クラス名修正　マージン調整 2020/07/21 見出し飾り左折れリボン　boostrap4のパネル色 【黒】 .waku_ribbon.black【別名】,.waku_ribbon.dark { .waku_ribbon.white,【別名】.waku_ribbon.light { .waku_ribbon.secondary【別名】,.waku_ribbon.default,.waku_ribbon.gray { を追加 2020/07/30 .obi_ribbon.whiteの見出し文字色、カンマ忘れ 2020/07/31 datepickerクラス用テーブル装飾スタイル追加 2020/07/31 見出し装飾obi_ribbonクラスのマージンを修正。下の吹き出しや三角形がはみ出ないように修正 2020/07/31 見出し装飾obi_ribbon　light 白系統を追加　whiteと分離 2020/08/16 クラスarrow_box　角の丸めが三角形の誘導枠とマッチしないことがあり、やっぱり止める 2020/08/16 arrow_boxで使える色名を3色追加 arrow_box secondary arrow_box light arrow_box dark 全ての色を半透明に切り替えて彩度を下げ、薄く見えるようにする 2020/08/16 三角形の誘導枠のテキストの左右マージンを0に修正 既に段落の左右マージンが修正されたのに伴う措置 テキストを自動で真ん中揃えにセット。 必要な場合はbs_box内で:left、:CENTER、:rightを指定する 2020/08/18 .obi_ribbon.maruの角の丸めをさらに丸くして、リボン位置を修正 2020/08/19 .waku_ribbonの下マージンと左右幅の修正 2020/08/19 テーブルの装飾をnagamira_css1h.cssへ引っ越し ここにあると切り離した時にわからなくなるため 2020/08/19 .obi_ribbon枠内見出し1，2，3、段落の文字書式の修正 2020/08/19 .obi_ribbonのマージン、排他領域を調整 2020/08/20 .obi_ribbonの色、彩度を下げる 2020/08/20 　　角が丸くなる場合は文字の左右マージンを0にする 2020/08/21 .obi_ribbon、.waku_ribboの色を調整 コントラスト差が強すぎて見づらい色の彩度を下げるなど修正 各色の細かい調整はカスタマイズ対応のみ 2020/08/21 .arrow_box first　はじまり　上の角丸め .arrow_box last　終わり　下の角丸め　 を追加 2020/08/29 帯リボン内でアコーディオンパネルを出す場合に備えて文字色を調整 2020/09/02 クラス.text_h2h3h4_clear　h2:first-childの設定ミス修正 2020/09/18 .obi_ribbonクラスのboostrap系統の色の修正 waku_ribbonクラスの色と大きく違うこと、ラベルなどの調整が進んできたので併せて調整する 2020/09/18 .waku_ribbonクラスの色を修正 バラバラになっていたのを統一、リボン枠が見やすいようにリボンの色を変更 ==================================*/ /*+++++++++++++++++++++++ 2019.03.11 paper_default シンプルな紙ふうの枠です。 cssの疑似要素で右上端が折れたような感じにしています。 枠では　.well属性を継承しているので、以下のコードを必ず入れておく border: none; box-shadow: none; 2019.03.13 見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定 2019.05.05 条件セレクタで冗長性を廃止 2020/07/13 .arrow_box見出し1，2，3の余白調整 2020/08/08 三角形の誘導枠のテキストのマージン pの設定忘れ修正 2020/08/08 三角形の誘導枠の排他領域の調整 画面の大きさでの変動を廃止 2020/08/19 .waku_ribbonに左右が丸いmaruクラスを追加 +++++++++++++++++++++++*/ /*================================== 2019.03.11 paper_letter シンプルな紙ふうの枠です。 cssの疑似要素で右上端が折れたような感じにしています。 2019.03.27 これを継承して色違いなど使えるようにします。 2019.08.28 従来の記述が多い継承方法を変えて、paper_defaultをpaper_letterに改名。oldの方も改修 継承先で記述するコードが色や線の太さなどの属性だけになり、半分以下に減った 2019/09/17 .point_boxポイントタイトル枠の大きさを調整してみる 2020/07/16 クラス名修正　マージン調整 ==================================*/ .paper { width: auto; position: relative; margin: 1.5em 1em; padding: 1em; border: none; box-shadow: none; word-break: break-all; } @media (min-width: 768px) { .paper { margin: 0.5em 0.5em; } } .paper { background: #ffffff; box-shadow: inset 0 0 24px rgba(230, 220, 228, 0.8); } .paper:before { content: " "; display: block; position: absolute; right: 0; top: 0; /* border-width: 0 24px 24px 0; */ border-width: 24px 0 0 24px; border-style: solid; width: 0; transform: rotate(360deg); } .paper:before { background: #e3e3e3; border-color: #fff #fff #e3e3e3 #e3e3e3; } .paper p { color: #333; margin: 0em 0.5em 0em 0.5em; line-height: 1.8em; } /* 2019.03.13 .paper_letter枠内見出し、段落 枠内で見出しを書くだけで既に設定された属性をクリアできる text_h2h3h4_clearを使った場合と同じ効果がある 2019/12/30 見出しクリア、マージン設定、統合（複数） */ .paper h2, .paper h3, .paper h4 { color: #333; margin: 0em; border: none; background: none; border-left: none; box-shadow: none; } .paper_letter h2 { padding: 0; margin-left: 0.5em; } .paper_letter h3 { margin-left: 0.7em; } .paper_letter h4 { margin-left: 1em; } /*================================== 2019.03.11 paper_letter old シンプルな紙ふうの枠です。cssの疑似要素で右上端が折れたような感じにしています。 paper_letterを継承した色違いで古びた感じを出しています。 2019.08.28 継承で記述するコードが色や背景色、線の太さなどの属性だけになり、半分以下に減った 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする 2020/07/16 クラス名修正　マージン調整 ==================================*/ .paper.old { background: #fff9e7; box-shadow: inset 0 0 30px rgba(230, 220, 190, 1); } .paper.old:before { background: #e8ddbd; border-color: #fff #fff #e8ddbd #e8ddbd; } /*================================== 2019.03.11 .stech_box ステッチ風デザイン。可愛い感じが出ます。 2019.03.13 見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定 2019.03.14 枠のマージンと絶対領域を調整 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする 2020/07/16 マージン調整 ==================================*/ .stech_box { background-color: darkgreen; border: 2px dashed #fff; border-radius: 8px; box-shadow: 0 0 0 4px darkgreen; color: #fff; margin: 1.5em 1em; padding: 1em; word-break: break-all; } /* 2019.03.13 .stech_box枠内見出し、段落 枠内で見出しを書くだけで既に設定された属性をクリアできる 飾り枠を外すtext_h2h3h4_clearを使った場合と同じ効果がある 2019/12/30 見出しクリア、マージン設定、統合（複数） */ [class^="haik-palette-"] .stech_box h2, [class^="haik-palette-"] .stech_box h3, [class^="haik-palette-"] .stech_box h4, [class^="haik-palette-"] .stech_box p { color: #fff; padding: 0; margin: 0em; border: none; background: none; border-left: none; box-shadow: none; } [class^="haik-palette-"] .stech_box h2 { margin-left: 0.5em; } [class^="haik-palette-"] .stech_box h3 { margin-left: 0.7em; } [class^="haik-palette-"] .stech_box h4 { margin-left: 1em; } [class^="haik-palette-"] .stech_box p { margin: 0em; } /*================================== 2019.03.11 .stech_box_maroon ステッチ風デザイン。.stech_box の色違い。 可愛い感じが出ます。 2019.03.13 見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定 2019.03.14 枠のマージンと絶対領域を調整 2019.03.27 .stech_boxを継承する方法がわかったのでテストして見る。 2019.08.28 .stech_boxを継承する方法を修正前より記述が減った 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする ==================================*/ .stech_box.maroon { background-color: maroon; box-shadow: 0 0 0 4px maroon; } /*================================== 2019.03.11 .japan_box_azuki　小豆色の和風な枠。 手描き風の枠　和風な感じが出ます。 2019.03.13 見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定 2019.08.19 .japan_box_azuki　継承クラスに.japan_box_azuki.sumi　墨色を追加 2019.09.01 排他領域を調整。1emから2em 0.5em;へ 2019/12/26 .japan_box_azuki　箇条書きのための左右マージン、左排他領域調整 ==================================*/ .japan_box_azuki { border: 4px solid #82636b; border-radius: 220px 20px 185px 20px / 20px 220px 20px 185px; margin: 1em 0.5em; padding: 1em; padding-left: 1em; background-color: #f3f3e3; color: #111; } /* 2019.03.13 .japan_box_azuki枠内見出し 枠内で見出しを書くだけで既に設定された属性をクリアできる 飾り枠を外すtext_h2h3h4_clearを使った場合と同じ効果がある 2019/12/30 見出しクリア、マージン設定、統合（複数） */ [class^="haik-palette-"] .japan_box_azuki h2, [class^="haik-palette-"] .japan_box_azuki h3, [class^="haik-palette-"] .japan_box_azuki h4, [class^="haik-palette-"] .japan_box_azuki p { padding: 0; margin: 0em; border: none; background: none; border-left: none; box-shadow: none; } [class^="haik-palette-"] .japan_box_azuki h2 { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0.5em; } [class^="haik-palette-"] .japan_box_azuki h3 { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0.7em; } [class^="haik-palette-"] .japan_box_azuki h4 { margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 1em; } /*.japan_box_azuki枠内段落*/ [class^="haik-palette-"] .japan_box_azuki p { margin: 0em 0.4em 0em 1em; } /*　オリジナル色 */ [class^="haik-palette-"] .japan_box_azuki.sumi { border-color: #646768; } /*================================== 2019.03.11 .hidariobi_box (旧.pointbox_left) .hidariobi_box　枠装飾です。 見出し装飾や記事内の重要なポイントや補足事項を書くために使うと良いでしょう。 2019.03.13 bs_box限定ですが、見出し1，2，3と段落をそのまま書くだけで自動的に書式をクリア、この枠内の書式に再設定 2019.03.19 スマホで見た時、左側余白が空いているのでメディアクエリでスマホ時と切り替えて出すようにした。 2019.05.03 .pointbox_left　左右マージン調整 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする 2019/10/09 色名の先頭にあるcolor_をやめて色名だけにする .pointbox_leftを.hidariobi_boxに変更 　もう1つpointboxを使っていたので誤って記述しないようにする ==================================*/ [class^="haik-palette-"] .hidariobi_box { padding: 0.5em 0.5em; margin: 1em 0em 1em 0em; color: #333; border: 1px solid transparent; background: #fff8e8; border-left: solid 10px #ffc06e; box-shadow: none; } [class^="haik-palette-"] .hidariobi_box p { margin: 0; padding: 0; line-height: 1.6em; } /* 2019.03.13 .pointbox_left枠内見出し 枠内で見出しを書くだけで既に設定された属性をクリアできる 飾り枠を外すtext_h2h3h4_clearを使った場合と同じ効果がある 2019/12/30 見出しクリア、マージン設定、統合（複数） */ [class^="haik-palette-"] .hidariobi_box h2, [class^="haik-palette-"] .hidariobi_box h3, [class^="haik-palette-"] .hidariobi_box h4 { color: #333; padding: 0; margin: 0em; border: none; background: none; border-left: none; box-shadow: none; } [class^="haik-palette-"] .hidariobi_box h2 { margin-left: 0.1em; } [class^="haik-palette-"] .hidariobi_box h3 { margin-left: 0.2em; } [class^="haik-palette-"] .hidariobi_box h4 { margin-left: 0.5em; } /*.hidariobi_box枠内段落*/ [class^="haik-palette-"] .hidariobi_box p { margin: 0em 0.4em 0em 1em; } /* 2019/10/05改修 .qhm-bs-boxのみ有効なクラス .hidariore_ribbon枠内見出し、段落が対象 見出しを書くだけで既に設定された属性をクリアできる便利な機能 飾り枠を外すtext_h1h2h3_clearクラスを入れ子で使った場合と同じ効果がある */ [class^="haik-palette-"] .hidariobi_box h2 { padding: 0; margin-top: 0; margin-bottom: 0; border: none; background: none; border-left: none; box-shadow: none; padding: 0.1em 0 0.1em 0; min-height: 0.5em; border: 0px; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .hidariobi_box h2:after, [class^="haik-palette-"] .hidariobi_box h2:before { content: ''; display: none; } [class^="haik-palette-"] .hidariobi_box h3 { border: none; margin-top: 0; margin-bottom: 0; background: none; border-left: none; box-shadow: none; padding: 0.1em 0 0.1em 0; min-height: 0.5em; border: 0px; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .hidariobi_box h3:before, [class^="haik-palette-"] .hidariobi_box h3:after { content: ''; display: none; } [class^="haik-palette-"] .hidariobi_box h4 { border: none; margin-top: 0; margin-bottom: 0; background: none; border-left: none; min-height: 0.5em; border: 0px; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .hidariobi_box h4:before, [class^="haik-palette-"] .hidariobi_box h4:after { content: ''; display: none; } [class^="haik-palette-"] .hidariobi_box p { margin: 0em 0.4em 0em 1em; } [class^="haik-palette-"] .hidariobi_box h2:first-child { margin: 0.618em 0 0.875em; } /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2019.03.11 .text_h2h3h4_clear 略称は下記で .txt_h234_clr text_h2h3h4_clear　見出しのクリアが行われていない枠スタイルに入れ子で使う。見出しの下線や行頭アイコンを消すことで飾りのない文字列にします。入れ子で変える。 h1は通常はHPにつき１個だけ、アイキャッチとヘッドコピーだけなのでここでは対処しない。 2019.05.05 条件セレクタで冗長性を廃止 2019/10/08改修 .text_h2h3h4_clearに疑似要素クリアと上下マージンのクリア追加 最初に出てくる見出し1のマージン設定をクリア 2019/10/09 文字色を白に指定 2019/12/04 通常の見出し2で白文字を使うようになったため、.text_h2h3h4_clearの文字色を黒に指定 2019/12/06 .text_h2h3h4_clearで文字の影を継承しないようにこれを消す 2019/12/26 略称のtxt_h234_clrを追加。text_h2h3h4_clearでは長いのと慣れてきたら使う。 2019/12/30 クラス.text_h2h3h4_clear　見出し3 右マージン修正 2020/01/13 クラス.text_h2h3h4_clear　文字色を黒を薄く#333に修正 コントラストが強すぎるので目にやさしく 2020/09/02 クラス.text_h2h3h4_clear　h2:first-childの設定ミス修正 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .text_h2h3h4_clear, .txt_h234_clr { min-height: 0px; margin-bottom: 0px; padding: 0.4em; color: #fff; border: none; background: none; border-left: none; box-shadow: none; } /* ここで見出しの下線や行頭アイコンを消すことで飾りのない文字列にできる */ [class^="haik-palette-"] .text_h2h3h4_clear h2, [class^="haik-palette-"] .text_h2h3h4_clear h3, [class^="haik-palette-"] .text_h2h3h4_clear h4, [class^="haik-palette-"] .txt_h234_clr h2, [class^="haik-palette-"] .txt_h234_clr h3, [class^="haik-palette-"] .txt_h234_clr h4 { border: none; padding: 0; text-indent: 0em; margin: 0.8em 0em; background: transparent; box-shadow: none; text-shadow: none; color: #333; } /* 疑似要素をクリアする */ [class^="haik-palette-"] .text_h2h3h4_clear h2::before, [class^="haik-palette-"] .text_h2h3h4_clear h2::after, [class^="haik-palette-"] .text_h2h3h4_clear h3::before, [class^="haik-palette-"] .text_h2h3h4_clear h3::after, [class^="haik-palette-"] .text_h2h3h4_clear h4::before, [class^="haik-palette-"] .text_h2h3h4_clear h4::after, [class^="haik-palette-"] .txt_h234_clr h2::before, [class^="haik-palette-"] .txt_h234_clr h2::after, [class^="haik-palette-"] .txt_h234_clr h3::before, [class^="haik-palette-"] .txt_h234_clr h3::after, [class^="haik-palette-"] .txt_h234_clr h4::before, [class^="haik-palette-"] .txt_h234_clr h4::after { content: ""; display: none; } [class^=haik-palette-] .text_h2h3h4_clear h2:first-child, [class^=haik-palette-] .txt_h234_clr h2:first-child { margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2019.03.13 三角形の誘導枠：下向き　を作る 2019.05.06 .arrow_box:after,.arrow_box:beforeで疑似要素に四角形を描いて、その上に三角形を描く時、IEやFFで線が出るのを解決する といっても吹き出しのようにはいかないので、中身を塗りつぶしに変えただけです。 2019/08/18 改修　 .qhm-bs-box.wellの記述を廃止して#html2によるクラス指定にも対応。 2019.08.24 .arrow_boxを継承している　色違いのバージョンを追加 2019/08/25 .arrow_boxカラム対応のため、幅調整。 文字が入っていないと自動的に最小幅となり、カラム幅に合わせないことが判明。 2019/08/25 .arrow_box767px未満時スマホ画面時の三角形を半分ほど小さくする 2019.08.25 三角形の誘導枠のテキストのマージン調整（スマホ時とタブレット以上画面幅で） 2019/10/02 color_defaultのcolor_をやめてdefaultと色名だけにする 2019.10.02 .arrow_box　連なる三角形の誘導枠終わりの枠を用意 【使い方】 通常の三角形の誘導枠 #bs_box(class=arrow_box){{ n番目の枠 本文がはいります }} 連なる三角形の誘導枠終わりの枠を用意 #bs_box(class=arrow_box last){{ 最後の枠 下の三角がないタイプです }} 2019/12/29 クラスarrow_box　ボタンと混同しないように角の丸めを廃止。 2020/08/08 三角形の誘導枠のテキストのマージン pの設定忘れ修正 2020/08/08 三角形の誘導枠の排他領域の調整 画面の大きさでの変動を廃止 2020/08/08 クラスarrow_box　角の丸めを復活。 ボタンのクラスとの整理がついてきたため 2020/08/16 クラスarrow_box　角の丸めが三角形の誘導枠とマッチしないことがあり、やっぱり止める クラスarrow_box　text-align:center;を指定 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .arrow_box { position: relative; background: #fffff4; border: 3px solid #109eb390; border-radius: 0px; margin-bottom: 42px; /*マージンを調整して下と重ならないようにする*/ min-height: 40px; text-align:center; } /* 疑似要素に四角形を描いて、その上に三角形を描く */ .arrow_box:after, .arrow_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } /* 正三角形部分内側 */ .arrow_box:after { border-color: rgba(23, 225, 255, 0); border-top-color: #109eb369; border-width: 40px; /*幅*/ margin-left: -40px; } /* 正三角形部分枠線 */ .arrow_box:before { border-color: rgba(16, 158, 179, 0); border-top-color: #109eb390; border-width: 46px; /*高さ*/ margin-left: -46px; } /* .arrow_box767px未満時スマホ画面時の三角形を小さくする 大きすぎて画面を無駄にしないため。 */ @media (max-width: 767px) { .arrow_box { margin-bottom: 32px; /*マージンを調整して下と重ならないようにする*/ } .arrow_box:after { border-width: 30px; /*幅*/ margin-left: -30px; } .arrow_box:before { border-width: 36px; /*幅*/ margin-left: -36px; } } /*========== 2019.10.02 .arrow_box　連なる三角形の誘導枠終わりの枠を用意 疑似要素last-childは使えないので意図的に「last」クラスを設定する 使い方は#bs_box(class=arrow_box last)とlastを入れるだけ 2020/07/13 .arrow_box見出し1，2，3の余白調整 2020/07/13 三角形の誘導枠のテキストのマージン左右値を調整 2020/08/21 .arrow_box first　はじまり　上の角丸め .arrow_box last　終わり　下の角丸め　 を追加 ==========*/ .arrow_box.first{ border-top-left-radius:20px; border-top-right-radius:20px; } .arrow_box.last{ border-bottom-left-radius:20px; border-bottom-right-radius:20px; } .arrow_box.last:before, .arrow_box.last:after { display: none; } /* 2019.03.13 .arrow_box枠内見出し 枠内で見出しを書くだけで既に設定された属性をクリアできる 飾り枠を外すtext_h2h3h4_clearを使った場合と似ているが、こちらは誘導枠に併せて余白を設定している 三角形の誘導枠のテキストのマージン調整（スマホ時とタブレット以上画面幅で） 2020/07/13 三角形の誘導枠のテキストのマージン左右値を調整 */ .arrow_box h2, .arrow_box h3, .arrow_box h4 { /* color: #333; */ border: none; background: none; border-left: none; box-shadow: none; text-shadow: none; } .arrow_box h2 { position: initial; background-image: none; background-color:transparent; border: 0; border-radius: 0; margin: 0 10px 0 10px; padding: 0; text-shadow:none; /* color: #333; */ } .arrow_box h3 { position: initial; background-image: none; background-color:transparent; border: 0; border-radius: 0; margin: 0 10px 0 10px; padding: 0; text-shadow:none; /* color: #333; */ } .arrow_box h3:before { border: none; background: none; } .arrow_box h4 { position: initial; background-image: none; background-color:transparent; border: 0; border-radius: 0; margin: 0 10px 0 10px; padding: 0; text-shadow:none; /* color: #333; */ } /*.arrow_box枠内段落 2019.08.25 三角形の誘導枠のテキストのマージン調整（スマホ時とタブレット以上画面幅で） 2020/07/13 三角形の誘導枠のテキストのマージン左右値を調整 2020/08/08 三角形の誘導枠のテキストのマージン pの設定忘れ修正 2020/08/16 三角形の誘導枠のテキストの左右マージンを0に修正 既に段落の左右マージンが修正されたのに伴う措置 必要な場合はbs_box内で:left、:CENTER、:rightを指定する */ .arrow_box p { /*color: #111;*/ margin: 0; } @media (min-width: 768px) { .arrow_box p { padding: 0.5em 0.5em; } } /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2019.08.24 三角形の誘導枠：下向き .arrow_boxを継承している　色違いのバージョン 使える色（2019/10/23　21色） arrow_box default arrow_box info arrow_box danger arrow_box primary arrow_box success arrow_box warning arrow_box black arrow_box brown arrow_box red arrow_box blue arrow_box cyan arrow_box navy arrow_box skyblue arrow_box orange arrow_box green arrow_box teal arrow_box lightgreen arrow_box gold arrow_box silver arrow_box pink arrow_box purple 使い方例 #bs_box(class=arrow_box danger){{ 1番目の枠 本文がはいります }} border: と記述するとブラウザにによっては線の太さがリセットされてしまうので border-color: と記述する 2019/10/02 arrow_boxで使える色を増やした arrow_box red arrow_box blue arrow_box cyan arrow_box skyblue arrow_box orange arrow_box green arrow_box gold arrow_box silver 色がわからなくても使えるようにした 2019/10/23 arrow_boxで使える色を増やした arrow_box navy arrow_box lightgreen arrow_box teal arrow_box pink 2020/08/16 arrow_boxで使える色名を3色追加 arrow_box secondary arrow_box light arrow_box dark 全ての色を半透明に切り替えて彩度を下げ、薄く見えるようにする ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/ /* default */ .arrow_box.default, .arrow_box.secondary { border-color: #8888889e; } /*正三角形部分内側*/ .arrow_box.default:after, .arrow_box.secondary:after { border-top-color: #88888890; } /*正三角形部分枠線*/ .arrow_box.default:before, .arrow_box.secondary:before { border-top-color: #8888889e; } /* info */ .arrow_box.info { border-color: #5FAAB39e; } /*正三角形部分内側*/ .arrow_box.info:after { border-top-color: #5FAAB390; } /*正三角形部分枠線*/ .arrow_box.info:before { border-top-color: #5FAAB39e; } /* danger */ .arrow_box.danger { border-color: #D96E6E9e; } /*正三角形部分内側*/ .arrow_box.danger:after { border-top-color: #D96E6E90; } /*正三角形部分枠線*/ .arrow_box.danger:before { border-top-color: #D96E6E9e; } /* primary */ .arrow_box.primary { border-color: #337ab79e; } /*正三角形部分内側*/ .arrow_box.primary:after { border-top-color: #337ab790; } /*正三角形部分枠線*/ .arrow_box.primary:before { border-top-color: #337ab79e; } /* success */ .arrow_box.success { border-color: #5BAF839e; } /*正三角形部分内側*/ .arrow_box.success:after { border-top-color: #5BAF8390; } /*正三角形部分枠線*/ .arrow_box.success:before { border-top-color: #5BAF839e; } /* warning */ .arrow_box.warning { border-color: #EBA65B9e; } /*正三角形部分内側*/ .arrow_box.warning:after { border-top-color: #EBA65B90; } /*正三角形部分枠線*/ .arrow_box.warning:before { border-top-color: #EBA65B9e; } /* light */ .arrow_box.light { border-color: #f9f9f99e; } /*正三角形部分内側*/ .arrow_box.light:after { border-top-color: #f9f9f990; } /*正三角形部分枠線*/ .arrow_box.light:before { border-top-color: #f9f9f99e; } /* dark */ .arrow_box.dark { border-color: #5a5a5a9e; } /*正三角形部分内側*/ .arrow_box.dark:after { border-top-color: #5a5a5a90; } /*正三角形部分枠線*/ .arrow_box.dark:before { border-top-color: #5a5a5a9e; } /* 黒 black*/ .arrow_box.black { border-color: #3333339e; } /*正三角形部分内側*/ .arrow_box.black:after { border-top-color: #33333390; } /*正三角形部分枠線*/ .arrow_box.black:before { border-top-color: #3333339e; } /* 茶色 brown */ .arrow_box.brown { border-color: #80644e9a; } /*正三角形部分内側*/ .arrow_box.brown:after { border-top-color: #80644e90; } /*正三角形部分枠線*/ .arrow_box.brown:before { border-top-color: #80644e9a; } /* red */ .arrow_box.red { border-color: #db44419a; } /*正三角形部分内側*/ .arrow_box.red:after { border-top-color: #db444190; } /*正三角形部分枠線*/ .arrow_box.red:before { border-top-color: #db44419a; } /* blue */ .arrow_box.blue { border-color: #0769f19a; } /*正三角形部分内側*/ .arrow_box.blue:after { border-top-color: #0769f190; } /*正三角形部分枠線*/ .arrow_box.blue:before { border-top-color: #0769f19a; } /* cyan */ .arrow_box.cyan { border-color: #0fbbbb9a; } /*正三角形部分内側*/ .arrow_box.cyan:after { border-top-color: #0fbbbb90; } /*正三角形部分枠線*/ .arrow_box.cyan:before { border-top-color: #0fbbbb9a; } /* 紺 navy*/ .arrow_box.navy { border-color: #3434aa9a; ; } /*正三角形部分内側*/ .arrow_box.navy:after { border-top-color: #3434aa90; ; } /*正三角形部分枠線*/ .arrow_box.navy:before { border-top-color: #3434aa9a; ; } /* skyblue */ .arrow_box.skyblue { border-color: #87ceeb9a; } /*正三角形部分内側*/ .arrow_box.skyblue:after { border-top-color: #87ceeb90; } /*正三角形部分枠線*/ .arrow_box.skyblue:before { border-top-color: #87ceeb9a; } /* orange */ .arrow_box.orange { border-color: #ffa5009a; } /*正三角形部分内側*/ .arrow_box.orange:after { border-top-color: #ffa50090; } /*正三角形部分枠線*/ .arrow_box.orange:before { border-top-color: #ffa5009a; } /* green */ .arrow_box.green { border-color: #2190219a; } /*正三角形部分内側*/ .arrow_box.green:after { border-top-color: #21902190; } /*正三角形部分枠線*/ .arrow_box.green:before { border-top-color: #2190219a; } /* 黄緑 lightgreen */ .arrow_box.lightgreen { border-color: #74cc529a; } /*正三角形部分内側*/ .arrow_box.lightgreen:after { border-top-color: #74cc5290; } /*正三角形部分枠線*/ .arrow_box.lightgreen:before { border-top-color: #74cc529a; } /* 深緑色 teal*/ .arrow_box.teal { border-color: #0080809a; } /*正三角形部分内側*/ .arrow_box.teal:after { border-top-color: #00808090; } /*正三角形部分枠線*/ .arrow_box.teal:before { border-top-color: #0080809a; } /* 紫 purple */ .arrow_box.purple { border-color: #983c989a; } /*正三角形部分内側*/ .arrow_box.purple:after { border-top-color: #983c989a; } /*正三角形部分枠線*/ .arrow_box.purple:before { border-top-color: #983c989a; } /* gold */ .arrow_box.gold { border-color: #ffd7009a; } /*正三角形部分内側*/ .arrow_box.gold:after { border-top-color: #ffd70090; } /*正三角形部分枠線*/ .arrow_box.gold:before { border-top-color: #ffd7009a; } /* silver */ .arrow_box.silver { border-color: #c0c0c09a; } /*正三角形部分内側*/ .arrow_box.silver:after { border-top-color: #c0c0c090; } /*正三角形部分枠線*/ .arrow_box.silver:before { border-top-color: #c0c0c09a; } /* 桃色 pink */ .arrow_box.pink { border-color: #f591a39a; } /*正三角形部分内側*/ .arrow_box.pink:after { border-top-color: #f591a390; } /*正三角形部分枠線*/ .arrow_box.pink:before { border-top-color: #f591a39a; } /*==== クラスhidariore_ribonを改修発展させてobi_ribbonへ移行。 クラスhidariore_ribonが左折れリボンだけしかできなかったのを変更して、通常は帯リボンとして使い、オプション指定で左折れリボンや右折れリボン、吹き出しを指定して柔軟に使えるようにした。 obi_ribbon枠内見出し、段落が対象 見出し1～3を書くだけで既に設定された属性をクリアできる便利な機能もある 飾り枠を外すtext_h1h2h3_clearクラスを入れ子で使った場合と同じ効果がある デフォルトはスカイブルー 【使い方】通常の帯リボン #bs_box(class=obi_ribbon){{ *見出し1 }} #bs_box(class=obi_ribbon){{ **見出し2 }} #bs_box(class=obi_ribbon){{ ***見出し3 }} 見出し1，2，3で先に疑似要素で吹き出しの三角形など装飾していた場合はクリアされます。 【使い方】角を角張らせる #bs_box(class=obi_ribbon kaku){{ 本文 }} 【使い方】角を丸くする #bs_box(class=obi_ribbon maru){{ 本文 }} 【使い方】左折れリボン #bs_box(class=obi_ribbon hidariore){{ *見出し1 }} #bs_box(class=obi_ribbon hidariore){{ **見出し2 }} #bs_box(class=obi_ribbon hidariore){{ ***見出し3 }} 【使い方】右折れリボン #bs_box(class=obi_ribbon migiore){{ *見出し1 }} #bs_box(class=obi_ribbon migiore){{ **見出し2 }} #bs_box(class=obi_ribbon migiore){{ ***見出し3 }} 【使い方】左右に折れリボンがつく #bs_box(class=obi_ribbon hidariore migiore){{ *見出し1 }} #bs_box(class=obi_ribbon hidariore migiore){{ **見出し2 }} #bs_box(class=obi_ribbon hidariore migiore){{ ***見出し3 }} 【使い方】下向き吹き出しがつく #bs_box(class=obi_ribbon bottom_hukidasi){{ *見出し1 }} #bs_box(class=obi_ribbon bottom_hukidasi){{ **見出し2 }} #bs_box(class=obi_ribbon bottom_hukidasi){{ ***見出し3 }} 【通常帯リボンの色を指定する】 #bs_box(class=obi_ribbon 色名){{～}} 例 #bs_box(class=obi_ribbon default){{～}} #bs_box(class=obi_ribbon red){{～}} 【左折れリボンの色を指定する】 #bs_box(class=obi_ribbon hidariore 色名){{～}} 例 #bs_box(class=obi_ribbon hidariore default){{～}} #bs_box(class=obi_ribbon hidariore red){{～}} 【右折れリボンの色を指定する】 #bs_box(class=obi_ribbon migiore 色名){{～}} 例 #bs_box(class=obi_ribbon migiore default){{～}} #bs_box(class=obi_ribbon migiore red){{～}} 【使える色一覧】（2019/10/30　22色） ※色は原色名そのままではなく、見やすくなるように調整しています obi_ribbon default obi_ribbon secondary obi_ribbon info obi_ribbon danger obi_ribbon primary obi_ribbon success obi_ribbon warning obi_ribbon red obi_ribbon pink obi_ribbon blue obi_ribbon skyblue obi_ribbon cyan obi_ribbon navy obi_ribbon green obi_ribbon lightgreen obi_ribbon teal obi_ribbon purple obi_ribbon black obi_ribbon orange obi_ribbon brown obi_ribbon gold obi_ribbon silver obi_ribbon yellow obi_ribbon white 2019/10/09 .qhm-bs-boxのみ有効なクラスとしていたのを見直して、汎用性を広げてみた。 2019/10/19 左折れリボン、見出し1のマージン調整 2019/10/19 左折れリボン、色を追加（Boostrapの色と通常の色名クラス） 2019/10/21 obi_ribbon gold、obi_ribbon silverを復活 2019/10/21 obi_ribbonクラスにobi_ribbon pinkを追加 2019/10/21 見出し修飾のボーダー（クラス.wellから継承している）を0pxにする 左折れリボンの左からの位置を0pxから3pxへ 2019/10/22 obi_ribbonクラスのオプションに右折れリボンを追加 2019/10/23 obi_ribbonクラスにobi_ribbon skyblueを追加 2019/10/23 見出し装飾：下向き吹き出し、上向き吹き出しの追加に伴い、色も修正 2019/10/23 obi_ribbonクラス見出し1の左右マージンを広げる調整 2019/10/29 obi_ribbonクラス右折れリボン、左折れリボン高さを1emに調整 2019/11/02 角の丸めを追加 2019/11/05 見出し装飾obi_ribbonクラスの文字を黒にする所を箇条書きにすると白色になってしまうのを修正。 2019/12/04 白を追加 obi_ribbon white 主に背景に色がある場合に使う色 2020/07/31 見出し装飾obi_ribbonクラスのマージンを修正。下の吹き出しや三角形がはみ出ないように修正 2020/07/31 見出し装飾obi_ribbon　light 白系統を追加　whiteと分離 白に近い、薄グレーにする 2020/08/18 .obi_ribbon.maruの角の丸めをさらに丸くして、リボン位置を修正 2020/08/19 .obi_ribbonのマージン、排他領域を調整 2020/08/21 .obi_ribbon、.waku_ribboの色を調整 コントラスト差が強すぎて見づらい色の彩度を下げるなど修正 各色の細かい調整はカスタマイズ対応のみ light white black dark 同じ色にしていたのを別系党にした理由は別々にした方がカスタマイズに対応しやすいため。 とくに白と黒を別系党にする案件は多くなりそうなため grayは同じ色名が2つあるので廃止。 ====*/ .obi_ribbon { display: block; position: relative; padding: 0; margin: 1em auto; margin-bottom: 2.5em !important; width: 95%; color: white; background: #59b6f1; border: 0px; } /* 角の丸めを角ばらせる */ .obi_ribbon.kaku { border-radius: 0; } /* 角の丸めを大きく丸くする 　　左右排他領域を増やして 文字位置を調整 2020/08/20 　　角が丸くなる場合は文字の左右マージンを0にする */ .obi_ribbon.maru { border-radius: 50px; padding:0 1em; } .obi_ribbon.maru .panel-body h2, .obi_ribbon.maru .panel-body h3, .obi_ribbon.maru .panel-body h4, .obi_ribbon.maru .panel-body p { margin: 0; } .obi_ribbon.hidariore:before { position: absolute; content: ''; top: 100%; left: 3px; border: none; border-bottom: solid 1em transparent; border-right: solid 2em #6eb3e0; } /* 角張らせている場合のリボン位置調整 */ .obi_ribbon.kaku.hidariore:before { left: 0px; } /* 角を丸くしている場合のリボン位置調整 */ .obi_ribbon.maru.hidariore:before { left: 38px; } .obi_ribbon.migiore:after { position: absolute; content: ''; top: 100%; right: 3px; border: none; border-bottom: solid 1em transparent; border-left: solid 2em #6eb3e0; } /* 角張らせている場合のリボン位置調整 */ .obi_ribbon.kaku.migiore:after { right: 0px; } /* 角を丸くしている場合のリボン位置調整 */ .obi_ribbon.maru.migiore:after { right: 38px; } /* 2019/10/23 見出し装飾：下向き吹き出し 疑似要素で下向き三角形をつけた。 色のデフォルトは水色系統。 色毎にborder-top-colorを設定する 三角形の左からの位置をem単位なのは％単位だとずれが発生するため */ .obi_ribbon.bottom_hukidashi::before { content: ""; position: absolute; display: block; width: 0; height: 0; top: calc(100% + 0px); left: 2.2em; border-top: solid 1em #59b6f1; border-right: solid 1em transparent; border-left: solid 1em transparent; } /* 2019/10/23 作成中 見出し装飾：上向き吹き出し 疑似要素で上向き三角形をつけた。 色のデフォルトは水色系統。 色毎にborder-bottom-colorを設定する 三角形の左からの位置をem単位なのは％単位だとずれが発生するため */ .obi_ribbon.top_hukidashi::before { content: ""; position: absolute; display: block; width: 0; height: 0; top: calc(-1em - 0px); left: 2.2em; border-bottom: solid 1em #59b6f1; border-right: solid 1em transparent; border-left: solid 1em transparent; } /* 2019/10/05改修 .qhm-bs-boxのみ有効なクラス .obi_ribbon枠内見出し、段落が対象 見出しを書くだけで既に設定された属性をクリアできる便利な機能 飾り枠を外すtext_h1h2h3_clearクラスを入れ子で使った場合と同じ効果がある 2019/12/08 見出し1，2，3の基本装飾クリア部分を統合 2020/08/19 .obi_ribbon枠内見出し1，2，3、段落の文字書式の修正 2020/08/29 帯リボン内でアコーディオンパネルを出す場合に備えて文字色を調整 */ /*見出し1，2，3の基本装飾クリア部分は同じ*/ [class^="haik-palette-"] .obi_ribbon h2, [class^="haik-palette-"] .obi_ribbon h3, [class^="haik-palette-"] .obi_ribbon h4 { color: #fff; padding: 0; margin-top: 0; margin-bottom: 0; border: none; background: none; border-left: none; box-shadow: none; } [class^="haik-palette-"] .obi_ribbon h2 { border: 0; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .obi_ribbon h2:after, [class^="haik-palette-"] .obi_ribbon h2:before { content: ''; display: none; } [class^="haik-palette-"] .obi_ribbon h3 { border: 0; text-shadow: none; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .obi_ribbon h3:before, [class^="haik-palette-"] .obi_ribbon h3:after { content: ''; display: none; } [class^="haik-palette-"] .obi_ribbon h4 { border: 0; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .obi_ribbon h4:before, [class^="haik-palette-"] .obi_ribbon h4:after { content: ''; display: none; } [class^="haik-palette-"] .obi_ribbon p { color: #fff; } border-left-right-panel /* 帯リボン内でアコーディオンパネルを出す場合に備える が対応しきれない可能性が高い */ [class^="haik-palette-"] .obi_ribbon .bright p, [class^="haik-palette-"] .obi_ribbon .transparent p, [class^="haik-palette-"] .obi_ribbon .border p, [class^="haik-palette-"] .obi_ribbon .no-border-panel p, [class^="haik-palette-"] .obi_ribbon .border-left-right-panel p, [class^="haik-palette-"] .obi_ribbon .border-top-bottom-panel p{ color: #333; } /* 見出し飾り左折れリボンの色を指定する 上　枠本体背景色 下　左折れリボン部分影色 2019/10/18 見出し飾り左折れリボン　赤、紺を追加 2019/10/19 見出し飾り左折れリボン　青、シアン、緑、黄緑、紫、黒、オレンジ、茶色、金色、銀色を追加 2019/10/19 見出し飾り左折れリボン　boostrapのパネル色、深緑色を追加 2020/07/21 見出し飾り左折れリボン　boostrap4の新しい色名、を追加 boostrap4のパネル色 .obi_ribbon.black【別名】,.waku_ribbon.dark { .obi_ribbon.white,【別名】.waku_ribbon.light { .obi_ribbon.secondary【別名】,.waku_ribbon.default,.waku_ribbon.gray { を追加 2020/07/30 .obi_ribbon.whiteの見出し文字色、カンマ忘れ 2020/09/18 .obi_ribbonクラスのboostrap系統の色の修正 waku_ribbonクラスの色と大きく違うこと、ラベルなどの調整が進んできたので併せて調整する */ /* default */ .obi_ribbon.default, .obi_ribbon.secondary { background: #888; } .obi_ribbon.hidariore.default::before, .obi_ribbon.hidariore.secondary::before { border-right: solid 2em #716b6b; } .obi_ribbon.migiore.default::after, .obi_ribbon.migiore.secondary::after { border-left: solid 2em #716b6b; } .obi_ribbon.bottom_hukidashi.default::before, .obi_ribbon.bottom_hukidashi.secondary::before { border-top-color: #888; } .obi_ribbon.top_hukidashi.default::before, .obi_ribbon.top_hukidashi.secondary::before { border-bottom-color: #888; } /* info */ .obi_ribbon.info { background: #36a2af; } .obi_ribbon.hidariore.info::before { border-right: solid 2em #288e9a; } .obi_ribbon.migiore.info::after { border-left: solid 2em #288e9a; } .obi_ribbon.bottom_hukidashi.info::before { border-top-color: #36a2af; } .obi_ribbon.top_hukidashi.info::before { border-bottom-color: #36a2af; } /* danger */ .obi_ribbon.danger { background: #db6868; } .obi_ribbon.hidariore.danger::before { border-right: solid 2em #bd5f5f; } .obi_ribbon.migiore.danger::after { border-left: solid 2em #bd5f5f; } .obi_ribbon.bottom_hukidashi.danger::before { border-top-color: #db6868; } .obi_ribbon.top_hukidashi.danger::before { border-bottom-color: #db6868; } /* primary */ .obi_ribbon.primary { background: #337ab7; } .obi_ribbon.hidariore.primary::before { border-right: solid 2em #24649c; } .obi_ribbon.migiore.primary::after { border-left: solid 2em #24649c; } .obi_ribbon.bottom_hukidashi.primary::before { border-top-color: #337ab7; } .obi_ribbon.top_hukidashi.primary::before { border-bottom-color: #337ab7; } /* success */ .obi_ribbon.success { background: #409668; } .obi_ribbon.hidariore.success::before { border-right: solid 2em #498a68; } .obi_ribbon.migiore.success::after { border-left: solid 2em #498a68; } .obi_ribbon.bottom_hukidashi.success::before { border-top-color: #409668; } .obi_ribbon.top_hukidashi.success::before { border-bottom-color: #409668; } /* warning */ .obi_ribbon.warning { background: #ffc818; } .obi_ribbon.hidariore.warning::before { border-right: solid 2em #e0af13; } .obi_ribbon.migiore.warning::after { border-left: solid 2em #e0af13; } .obi_ribbon.bottom_hukidashi.warning::before { border-top-color: #ffc818; } .obi_ribbon.top_hukidashi.warning::before { border-bottom-color: #ffc818; } [class^="haik-palette-"] .obi_ribbon.warning h2, [class^="haik-palette-"] .obi_ribbon.warning h3, [class^="haik-palette-"] .obi_ribbon.warning h4, [class^="haik-palette-"] .obi_ribbon.warning p { color: #111; text-shadow: none; } /* light 白系統 */ .obi_ribbon.light { background: #fafafa; } .obi_ribbon.hidariore.light::before { border-right: solid 2em #e0dfdf; } .obi_ribbon.migiore.light::after { border-left: solid 2em #e0dfdf; } .obi_ribbon.bottom_hukidashi.light::before { border-top-color: #fafafa; } .obi_ribbon.top_hukidashi.light::before { border-bottom-color: #fafafa; } [class^="haik-palette-"] .obi_ribbon.light h2, [class^="haik-palette-"] .obi_ribbon.light h3, [class^="haik-palette-"] .obi_ribbon.light h4, [class^="haik-palette-"] .obi_ribbon.light p { color: #333; } /* dark */ .obi_ribbon.dark { background: #3a3a3a; } .obi_ribbon.hidariore.dark::before { border-right: solid 2em #828282; } .obi_ribbon.migiore.dark::after { border-left: solid 2em #828282; } .obi_ribbon.bottom_hukidashi.dark::before { border-top-color: #3a3a3a; } .obi_ribbon.top_hukidashi.dark::before { border-bottom-color: #3a3a3a; } /* 赤 */ .obi_ribbon.red { background: #db4441; } .obi_ribbon.hidariore.red::before { border-right: solid 2em #bd3331; } .obi_ribbon.migiore.red::after { border-left: solid 2em #bd3331; } .obi_ribbon.bottom_hukidashi.red::before { border-top-color: #db4441; } .obi_ribbon.top_hukidashi.red::before { border-bottom-color: #db4441; } /* 青 */ .obi_ribbon.blue { background: #0769f1; } .obi_ribbon.hidariore.blue::before { border-right: solid 2em #003f96; } .obi_ribbon.migiore.blue::after { border-left: solid 2em #003f96; } .obi_ribbon.bottom_hukidashi.blue::before { border-top-color: #0769f1; } .obi_ribbon.top_hukidashi.blue::before { border-bottom-color: #0769f1; } /* シアン cyan*/ .obi_ribbon.cyan { background: #40d2d2; } .obi_ribbon.hidariore.cyan::before { border-right: solid 2em #2d9c9c; } .obi_ribbon.migiore.cyan::after { border-left: solid 2em #2d9c9c; } .obi_ribbon.bottom_hukidashi.cyan::before { border-top-color: #40d2d2; } .obi_ribbon.top_hukidashi.cyan::before { border-bottom-color: #40d2d2; } [class^="haik-palette-"] .obi_ribbon.cyan h2, [class^="haik-palette-"] .obi_ribbon.cyan h3, [class^="haik-palette-"] .obi_ribbon.cyan h4, [class^="haik-palette-"] .obi_ribbon.cyan p { color: #0e3a3a; } /* 紺 */ .obi_ribbon.navy { background: #2929a2; } .obi_ribbon.hidariore.navy::before { border-right: solid 2em #09096e; } .obi_ribbon.migiore.navy::after { border-left: solid 2em #09096e; } .obi_ribbon.bottom_hukidashi.navy::before { border-top-color: #2929a2; } .obi_ribbon.top_hukidashi.navy::before { border-bottom-color: #2929a2; } /* skyblue */ .obi_ribbon.skyblue { background: skyblue; } .obi_ribbon.hidariore.skyblue::before { border-right: solid 2em #6db0cc; } .obi_ribbon.migiore.skyblue::after { border-left: solid 2em #6db0cc; } .obi_ribbon.bottom_hukidashi.skyblue::before { border-top-color: skyblue; } .obi_ribbon.top_hukidashi.skyblue::before { border-bottom-color: skyblue; } [class^="haik-palette-"] .obi_ribbon.skyblue h2, [class^="haik-palette-"] .obi_ribbon.skyblue h3, [class^="haik-palette-"] .obi_ribbon.skyblue h4, [class^="haik-palette-"] .obi_ribbon.skyblue p { color: #234756; } /* 緑 */ .obi_ribbon.green { background: green; } .obi_ribbon.hidariore.green::before { border-right: solid 2em #015801; } .obi_ribbon.migiore.green::after { border-left: solid 2em #015801; } .obi_ribbon.bottom_hukidashi.green::before { border-top-color: green; } .obi_ribbon.top_hukidashi.green::before { border-bottom-color: green; } /* 黄緑 lightgreen */ .obi_ribbon.lightgreen { background: #74cc52; } .obi_ribbon.hidariore.lightgreen::before { border-right: solid 2em #51a531; } .obi_ribbon.migiore.lightgreen::after { border-left: solid 2em #51a531; } .obi_ribbon.bottom_hukidashi.lightgreen::before { border-top-color: #74cc52; } .obi_ribbon.top_hukidashi.lightgreen::before { border-bottom-color: #74cc52; } [class^="haik-palette-"] .obi_ribbon.lightgreen h2, [class^="haik-palette-"] .obi_ribbon.lightgreen h3, [class^="haik-palette-"] .obi_ribbon.lightgreen h4, [class^="haik-palette-"] .obi_ribbon.lightgreen p { color: #244617; } /* 深緑色 teal*/ .obi_ribbon.teal { background: teal; } .obi_ribbon.hidariore.teal::before { border-right: solid 2em #005656; } .obi_ribbon.migiore.teal::after { border-left: solid 2em #005656; } .obi_ribbon.bottom_hukidashi.teal::before { border-top-color: teal; } .obi_ribbon.top_hukidashi.teal::before { border-bottom-color: teal; } /* 紫 purple */ .obi_ribbon.purple { background: #983c98; } .obi_ribbon.hidariore.purple::before { border-right: solid 2em #942894; } .obi_ribbon.migiore.purple::after { border-left: solid 2em #942894; } .obi_ribbon.bottom_hukidashi.purple::before { border-top-color: #983c98; } .obi_ribbon.top_hukidashi.purple::before { border-bottom-color: #983c98; } /* 黒 */ .obi_ribbon.black { background: #1b1e21; } .obi_ribbon.hidariore.black::before { border-right: solid 2em #999; } .obi_ribbon.migiore.black::after, .obi_ribbon.migiore.dark::after { border-left: solid 2em #999; } .obi_ribbon.bottom_hukidashi.black::before { border-top-color: #1b1e21; } .obi_ribbon.top_hukidashi.black::before { border-bottom-color: #1b1e21; } [class^="haik-palette-"] .obi_ribbon.black h2, [class^="haik-palette-"] .obi_ribbon.black h3, [class^="haik-palette-"] .obi_ribbon.black h4, [class^="haik-palette-"] .obi_ribbon.black p { color: #e3e9ef; } /* オレンジ orange */ .obi_ribbon.orange { background: #f9b333; } .obi_ribbon.hidariore.orange::before { border-right: solid 2em #e2960a; } .obi_ribbon.migiore.orange::after { border-left: solid 2em #e2960a; } .obi_ribbon.bottom_hukidashi.orange::before { border-top-color: #f9b333; } .obi_ribbon.top_hukidashi.orange::before { border-bottom-color: #f9b333; } [class^="haik-palette-"] .obi_ribbon.orange h2, [class^="haik-palette-"] .obi_ribbon.orange h3, [class^="haik-palette-"] .obi_ribbon.orange h4, [class^="haik-palette-"] .obi_ribbon.orange p { color: #4e380e; } /* 茶色 brown */ .obi_ribbon.brown { background: #80644e; } .obi_ribbon.hidariore.brown::before { border-right: solid 2em #5f4938; } .obi_ribbon.migiore.brown::after { border-left: solid 2em #5f4938; } .obi_ribbon.bottom_hukidashi.brown::before { border-top-color: #80644e; } .obi_ribbon.top_hukidashi.brown::before { border-bottom-color: #80644e; } /* 金色 gold */ .obi_ribbon.gold { background: gold; } .obi_ribbon.hidariore.gold::before { border-right: solid 2em #eba65b; } .obi_ribbon.migiore.gold::after { border-left: solid 2em #eba65b; } .obi_ribbon.bottom_hukidashi.gold::before { border-top-color: gold; } .obi_ribbon.top_hukidashi.gold::before { border-bottom-color: gold; } [class^="haik-palette-"] .obi_ribbon.gold h2, [class^="haik-palette-"] .obi_ribbon.gold h3, [class^="haik-palette-"] .obi_ribbon.gold h4, [class^="haik-palette-"] .obi_ribbon.gold p { color: #524914; } /* 銀色 silver */ .obi_ribbon.silver { background: silver; } .obi_ribbon.hidariore.silver::before { border-right: solid 2em #999; } .obi_ribbon.migiore.silver::after { border-left: solid 2em #999; } .obi_ribbon.bottom_hukidashi.silver::before { border-top-color: silver; } .obi_ribbon.top_hukidashi.silver::before { border-bottom-color: silver; } [class^="haik-palette-"] .obi_ribbon.silver h2, [class^="haik-palette-"] .obi_ribbon.silver h3, [class^="haik-palette-"] .obi_ribbon.silver h4, [class^="haik-palette-"] .obi_ribbon.silver p { color: #4e4444; } /* 桃色 pink */ .obi_ribbon.pink { background: pink; } .obi_ribbon.hidariore.pink::before { border-right: solid 2em #e6a6b1; } .obi_ribbon.migiore.pink::after { border-left: solid 2em #e6a6b1; } .obi_ribbon.bottom_hukidashi.pink::before { border-top-color: pink; } .obi_ribbon.top_hukidashi.pink::before { border-bottom-color: pink; } [class^="haik-palette-"] .obi_ribbon.pink h2, [class^="haik-palette-"] .obi_ribbon.pink h3, [class^="haik-palette-"] .obi_ribbon.pink h4, [class^="haik-palette-"] .obi_ribbon.pink p { color: #522a2a; } /* 黄色 yellow */ .obi_ribbon.yellow { background: #FFF200; color: #333; } .obi_ribbon.hidariore.yellow::before { border-right: solid 2em #f0e300; } .obi_ribbon.migiore.yellow::after { border-left: solid 2em #f0e300; } .obi_ribbon.bottom_hukidashi.yellow::before { border-top-color: #FFF200; } .obi_ribbon.top_hukidashi.yellow::before { border-bottom-color: #FFF200; } [class^="haik-palette-"] .obi_ribbon.yellow h2, [class^="haik-palette-"] .obi_ribbon.yellow h3, [class^="haik-palette-"] .obi_ribbon.yellow h4, [class^="haik-palette-"] .obi_ribbon.yellow p { color: #333; } /* 白色 white */ .obi_ribbon.white { background: white; } .obi_ribbon.hidariore.white::before { border-right: solid 2em #e0e0e0; } .obi_ribbon.migiore.white::after { border-left: solid 2em #e0e0e0; } .obi_ribbon.bottom_hukidashi.white::before { border-top-color: white; } .obi_ribbon.top_hukidashi.white::before { border-bottom-color: white; } [class^="haik-palette-"] .obi_ribbon.white h2, [class^="haik-palette-"] .obi_ribbon.white h3, [class^="haik-palette-"] .obi_ribbon.white h4, [class^="haik-palette-"] .obi_ribbon.white p { color: #333; } /*==== 2019/10/30 見出し装飾にobi_ribbonクラスを枠線で表示するwaku_ribbonクラスを作成 obi_ribbonを発展させてpanelの代替としても使えるように設計。 obi_ribbonと違うのは線枠が基本であることで枠線の分だけ、若干大きい waku_ribbon枠内見出し、段落が対象 見出し1～3を書くだけで既に設定された属性をクリアできる便利な機能もある 飾り枠を外すtext_h1h2h3_clearクラスを入れ子で使った場合と同じ効果がある デフォルトはスカイブルー 【使い方】通常の帯リボン #bs_box(class=waku_ribbon){{ *見出し1 }} #bs_box(class=waku_ribbon){{ **見出し2 }} #bs_box(class=waku_ribbon){{ ***見出し3 }} 見出し1，2，3で先に疑似要素で吹き出しの三角形など装飾していた場合はクリアされます。 【使い方】角を角張らせる #bs_box(class=waku_ribbon kaku){{ 本文 }} 【使い方】角を丸くする #bs_box(class=waku_ribbon maru){{ 本文 }} 【使い方】左折れリボン #bs_box(class=waku_ribbon hidariore){{ *見出し1 }} #bs_box(class=waku_ribbon hidariore){{ **見出し2 }} #bs_box(class=waku_ribbon hidariore){{ ***見出し3 }} 【使い方】右折れリボン #bs_box(class=waku_ribbon migiore){{ *見出し1 }} #bs_box(class=waku_ribbon migiore){{ **見出し2 }} #bs_box(class=waku_ribbon migiore){{ ***見出し3 }} 【使い方】左右に折れリボンがつく #bs_box(class=waku_ribbon hidariore migiore){{ *見出し1 }} #bs_box(class=waku_ribbon hidariore migiore){{ **見出し2 }} #bs_box(class=waku_ribbon hidariore migiore){{ ***見出し3 }} 【使い方】下向き吹き出しがつく #bs_box(class=waku_ribbon bottom_hukidasi){{ *見出し1 }} #bs_box(class=waku_ribbon bottom_hukidasi){{ **見出し2 }} #bs_box(class=waku_ribbon bottom_hukidasi){{ ***見出し3 }} 【通常帯リボンの色を指定する】 #bs_box(class=waku_ribbon 色名){{～}} 例 #bs_box(class=waku_ribbon default){{～}} #bs_box(class=waku_ribbon red){{～}} 【左折れリボンの色を指定する】 #bs_box(class=waku_ribbon hidariore 色名){{～}} 例 #bs_box(class=waku_ribbon hidariore default){{～}} #bs_box(class=waku_ribbon hidariore red){{～}} 【右折れリボンの色を指定する】 #bs_box(class=waku_ribbon migiore 色名){{～}} 例 #bs_box(class=waku_ribbon migiore default){{～}} #bs_box(class=waku_ribbon migiore red){{～}} 【使える色一覧】（2019/10/30　22色） ※色は原色名そのままではなく、見やすくなるように調整しています waku_ribbon default(default,secondaryは兼用) waku_ribbon secondary(default,secondaryは兼用) waku_ribbon info waku_ribbon danger waku_ribbon primary waku_ribbon success waku_ribbon warning waku_ribbon light waku_ribbon dark waku_ribbon red waku_ribbon pink waku_ribbon blue waku_ribbon cyan waku_ribbon navy waku_ribbon skyblue waku_ribbon green waku_ribbon lightgreen waku_ribbon teal waku_ribbon purple waku_ribbon black　(darkと別色) waku_ribbon white　(lightと別色) waku_ribbon orange waku_ribbon brown waku_ribbon gold waku_ribbon silver waku_ribbon yellow 2019/10/29 waku_ribbonとして新規作成。 2019/10/30 吹き出しの位置でipadではずれが出るので調整 2019/12/04 白を追加 waku_ribbon white 主に背景に色がある場合に使う色。 2020/08/19 .waku_ribbonの下マージンと左右幅の修正 2020/08/19 .waku_ribbonのマージン、排他領域を調整 2020/08/19 .waku_ribbonに左右が丸いmaruクラスを追加 リボンなどの調整開始 2020/08/21 .obi_ribbon、.waku_ribboの色を調整 コントラスト差が強すぎて見づらい色の彩度を下げるなど修正 各色の細かい調整はカスタマイズ対応のみ light white black dark 同じ色にしていたのを別系党にした理由は別々にした方がカスタマイズに対応しやすいため。 とくに白と黒を別系党にする案件は多くなりそうなため grayは同じ色名が2つあるので廃止。 ====*/ .waku_ribbon { display: block; position: relative; padding: 0; margin: 1em auto; margin-bottom: 2.5em !important; width: 95%; color: inherit; background: white; border: solid 4px #70c7ff; border-radius: 6px; } @media (min-width: 768px) { .waku_ribbon { border: 4px solid #70c7ff; } } @media (min-width: 992px) { .waku_ribbon { border: 5px solid #70c7ff; } } /* 角の丸めを角ばらせる */ .waku_ribbon.kaku { border-radius: 0; } /* 角の丸めを大きく丸くする 左右排他領域を増やして 文字位置を調整 */ .waku_ribbon.maru { border-radius: 50px; padding: 0em 1em; } .waku_ribbon.hidariore::before { position: absolute; content: ''; top: calc(100% + 3px); left: 2px; border: none; border-bottom: solid 1em transparent; border-right: solid 2em #6eb3e0; } @media (min-width: 768px) { .waku_ribbon.hidariore::before { top: calc(100% + 3px); left: -2px; } } @media (min-width: 992px) { .waku_ribbon.hidariore::before { top: calc(100% + 4px); left: -3px; } } /* 角張らせている場合のリボン位置調整 枠線の太さに合わせる */ .waku_ribbon.kaku.hidariore::before { left: -3px; } @media (min-width: 768px) { .waku_ribbon.kaku.hidariore::before { left: -4px; } } @media (min-width: 992px) { .waku_ribbon.kaku.hidariore::before { left: -5px; } } /* 角を丸くしている場合のリボン位置調整 */ .waku_ribbon.maru.hidariore:before { left: 33px; } .waku_ribbon.migiore::after { position: absolute; content: ''; top: calc(100% + 3px); right: 2px; border: none; border-bottom: solid 1em transparent; border-left: solid 2em #6eb3e0; } @media (min-width: 768px) { .waku_ribbon.migiore::after { top: calc(100% + 3px); right: -2px; } } @media (min-width: 992px) { .waku_ribbon.migiore::after { top: calc(100% + 4px); right: -3px; } } /* 角張らせている場合のリボン位置調整 枠線の太さに合わせる */ .waku_ribbon.kaku.migiore::after { right: -3px; } @media (min-width: 768px) { .waku_ribbon.kaku.migiore::after { right: -4px; } } @media (min-width: 992px) { .waku_ribbon.kaku.migiore::after { right: -5px; } } /* 角を丸くしている場合のリボン位置調整 */ .waku_ribbon.maru.migiore:after { right: 33px; } /* 2019/10/23 見出し装飾：下向き吹き出し 疑似要素で下向き三角形をつけた。 色のデフォルトは水色系統。 色毎にborder-top-colorを設定する 三角形の左からの位置をem単位なのは％単位だとずれが発生するため */ .waku_ribbon.bottom_hukidashi::before { content: ""; position: absolute; display: block; width: 0; height: 0; top: calc(100% + 3px); left: 2em; border-top: solid 1em #70c7ff; border-right: solid 1em transparent; border-left: solid 1em transparent; } @media (min-width: 768px) { .waku_ribbon.bottom_hukidashi::before { top: calc(100% + 4px); } } @media (min-width: 992px) { .waku_ribbon.bottom_hukidashi::before { top: calc(100% + 5px); } } /* 塗りつぶした三角形に白の三角形を重ねる形で枠線形状を実現している */ .waku_ribbon.bottom_hukidashi::after { position: absolute; display: block; content: ""; top: 100%; top: calc(100% - 1px); left: 2.05em; border-top: solid 0.95em white; border-right: solid 0.95em transparent; border-left: solid 0.95em transparent; } @media (min-width: 768px) { .waku_ribbon.bottom_hukidashi::after { left: 2.05em; top: calc(100% - 1px); border-top: solid 0.95em white; border-right: solid 0.95em transparent; border-left: solid 0.95em transparent; } } @media (min-width: 992px) { .waku_ribbon.bottom_hukidashi::after { left: 2em; top: calc(100% - 1px); border-top: solid 1em white; border-right: solid 1em transparent; border-left: solid 1em transparent; } } /* 2019/10/23 作成中 見出し装飾：上向き吹き出し 疑似要素で上向き三角形をつけた。 色のデフォルトは水色系統。 色毎にborder-bottom-colorを設定する 三角形の左からの位置をem単位なのは％単位だとずれが発生するため */ .waku_ribbon.top_hukidashi::before { content: ""; position: absolute; display: block; width: 0; height: 0; top: calc(-1em - 0px); left: 2em; border-bottom: solid 1em #70c7ff; border-right: solid 1em transparent; border-left: solid 1em transparent; } /* 塗りつぶした三角形に白の三角形を重ねる形で枠線形状を実現している */ .waku_ribbon.top_hukidashi::after { content: ""; position: absolute; display: block; width: 0; height: 0; bottom: calc(100% - 1px); left: 2.25em; border-bottom: solid 0.8em white; border-right: solid 0.75em transparent; border-left: solid 0.75em transparent; } @media (min-width: 768px) { .waku_ribbon.top_hukidashi::after { border-bottom: solid 0.75em white; border-right: solid 0.75em transparent; border-left: solid 0.75em transparent; } } @media (min-width: 992px) { .waku_ribbon.top_hukidashi::after { border-bottom: solid 0.7em white; border-right: solid 0.75em transparent; border-left: solid 0.75em transparent; } } /* 2019/10/05改修 .qhm-bs-boxのみ有効なクラス .waku_ribbon枠内見出し、段落が対象 見出しを書くだけで既に設定された属性をクリアできる便利な機能 飾り枠を外すtext_h1h2h3_clearクラスを入れ子で使った場合と同じ効果がある 2019/12/08 見出し1，2，3の基本装飾クリア部分を統合 */ /*見出し1，2，3の基本装飾クリア部分は同じ*/ [class^="haik-palette-"] .waku_ribbon h2, [class^="haik-palette-"] .waku_ribbon h3, [class^="haik-palette-"] .waku_ribbon h4 { color: inherit; text-shadow: none; margin: 0em 10px 0em 10px; border: none; background: none; border-left: none; box-shadow: none; } /* 吹き出しの三角形などの装飾をクリア */ [class^="haik-palette-"] .waku_ribbon h2:after, [class^="haik-palette-"] .waku_ribbon h2:before, [class^="haik-palette-"] .waku_ribbon h3:after, [class^="haik-palette-"] .waku_ribbon h3:before, [class^="haik-palette-"] .waku_ribbon h4:after, [class^="haik-palette-"] .waku_ribbon h4:before { content: ''; display: none; } /* 見出し飾り左折れリボンの色を指定する 上　枠本体背景色 下　左折れリボン部分影色 2019/10/18 見出し飾り左折れリボン　赤、紺を追加 2019/10/19 見出し飾り左折れリボン　青、シアン、緑、黄緑、紫、黒、オレンジ、茶色、金色、銀色を追加 2019/10/19 見出し飾り左折れリボン　boostrapのパネル色、深緑色を追加 2020/07/21 見出し飾り左折れリボン　boostrap4のパネル色 .waku_ribbon.black【別名】,.waku_ribbon.dark { .waku_ribbon.white,【別名】.waku_ribbon.light { .waku_ribbon.secondary【別名】,.waku_ribbon.default,.waku_ribbon.gray { を追加 2020/09/18 .waku_ribbonクラスの色を修正 バラバラになっていたのを統一、リボン枠が見やすいようにリボンの色を変更 */ /* default */ .waku_ribbon.secondary, .waku_ribbon.default { border-color: #7d7b7b; } .waku_ribbon.hidariore.secondary::before, .waku_ribbon.hidariore.default::before { border-right: solid 2em #716b6b; } .waku_ribbon.migiore.secondary:after, .waku_ribbon.migiore.default::after { border-left: solid 2em #716b6b; } .waku_ribbon.bottom_hukidashi.secondary::before, .waku_ribbon.bottom_hukidashi.default::before { border-top-color: #7d7b7b; } .waku_ribbon.top_hukidashi.secondary::before, .waku_ribbon.top_hukidashi.default::before { border-bottom-color: #7d7b7b; } /* info */ .waku_ribbon.info { border-color: #5FAAB3; } .waku_ribbon.hidariore.info::before { border-right: solid 2em #5FAAB3; } .waku_ribbon.migiore.info::after { border-left: solid 2em #5FAAB3; } .waku_ribbon.bottom_hukidashi.info::before { border-top-color: #5FAAB3; } .waku_ribbon.top_hukidashi.info::before { border-bottom-color: #5FAAB3; } /* danger */ .waku_ribbon.danger { border-color: #D96E6E; } .waku_ribbon.hidariore.danger::before { border-right: solid 2em #D96E6E; } .waku_ribbon.migiore.danger::after { border-left: solid 2em #D96E6E; } .waku_ribbon.bottom_hukidashi.danger::before { border-top-color: #D96E6E; } .waku_ribbon.top_hukidashi.danger::before { border-bottom-color: #D96E6E; } /* primary */ .waku_ribbon.primary { border-color: #337ab7; } .waku_ribbon.hidariore.primary::before { border-right: solid 2em #337ab7; } .waku_ribbon.migiore.primary::after { border-left: solid 2em #337ab7; } .waku_ribbon.bottom_hukidashi.primary::before { border-top-color: #337ab7; } .waku_ribbon.top_hukidashi.primary::before { border-bottom-color: #337ab7; } /* success */ .waku_ribbon.success { border-color: #5BAF83; } .waku_ribbon.hidariore.success::before { border-right: solid 2em #5BAF83; } .waku_ribbon.migiore.success::after { border-left: solid 2em #5BAF83; } .waku_ribbon.bottom_hukidashi.success::before { border-top-color: #5BAF83; } .waku_ribbon.top_hukidashi.success::before { border-bottom-color: #5BAF83; } /* warning */ .waku_ribbon.warning { border-color: #FFD900; } .waku_ribbon.hidariore.warning::before { border-right: solid 2em #FFD900; } .waku_ribbon.migiore.warning::after { border-left: solid 2em #FFD900; } .waku_ribbon.bottom_hukidashi.warning::before { border-top-color: #FFD900; } .waku_ribbon.top_hukidashi.warning::before { border-bottom-color: #FFD900; } /* light 白とは別系統の色 */ .waku_ribbon.light { border-color: #f5f5f5; } .waku_ribbon.hidariore.light::before { border-right: solid 2em #f5f5f5; } .waku_ribbon.migiore.light::after { border-left: solid 2em #f5f5f5; } .waku_ribbon.bottom_hukidashi.light::before { border-top-color: #f5f5f5; } .waku_ribbon.top_hukidashi.light::before { border-bottom-color: #f5f5f5; } /* dark */ .waku_ribbon.dark { background: #5a5a5a; } .waku_ribbon.hidariore.dark::before { border-right: solid 2em #5a5a5a; } .waku_ribbon.migiore.dark::after { border-left: solid 2em #5a5a5a; } .waku_ribbon.bottom_hukidashi.dark::before { border-top-color: #5a5a5a; } .waku_ribbon.top_hukidashi.dark::before { border-bottom-color: #5a5a5a; } /* 赤 */ .waku_ribbon.red { border-color: #db4441; } .waku_ribbon.hidariore.red::before { border-right: solid 2em #db4441; } .waku_ribbon.migiore.red::after { border-left: solid 2em #db4441; } .waku_ribbon.bottom_hukidashi.red::before { border-top-color: #db4441; } .waku_ribbon.top_hukidashi.red::before { border-bottom-color: #db4441; } /* 青 */ .waku_ribbon.blue { border-color: #0769f1; } .waku_ribbon.hidariore.blue::before { border-right: solid 2em #0769f1; } .waku_ribbon.migiore.blue::after { border-left: solid 2em #0769f1; } .waku_ribbon.bottom_hukidashi.blue::before { border-top-color: #0769f1; } .waku_ribbon.top_hukidashi.blue::before { border-bottom-color: #0769f1; } /* シアン cyan*/ .waku_ribbon.cyan { border-color: #40d2d2; } .waku_ribbon.hidariore.cyan::before { border-right: solid 2em #40d2d2; } .waku_ribbon.migiore.cyan::after { border-left: solid 2em #40d2d2; } .waku_ribbon.bottom_hukidashi.cyan::before { border-top-color: #40d2d2; } .waku_ribbon.top_hukidashi.cyan::before { border-bottom-color: #40d2d2; } /* 紺 */ .waku_ribbon.navy { border-color: #2929a2; } .waku_ribbon.hidariore.navy::before { border-right: solid 2em #2929a2; } .waku_ribbon.migiore.navy::after { border-left: solid 2em #2929a2; } .waku_ribbon.bottom_hukidashi.navy::before { border-top-color: #2929a2; } .waku_ribbon.top_hukidashi.navy::before { border-bottom-color: #2929a2; } /* 空色 */ .waku_ribbon.skyblue { border-color: skyblue; } .waku_ribbon.hidariore.skyblue::before { border-right: solid 2em skyblue; } .waku_ribbon.migiore.skyblue::after { border-left: solid 2em skyblue; } .waku_ribbon.bottom_hukidashi.skyblue::before { border-top-color: skyblue; } .waku_ribbon.top_hukidashi.skyblue::before { border-bottom-color: skyblue; } /* 緑 */ .waku_ribbon.green { border-color: green; } .waku_ribbon.hidariore.green::before { border-right: solid 2em green; } .waku_ribbon.migiore.green::after { border-left: solid 2em green; } .waku_ribbon.bottom_hukidashi.green::before { border-top-color: green; } .waku_ribbon.top_hukidashi.green::before { border-bottom-color: green; } /* 黄緑 lightgreen */ .waku_ribbon.lightgreen { border-color: #74cc52; } .waku_ribbon.hidariore.lightgreen::before { border-right: solid 2em #74cc52; } .waku_ribbon.migiore.lightgreen::after { border-left: solid 2em #74cc52; } .waku_ribbon.bottom_hukidashi.lightgreen::before { border-top-color: #74cc52; } .waku_ribbon.top_hukidashi.lightgreen::before { border-bottom-color: #74cc52; } /* 深緑色 teal*/ .waku_ribbon.teal { border-color: teal; } .waku_ribbon.hidariore.teal::before { border-right: solid 2em teal; } .waku_ribbon.migiore.teal::after { border-left: solid 2em teal; } .waku_ribbon.bottom_hukidashi.teal::before { border-top-color: teal; } .waku_ribbon.top_hukidashi.teal::before { border-bottom-color: teal; } /* 紫 purple */ .waku_ribbon.purple { border-color: #983c98; } .waku_ribbon.hidariore.purple::before { border-right: solid 2em #983c98; } .waku_ribbon.migiore.purple::after { border-left: solid 2em #983c98; } .waku_ribbon.bottom_hukidashi.purple::before { border-top-color: #983c98; } .waku_ribbon.top_hukidashi.purple::before { border-bottom-color: #983c98; } /* 黒 */ .waku_ribbon.black { border-color: #1b1e21; } .waku_ribbon.hidariore.black::before { border-right: solid 2em #1b1e21; } .waku_ribbon.migiore.black::after { border-left: solid 2em #1b1e21; } .waku_ribbon.bottom_hukidashi.black::before { border-top-color: #1b1e21; } .waku_ribbon.top_hukidashi.black::before { border-bottom-color: #1b1e21; } /* 白 */ .waku_ribbon.white { border-color: white; } .waku_ribbon.hidariore.white::before { border-right: solid 2em #e0e0e0; } .waku_ribbon.migiore.white::after { border-left: solid 2em #e0e0e0; } .waku_ribbon.bottom_hukidashi.white::before { border-top-color: white; } .waku_ribbon.top_hukidashi.white::before { border-bottom-color: white; } /* オレンジ orange */ .waku_ribbon.orange { border-color: #f9b333; } .waku_ribbon.hidariore.orange::before { border-right: solid 2em #f9b333; } .waku_ribbon.migiore.orange::after { border-left: solid 2em #f9b333; } .waku_ribbon.bottom_hukidashi.orange::before { border-top-color: #f9b333; } .waku_ribbon.top_hukidashi.orange::before { border-bottom-color: #f9b333; } /* 茶色 brown */ .waku_ribbon.brown { border-color: #80644e; } .waku_ribbon.hidariore.brown::before { border-right: solid 2em #80644e; } .waku_ribbon.migiore.brown::after { border-left: solid 2em #80644e; } .waku_ribbon.bottom_hukidashi.brown::before { border-top-color: #80644e; } .waku_ribbon.top_hukidashi.brown::before { border-bottom-color: #80644e; } /* 金色 gold */ .waku_ribbon.gold { border-color: gold; } .waku_ribbon.hidariore.gold::before { border-right: solid 2em gold; } .waku_ribbon.migiore.gold::after { border-left: solid 2em gold; } .waku_ribbon.bottom_hukidashi.gold::before { border-top-color: gold; } .waku_ribbon.top_hukidashi.gold::before { border-bottom-color: gold; } /* 銀色 silver */ .waku_ribbon.silver { border-color: silver; } .waku_ribbon.hidariore.silver::before { border-right: solid 2em silver; } .waku_ribbon.migiore.silver::after { border-left: solid 2em silver; } .waku_ribbon.bottom_hukidashi.silver::before { border-top-color: silver; } .waku_ribbon.top_hukidashi.silver::before { border-bottom-color: silver; } /* 桃色 pink */ .waku_ribbon.pink { border-color: pink; } .waku_ribbon.hidariore.pink::before { border-right: solid 2em pink; } .waku_ribbon.migiore.pink::after { border-left: solid 2em pink; } .waku_ribbon.bottom_hukidashi.pink::before { border-top-color: pink; } .waku_ribbon.top_hukidashi.pink::before { border-bottom-color: pink; } /* 黄色 yellow 彩度を下げる　Y90 */ .waku_ribbon.yellow { border-color: #FFF200; } .waku_ribbon.hidariore.yellow::before { border-right: solid 2em #FFF200; } .waku_ribbon.migiore.yellow::after { border-left: solid 2em #FFF200; } .waku_ribbon.bottom_hukidashi.yellow::before { border-top-color: #FFF200; } .waku_ribbon.top_hukidashi.yellow::before { border-bottom-color: #FFF200; }