/*================================== * * 2022/07/26　修正中　iphone調整 * 2022/07/23　修正中A　iphone調整 * 2022/07/22　修正中A　iphone調整 * 2022/07/21　修正中A　iphone調整 * 2021/11/04　修正中A * 2021/10/26　修正中A * 2021/10/18　修正中A * 2021/10/17　修正中B * 2021/10/17　修正中A * 2021/09/20　修正中A * 2021/09/17　修正中A * 2021/09/07　iphone8対応試作A 　(スタイルシート改修試験中) * 2021/09/06　iphone8対応試作B　(スタイルシート改修試験中) * 2021/09/05　iphone8対応試作A　(スタイルシート改修試験中) * 2021/09/04　iphone8対応試作B　(アイキャッチ見出し縁取り試験中) * 2021/09/01　iphone8対応試作　 * 2021/08/31　iphone8対応試作　 * 2021/07/20　 * nagamira_css1h.css 高速化互換性なし版 * * 基本デザイン改修スタイルシート * アリガトウラス号デザインの基礎となるスタイルシート * 著作権 長岡京健康みらい研究所 * 【重要】このスタイルシートを先に読み込むこと * 画面デザイン、文字の大きさの改修などが主 * アイキャッチの書体変更 * テーブルの基本的な装飾 * 2021/07/01 * W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認 * 2021/07/05 【注意 圧縮ツール】 https://csscompressor.net/ja/ で「Compress colors」をオフにして圧縮すること。 コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * 【検討中】 2020/06/30 rem単位導入に伴い、html, bodyで指定する基本フォントサイズを10pxに替えて、1.6rem,1.8remといった記述で感覚的にわかりやすくする 【圧縮時の注意】 2020/07/09 書体にもよるが、効果はあまり変わらないのでfont-feature-settings: "palt" 1;の記述は廃止 【経緯】2020/06/30 font-feature-settings:"palt" 1;で文字詰めを指定していたが、圧縮ツールでは2つの「"」が略されてしまいfont-feature-settings:palt 1;となり、文法チェッカーでエラーになってしまうので圧縮後、置換で「"」を復活させること。 【重要】2019/09/17 nagamira_css1.cssにあったpanel関係のスタイルシートをnagamira_css1_panel.cssへ移転した。 nagamira_css1.cssが肥大化しているため、今後の改修に備えて移転。 【重要】2019/12/14【画面レイアウト】 //ナビの編集で全体の画面レイアウトを明示的に指定する必要がある。 //ブログ画面では992px以下で別のレイアウトになってしまうのでこれを防ぐため明確に指定する。 //以下から選択してナビ編集で記述する。 //**【標準】 //#layout(default) //**【メニューなしレイアウト】 //#layout(nomenu) //**【広めのメニューありレイアウト】 #layout(wide) //**【サイト幅100%レイアウト】 //#layout(fullpage) //**【ナビ／メニュー／フッターを非表示】　 //#layout(landing) 2019/02/28 メディアクエリの　1200　を　1079に変更　テスト 2019/03/01 アイキャッチタイトルのみGoogle日本語フォントに対応を検討 2019.03.02 モバイル時メニュー文字 モバイル時ドロップダウンメニューの文字の大きさを再定義 ナビで文字を大きく書かない事で記述を楽にする フッターで使う文字の大きさを再定義 2019.03.03 メディアクエリの　1200　を　追加 見出しの大きさの調整 タブ間の空白を調整 2019.03.04 アイキャッチの表示で Android用にGoogle日本語フォント対応 'Noto Serif SC' 以下を内に読み込ませておく。 Haikの場合はこのCSSフィルの読み込み記述で併せて宣言 @import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC:700'); も試したが、遅くなる。 アイキャッチをh1,h2,h3,h4とわける 219.03．05 行頭アイコンを4種類出すための改修と調整 白抜きを止めて視認性を上げる 使えないテーマが出てくる アイキャッチを小さくする 219.03．06 html, bodyのフォントサイズを調整 219.03．07 段落、見出し、フォントの大きさ、行間、マージンの調整 nagamira_css2から移動 * 引用符の修正 * 左ダブル引用符、左ダブルクォーテーションマーク 「“」 "\201d" * 右ダブル引用符、右ダブルクォーテーションマーク 「”」 "\201d" * 2019.03.02 * グーグルマテリアルアイコンフォントだと細いのと説明が面倒 * /skin/boostrap/fontsに入っている　Glyphiconsに切り替えてみるとうまくいった * font-family: 'Glyphicons Halflings';にはハンバーガーアイコンがないので代用 * Googleマテリアルフォントはカスタマイズで使えるようにしておく。 * 内にリンクを記述する事 * * グーグルマテリアルアイコンフォントだと細いのと説明が面倒なのでカスタマイズでのみ対応できるようにしておく * font-family: 'Glyphicons Halflings'; * font-weight: bold; は外した方がよい * boostrapのGlyphicons　コードは　 http://icon-search.jp/ でコードを検索 * ハンバーガー　　"\e236"　 * ×　"\e014"　remove　で代用 * ＋　"\002b"　plus　で代用 * ∨　"\e114"　chevron-down　シェブロンダウン * ○囲み＋　"\e081"　plus-sign　ただし、小さいので色や人によってはみにくい * ○囲み×　"\e083"　remove-sign　ただし、小さいので色や人によってはみにくい 2019．03．06 メニューとタブの見出し文字を太文字にする いちいちボールド指定が面倒くさいので見出し文字を太字に固定 2019．03．07 パレットを追加 .haik-palette-salmon .haik .haik-palette-sky .haik .haik-palette-yellow .haik 汎用的に使えるスタイルシートを用意して、そこからテーマ毎に派生して合わせる形にする。 2019.03.07 見出しつき枠のヘッダーと問い合わせフォームの書体サイズを混同してエラーになっていたので修正 2019.03.07 目次上下罫線を消す→あった方がいいので復活させる ナビゲーションバーのロゴを出さない時のタイトル名の再宣言 iPad、PC画面で見たとき、詰まった感じなのでこれを調整。左右のマージンを2文字分とるようにした。 ただし、カラムで分けたとき、大きくなるので調整が必要。 2019.03.7 本文コンテナサイズを小さくしてみる→コメント化 2019.03.8 1ピクセル単位でおかしな部分が出ていた (min-width: 767px)→768PX以上　なのでこれはおかしい max-widthと書いていた頃の忘れ物 メディアクエリの解釈を修正 @media (min-width: 767px) → 768px @media (min-width: 1079px) → 1080px 2019.03.8　追加 サムネイルの中身を修正する カラム桁内の段落（P）の記述でメディアクエリ毎に本文を整形する 2019.03.9　追加 ナビバーのブランドテキスト表示方法の修正　 display: inline-table; 2019.03.12　 前回以降の調整で数字などを細かく修正 見出し1，2，3の冒頭のアイコンと画像を消す項目を追加。 見出し３はブロググリッドリストでタイトルに使われているため、行頭へのWEBアイコンはここで行わない。 行頭へのWEBアイコンはbs_boxでスタイル設定する事で代用。コードをbs_box.cssへ移動。 2019.03.13 見出し3の字下げで混乱するのでやめてみる 2019.03.14 スタイルシート制作者を追加 フッターに表示する 2019.03.14 ふち取りボタンの色の再設定 標準のは明度が高く読みづらいため、修正 2019.03.14 グラデーションボタンの色の再設定 標準のは明度が高く読みづらいため、修正 2019.03.14 ヘッドコピーを大きくする 2019.03.15 ドロップメニューの文字がPC画面では中央揃えになっている。スマホではこれでいいが768px以上では不自然なので左揃えに変更。 2019.03.15 主にコードを記述するpreの見え方を読みやすく、書体や大きさなどを調整。 HAIKでは「引用」扱いになっているがまちがい。 Bootstrapの仕様に近づけた。 2019.03.16 見出し1のマージンを修正。スマホで見た時に疲れないように上を1em、下を2em空ける 全てで左右マージンを0に 2019.03.16 主にリンク切れなどのテキストメッセージに使われているフォントを調整 2019.03.18 メディアクエリの解釈を修正 @media (min-width: 1080px) → 1024px ipadを横にした時に合わせる 2019.03.18 thumbnail,cols対応 英単語を改行させるため、 word-break: break-all;を追加 2019/03/19 .label　nagamira2_cssにあったものを統合 スタイルを変えている 2019.03.19 ナビ文字を大きくする。メディアクエリに1200px時を追加 2019.03.19 ヘッドコピー：メディアクエリ1024px以上の場合を有効に 2019.03.20 font-weight: bold;を700;に修正 * 2018.03.22 * WEBアイコンが行頭に付けられるようになったので左側の絶対領域を1文字開けるように調整。 font-display:swap;でWEBフォントの遅延読み込みに対応へ 2019.03.25 メディアクエリの解釈を修正 Boostrapグリッドシステムに準拠させたのを試作してみる @media (min-width: 1024px) → 992px * 2018.03.25 番号つき箇条書きの子項目が下がり過ぎるので左側の絶対領域を調整 2019.03.26 Boostrapの桁分けの余白の調整 上の余白がある事でレイアウトがやたらと空いてレイアウトが不便なので調整 margin-top: 15px;→margin-top: 4px; それぞれで調整するように切り替えてみた。 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.03.27 .alertを継承して新クラスを作成 .alert-default-solid .alert-danger-solid .alert-info-solid .alert-primary-solid .alert-success-solid .alert-warning-solid
#bs_box(info)
で囲んで使う 2019.03.02 ＰＣ版メニュー・ドロップダウンメニュー メディアクエリに568px時を追加してスマホを横にした時見やすくする 2019.03.28 タブ下線とマージン改修 2019.03.28 ナビゲーションバーのロゴ縦位置のずれを調整 2019.03.29 578px時の文字の大きさを大きくする。これはスマホを横にした時、文字を大きくするだけの余裕がある事に気づいたから。 2019.04.01 テーマhaik_cool用の見出し下線の配色見直し 2019.04.02 フッターとコンテンツの左右排他領域を解像度毎に最適な幅に可変するよう調整。 2019.04.03 thumbnailの高さをそろえる方法を発見。修正。 2019.04.04 背景色つき枠,背景に色がかかっている彩度が高いバージョン 2019.04.04 ヘッドコピーの色を修正。目に飛んでくる重要な情報なので、コントラスト比が7以上になるようにする。 2019.04.29 .thumbnail pのmarginを0.5emから 0.1emへ 2019.04.29 .thumbnailの枠線を改修。陰をつける 2019.04.29 カラムのマージンを調整。間隔を大きくした。 2019.04.30 p line-heightの調整2emと1.8emと使い分ける。文字が小さい時は行間を大きく。 2019.05.02 thumbnail互換性のため残していた旧い記述をコメント化 2019.05.02 フッターの幅を拡大、変更 2019.05.03 p 段落 768px時の左右マージン調整 2019.05.03 見出し（h2,h3,h4）の　768px　以上のマージン調整 2019.05.05 pre　margin全て見直し pre　枠の色見直しと角丸めを廃止 2019.05.03 .qhm-bs-blockのよくわからない記述で読みづらかったマージン下を0emから1emへ修正。 2019.05.03 箇条書きマージンと排他領域の調整 2019.05.03 タブのマージンを箇条書きと区別するように記述 navの中にあるタブなのでこれを区分して記述することでメニューにもタブを書けるようになる タブ上下マージン見直し 2019.05.03 .label 見た目の調整 2019.05.03 タブ枠のマージンの調整 2019.05.03 フッター用タブ マウスオーバー・アクティブ時の色 2019.05.04 フッター用非選択タブ枠線の調整 2019.05.04 条件セレクタで冗長性を廃止 2019.05.05 条件セレクタで冗長性を廃止 2019.05.09 タブのマウスオーバー時の色をかえる 2019.05.09 pre　スマホで文字がまだ小さすぎる事が判明、修正 2019.05.10 見出し注意書きで使われるsmall書式の修正を追加 2019.05.10 タブに display: flex; flex-wrap: wrap; を追加してレイアウト崩れを防ぐ が、うまくいかず悪銭苦闘。 2019.05.11 異なる高さをそろえる 散々試行錯誤して・・・ .container .row { position:initial; float:none; } @media (min-width: 768px){ .container .row { display: flex; flex-flow: row wrap; } } これを追加したらうまくいった 2019.05.12 ipadで正常に動作しないので nagamira_css1_201905111321.css 時点に戻す。 ipadだけでレイアウト崩れが起こるので調査中 【状況】 メニューが下に追い出される カラムも3桁時、右カラムが追い出される ところがPCやスマホでは問題なく表示される 2019.05.12 ipadでレイアウト崩れが起こるのでdisplay: flex;を調査する まずHAIKでは768px未満ではdisplay:flexが無効になるらしくレスポンシブ対応が変わる（実際は後述するクラス指定が原因だった） 2019.05.12 前のは.container .rowでクラス指定をしていたので全体にわたって宣言がされてしまっている。 クラス指定を.haik-container.haik-content .rowとすることで避けられる。 これは偶然display: none;にして、コンテナ全体が非表示になる事で気づいた。 2019.05.12 フッターの幅を拡大、変更するクラス名の修正 .container→.haik-footer>.containerに 2019.05.12 haik-container用 .haik-footer .haik-menu クラスそれぞれのタグ配置に応じて.rowに display: flex; をセットする 2019.05.13 メディアリストのdisplay:を設定する 2019.05.13 選択タブ内の文字指定にword-break: keep-all;を入れる break-all強制行送りだとレイアウトが崩れるため。 2019.05.13 選択タブ内で入りきらない場合は改行してoverflow: hidden;で隠すことにする 2019.05.13 ラベル内で入りきらない場合は改行してoverflow: hidden;で隠すことにする 2019.05.11 タブ書式の調整 2019/05/13 blockquoteで最後の1行を斜め太字にして引用元を記述する 2019.05.15 rowの排他領域をマイナス値にしてみる 2019.03.28の修正で0にしているが、ipadでの動作を確認するため 【結果】関係なかった。 2019.05.15 Boostrapの桁分けの余白の調整にfloat: none;を追加→意味がないので元に戻す 2019.05.15 display:flex関係の記述を整理してすっきりさせる 2019.05.15 display:flexがipadではきちんと機能しないのでカラムの高さをそろえるjquery.matchHeight.jsを使ってカラムをそろえてみる。 試験のみ・複数クラスでは動かない事が判明 2019.05.16 display:flex運用に戻す 2019.05.16 Flexboxのポリフィル「flexibility.js」を導入。 これを「-js-display: flex;」と書いて使う事でFlexboxに対応していないIE 9等のブラウザでもFlexboxが有効になる。 やはりipadではカラムがずれて表示される。どうしたものか。 2019.05.16 ipad向けに%比率を調整テストしてみる。やはり！ nagamira_css6.cssの設定が原因 【試験】.haik-container .col-sのパーセンテージを減らさない→ずれる 【試験】.haik-container .col-sのパーセンテージを1％減らして変えてみる OK %比率の書き方が原因だった。1カラム目冒頭の左側に少し空白が入るがこれが原因。 ipadの仕様上避けられないので %比率の書き方を変える必要があるので対応。 2019.05.18 Googleフォントで公式機能としてfont-display: swap がサポートされるようになったので対応 以下のコードを使う または埋め込み式では font-family: 'Noto Serif SC'をfont-family: 'Noto Serif JP'に書き換えた 2019.05.18 フッター用タブ 水辺中央そろえに改修 2019.05.18 .haik-container左右排他領域調整をnagamira_css6.cssから移動 2019.05.18 .haik-container左右排他領域調整。単位をemに 2019.05.23 carousel(スライドショー）用スタイルシート改修 2019.05.23 最大幅1045px以上は対応していないのでcontainer配置は自動にする 2019.05.23 carouselスライド画像のdisplay属性がblockだとアイキャッチと一致しなくなるのでcontentsにする →訂正carouselスライド画像のdisplayがcontentだと画像がでなくなるので注意 blockに戻す。 2019.05.23 carouselスライドショーでのメディアクエリ文字サイズ設定（h1） carouselスライドショーでのメディアクエリ文字サイズ設定（p） 2019.05.24 carouselスライド画像のdisplayの属性をblockに戻す。 2019.05.24 carouselスライドショーでフォント設定を行う。WEBフォントも読み込める 2019.05.24 従来のアイキャッチの最大幅を改修 画面のレイアウト設定毎にクラスの構成、さらにパレット毎に記述されてわかりにくかったので統一する 2019.05.29 タブであふれた文字は隠す 2019.05.29 ラベルであふれた文字は隠す 2019.05.29 見出し文字の背景を透明にする 2019.05.29 .haik-container > .rowを追加 テーマBIOなどで.haik-contentの中にコンテンツがに入っていないものがあり、代替で入れる 2019.05.29 要素で背景色を可能な限り継承するようにした。 メンテナンスを楽にする事と、今後のダークモードの流行にも備える事もある。 2019.03.28 ナビゲーションバーのブランド名のクラス設定を調整 テーマによってはパレット名指定が必要なため 2019.06.01 thumbnail背景色を白に統一。継承しているとわかりにくい事があるため。 2019.06.01 スライドショーの移動クリック範囲の調整 2019.07.06 ブログの新着ブログcaptionでマウスオーバー時の下線を復活 2019.08.15 パスワードリセット画面などの文字大きさを修正 2019.08.19 デフォルトの文字色を#333から#111にしてみる 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.24 段落で行送りでアドレスを改行していないのでword-break: break-all;を追加。 2019.08.24 ラベルの文字を調整する 2019.08.24 今後タブのスワイプ化を見通して下線の処理が面倒なので最初から出さない事にする 2019.08.24 三角形の誘導枠がうまく表示されないので調整 それぞれの画面幅でのマージンの調整 2019.08.26 .well一番小さい画面幅でのマージン調整一番小さい画面幅でのマージン調整 2019.08.26 タグの大きさを調整 2019.08.26 見出しの文字間を広げる 2019.08.27 脚注のスタイル改修 2019.08.27 サブ見出しの書式を改修 2019.08.28 見出しのマージン調整 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はコメントを外してWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.29 なぜbs_boxなどにおいて最後の行であけるのか全く見えてこないので0emに改修したが、 従来のbs_box枠など表示がおかしくなったので互換性のため1emに設定する。 2019.08.30 文字の大きさを調整 2019.08.31 見出し（h2,h3,h4）の書体大きさ調整 2019.08.31 smallの左マージンを調整 2019.08.31 HAIKの自動リンクが働く単語が見出しに入ってもリンクが動作しないようにする アイキャッチにリンクが入っていても解除する 2019.08.31 試験的にグリッドを導入 2019.09.01 【重要】 「メインの見出しリンクを解除する フッターの見出しリンクを解除する メニューの見出しリンクを解除する」 は意味がない上に:notを使うと意味不明になるので記述は予備とせず削除する。 2019.09.04 アイキャッチ見出し（h1,h2,h3,h4）のサブ見出し追加 元スタイルシートではh4の記述漏れがあった 2019.08.31 アイキャッチ見出し（h1,h2,h3,h4）の書体大きさ調整 2019.08.31 メイン段落見出し（h2,h3,h4）の書体大きさ調整 2019.09.01 メイン見出しリンク文字色調整 パレット毎に色が異なって混乱するので青1色に統合する 2019.09.01 日付だけにでるのでマウスオーバー時の下線を見送る 2019.09.01 タグのスタイルシートをnagamira_css1.cssからnagamira_css4.cssに移行 タグクラウドをタグ一覧とも統合して使えるようにしたため。 2019.09.02 pre　スマホで文字が大きすぎて字数が減るので調整 2019.09.02 番号つき箇条書きの大きさ調整 2019.09.02 段落文字の大きさを調整 とくにスマホの解像度の向上で18pxでも読めない場合が出ると予想。 2019.09.02 全ての文字の大きさを調整 2019.09.03 タブの折り返し指定の余分な記述を削除 2019.09.03 タブの文字を白縁にする 視認性を向上するため 2019.09.03 ラベル文字を折り返すように修正。 レスポンシブ対応でレイアウト崩れが起こらないようにするため 2019.09.03 768px時の見出し1,2,3の大きさを調整 2019.09.04 スマホ時などの.container.haik-fullpage-container設定を追加 2019.09.04 ナビの最大幅設定を1045→1200へ 2019.09.05 ヘッドコピーの書体大きさを調整 2019.09.05 ヘッダのレイアウト見直しに伴いブランド名の排他領域（padding-left）を調整 2019.09.05 ナビのメニュー横幅を0.3emから0.4emに広げる 2019.09.05 フッター用タブの見出しに縁取りを採用 2019.09.05 箇条書きのマージンを調整 2019.09.05 タブ高さを調整 2018.09.06 メニュー時の段落リンク文字属性の追加 2019.09.06 箇条書きで行送りインデントのクラスを箇条書き（クラスlist1）のみに適用されるようにした。 2019.09.06 768px時ナビの高さheight:を2.6emから 2.5em;にした 2019.09.06 タブの幅をレスポンシブ対応調整 2019.09.06 a:hoverだけ記述していて誤作動していた所を修正 2019.09.06 タブのクラス名を明示した 2019/09/07 タブのクラス名を明示したことでメニューでタブのタイトルが表示されるようになった。 クラス名を明示した事で正常に動くようになったため 2019/09/07 scrollup アイコン透明度 、位置設定をnagamira_css2.cssで同じ記述で重複していたのでnagamira_css2.cssへ統合 2019.09.07 ブランド名：背景色が入った時のために白縁取りを入れておく 2019/09/07 目次の行間を2emに統一 2019/09/07 箇条書きのインデントを改善して上マージンを増やして視認性を向上 2019/09/08 カラム桁内の段落（P）左右マージンを微調整して文字数を増やした。 2019/09/09 スタイルシート整理のため以下をnagamira_css1.cssからnagamira_css10.cssへ移動 　○ヘッドコピーの修正 　○ブランド名：ナビゲーションバーのロゴを出さない時のタイトル名 2019/09/09 メイン見出しリンク文字色マウスオーバー時調整のh2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする 2019/09/09 メイン見出しリンク文字色マウスオーバー時調整をテーマ用CSSファイルに移動（例nagamira_css8_cool.css） 2019/09/09 ラベルの行高さを1.0emから1.2emへ修正 2019/09/09 見出し（h2,h3,h4）の初期（スマホ時）の書体大きさ調整 見出し（h2,h3,h4）の文字つめ調整 2019/09/09 メインコンテンツの見出し1，2，3（h2,h3,h4）のリンク文字色h2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする 2019/09/09 フッターの文字 p 左右マージンを0.5em設定 2019/09/10 箇条書き行間を広げて読みやすくする 箇条書き字下げを修正 箇条書き字下げは568px以上のレスポンシブ対応にする 2019/09/10 アイキャッチの見出し（h1,h2,h3,h4）ボーダー線を消す 2019/09/10 見出し4　文字色を上位継承する記述の書き忘れを補足 2019/09/11 最初に来る見出し1で上マージンが0になるテーマがあるが強制的に指定する。 マージンを0にしたら、詰まった印象になってしまうため。 2019/09/11 見出し（h2,h3）のスタイル指定に新しいセレクタを追加する 2019/09/11 アイキャッチの排他領域指定に最優先セレクタを追加して、値を統一する 2019/09/11 .haik-containerのpaddingを0でリセットする 2019/09/12 768px時のhaik-container右排他領域を8pxから16pxに増やす 2019/09/12 pre　border-radiusを0から8pxへ 角が出ているのでアコーディオンパネルと区別するため 2019/09/12 見出し1字間letter-spacing: .1em;に統一 2019/09/12 見出し2字間letter-spacing: .1em;に統一 2019/09/12 ラベルのpadding:上下を調整して.3emと.4emから上下とも.2emとして、重ならないようにした。 2019/09/12 thumbnail大きさを調整 2019/09/13 ボタンの属性を移植。 2019/09/13 アイキャッチでボタンを使うとリンクが反応しなくなるのでボタンのみリンクを解除する 2019/09/13 ボタンに影をつけて立体的に見せる ボタンのタイトルを太字にする テキストシャドウを外す 2019/09/13 アイキャッチにボタンが入っていたらリンク無効を解除する 2019/09/13 アイキャッチの見出しにリンクが入っても文字色が変わらないのと、 マウスオーバー時はアンダーラインが出る以外は解除しない。 2019/09/13 見出し（h2,h3,h4）上下マージン調整 見出し（h2,h3,h4）モバイル画面（最小）時文字大きさを小さくして文字数を増やす 見出し（h2,h3,h4）padding調整 2019/09/13 ボタンへマウスオーバー時の色の継承とオーバーライド ボタンへマウスオーバー時の色がどきついので落ち着いた色に書き換えた 2019/09/13 ボタンサイズの再設定 2019/09/13 ワード強調色の彩度が高すぎるので調整 2019/09/14 見出し(1,2,3)で英文折り返しが行われていないのを修正 2019/09/14 タイトルが長いボタンなどの桁あふれを防ぐためoverflow: hidden;を追加、 これをするとサムネイルの枠下が隠れてしまうので中止 2019/09/15 見出し（h2,h3,h4）上マージン増加・調整 2019/09/15 ワード強調色が明るい系党の色が白飛びしないように書体色を指定する 2019/09/16 見出し（h4）最小表示時の上下マージン調整　2.618em→1.618emへ 2019/09/16 blockquoteで長くわからなかった上下枠のズレをtop、bottom属性を-1にして解消 2019/09/18 禁則処理のword-break: break-all;を削除してクラスhtml,bodyに統一。 句読点で折り返しができないことがあるため。 2019/09/18 pre上下マージンを0から1.875emへ 2019/09/18 段落（p）の行高を1.8emから1.875emにしてルビがふれる高さに改善 2019.09.05 箇条書きのスマホ時左側マージン1emから8pxに 2019/09/18 アイキャッチの排他領域指定を0にする 2019/09/18 段落内ではボタン上下マージンを減らす 2019/09/19 アイキャッチの見出し（h1,h2,h3,h4）左右margin: 0.3em 1em;に統一 2019/09/19 ルビ文字の大きさを拡大したので段落（p）の行高を1.875emから1.93emに修正したが、意味がないので戻す。 2019/09/19 引用がパネルと混同しやすいので形を角張るように修正 2019/09/20 見出し（h2,h3,h4）上下マージン増加・調整 2019/09/21 フッターの文字 p 下マージンを1em設定 2019/09/22 thumbnailの画像を大きく表示するのに伴い、上左右角丸めを0pxに設定。 2019/09/22 スライドショーに使われるクラス.carousel-inner .img-responsive、 サムネイル　.thumbnail、 画像にアドレスが入った場合、画像を拡大して、画像下マージン0.5emをつける 2019/09/22 画像にリンクが入ると自動的に左右マージンが入ってしまう仕様を強制的に修正する 2019/09/22 カラムのマージン最小値を調整。左右3pxから8pxに カラムの568px以上のマージン値の記述ミスを修正 2019/09/22 div.qhm-align-centerの下にある段落の下マージンを0.5emにする。 カラムタイトルが見やすい 2019/09/23 preの背景と枠線を水色に。グレー系党では英文字が文字見づらいと感じる事が多くあるため。 2019/09/24 ナビの最大幅設定を1200→1980へ 2019/09/24 ＰＣ版メニュー・naviドロップダウンメニューテーマ毎に記述設定が分かれているので統合する 2019/09/24 thumbnailの背景色を透明にする 2019/09/27 編集画面のカラム指定の幅が狭いのを修正 2019/09/27 ihpone5（SE）解像度追加　書体の大きさ調整 見出し、段落、引用など調整 2019/09/29 主にテーマMOIで利用されるナビ要素のpaddingを設定 0.2em 0.4em; 他のものに合わせる 2019/09/29 ナビの最大幅設定にテーマ「moi」の独自な解釈のために.container属性の最大幅を追加 2019/09/30 タブの.nav-tabsクラスに-js-display: flex;属性を追加。 2019/09/30 アイキャッチの段落のマージンをmargin: 1em 1em;に揃える 2019/10/02 preの上下マージンを大きくする。干渉が発生していた。 2019/10/05 thumbnailのpadding-top: 0へ 上に余白を入れない方がいい 2019/10/08 チェックボックスとラベルのズレをなくすための調整 2019/10/08 引用符の書体を改修 rem単位を試験的に採用 2019/10/09 .carousel-captionの丸印を大きくする .carousel-captionの位置を下0に修正 2019/10/09　 予備コメント化→carouselは元が最大1600PXまでなのでそれ以上は左右のマージンを復活させる 2019/10/12 検索や問い合わせフォームのテキストボックスのマージンと高さを調整 2019/10/12 問い合わせフォーム書体の大きさを修正 問い合わせフォームメディアクエリ360px時を追加 2019.10.13 スライドショーの文字を黒ふちにする 2019/10/24 サムネイルの画像拡大transform: scaleを1.5から1.11へ 2019/10/30 .wellで継承されている box-shadow: を消去 2019/11/06 ナビ余白の排他領域の調整修正の説明を追加 2019/11/12 見出し1～3のsmall（サブタイトル）書体大きさをモバイル版と大画面とで見やすいように調整 2019/12/06 見出し1，2，3（h1,h2,h3,h4）の行高を1.7emに統一 2019/12/07 基本フォントサイズを最低限の大きさとしての14px→18px、16px→20pxへ修正 2019/12/07 基本サイズを大きくしたので引用符の大きさを3から4remへ修正 2019/12/08 見出し2の左右排他領域を0.618emに広げる 2019/12/13 ナビのヘッダーの右排他領域を0にする。意味不明な右余白ができるのを防ぐ 2019/12/17 ワード強調色を使っている所が検索、スペースで区切った単語ごとにワードを強調しているとわかった。 文字色をそれぞれ読めるようにコントラストを調整 2019/12/20 基本フォントサイズを最低限の大きさとしての18px→14pxにして、20pxはコメント化へ修正 html,bodyにフォントサイズを複数出すやり方はメンテナンス性がよくないため。 2019/12/22 .haik-container > rowを.haik-container .rowに修正 要素のすぐ子要素限定適用（>）を止めて子孫要素に適用されるようにした 2019/12/23 blockquoteアイコンの書体を FontAwesome;に変更　端末毎に書体が変わるため統一する。 2019/12/25 ボタンサイズの再設定で .btn-lg　大きいボタン .btn-sm　小さいボタン .btn-xs　かなり小さいボタン の文字の大きさをそれぞれレスポンシブ可変にする 標準ボタンのボタンサイズが可変になっているのでそれに合わせる 2019/12/25 グラデーションボタンのマウスオーバー時の設定を追加 移植が必須なのに放置していた。 2019/12/25 検索ボタンの高さを調整。 2019/12/25 検索ボタンの高さを調整。書体によって高さが変わるので高さを固定する。 2019/12/25 箇条書きのアイコンを変えたのでtext-indentを-1.3emから-1.2emに修正 2019/12/25 箇条書きのレスポンシブ対応調整。360px時の文字サイズを追加。 2019/12/26 ol 番号付箇条書き左マージンを1emから0emに修正 2019/12/26 引用の枠線の太さの改修と角の丸めを6pxから12pxに大きくする 引用のシャドウを廃止して、枠線色をオレンジに替える 2019/12/27 -webkitプレフィックスを解除。もういらないので。 ただし、-jsプレフィックスはまだ残してある 2019/12/27 ナビ要素のborder-bottom: 3px　→ 1pxに置き換える。空間確保 2019/12/27 .thumbnailにtransition: border .2s ease-in-out;を追加 2019/12/27 箇条書きの位置調整、左マージン、左排他領域を1emに 2019/12/27 ナビドロップダウンメニューの文字大きさで使っていた!important指定を解除。 不要になったので 2019/12/27 ナビ要素の重複するパターンを統合、ただし、読みやすさを優先して残しているものもある。 2019/12/27 見出しの冒頭のアイコン、画像を消す所で重複するパターンを統合 2019/12/27 検索ボタンの高さと配置を調整。書体によって高さが変わるので高さを固定する。 2019/12/28 carouselスライドショーでh1~h4疑似要素のクリア 2019/12/28 .carousel-captionの位置をleft: 20%;に修正 2019/12/28 見出し2,3の上下マージンを調整 セクションの見出し2，3を改修したのに伴う措置 2019/12/28 箇条書きの位置調整、左マージン0emに 2019/12/28 セクションの見出し、カラムのマージン指定　移植 使う意味があやふやなのでコメント化様子を見る 2019/12/28 セクションの見出し装飾のクリア　追加 2019/12/28 番号付リストの書式指定で、.plugin-contents ul,.haik-container li.list1,ul.list1の記述は不要 統一へ 2019/12/28 360px未満時の表文字サイズを追加 2019/12/28 アイキャッチ360px未満時の見出し、本文（h1．h2．h3，h4，p）を追加 2019/12/28 360px未満時のボタン文字サイズを追加 2019/12/28 段落にコピー防止にユーザーが選択できないように設定 開発中はコメントにする 2019/12/28 .thumbnailのボックスシャドウを廃止、枠線を濃く修正 処理が重いため。マウスオーバー時のボックスシャドウはしばらく保留 2019/12/27 箇条書きのテキストインデントを1.2emに 2019/12/29 bs_boxなどにおいて最後の行で1emあけるだが、main.cssの内容を統合したので、予備コメント化する これまでもこの対応が邪魔だったので。 （従来との互換性を重視する場合はこれを使う） 2019/12/30 箇条書き単体　上下マージン設定 2019/12/30 箇条書きリストの上マージン統合につき、記述廃止 2019/12/30 箇条書き要素のマージンを増加修正したのに伴い、ナビ要素のマージンを修正する 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2019/12/30 段落マージンをmargin: 1em 0.5em;に統一 2019/12/30 箇条書き全体の右マージン1emを追加 2019/12/30 .carousel-captionの位置をleft: 50%;に修正 2019/12/30 .haik-container 内での.carousel-captionの位置をleft: 20%;に修正 2019/12/31 html,bodyにムーススクロール機能を追加 scroll-behavior: smooth; 2019/12/31 フッターの文字 p 上マージンを1em設定 2019/12/31 CSSでメイン（.haik-container）のみ、 先に高速0.5秒でフェードインアニメーション FireFoxでエラーが起こるのでタイトルのみに修正 2020/01/01 画面を読み込んだ時、.haik-containerのすぐ下、最初の見出し1だけアニメーションする 先にフェードインした.haik-containerと.haik-menuに時間差を置いて、1秒かけてフェードインアニメーションする FireFoxでくり返し動作が起こるので中止 制作記録（中止）CSSだけでフェードインアニメーションにて解説 2020/01/01 モバイル時のナビ要素のborder-bottom: 1px solid transparent;を0へ マウスオーバー時にちらつきがあるため 2020/01/01 main.cssで使っていたけれどこちらではコメントにしていたものでもう使わないのを削除。 2020/01/02 メインコンテナでのcarouselスライドショーでh3とpフォント設定を行う。 文字を黒ふちにする なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。 2020/01/02 carousel-innerクラスの装飾はカクカクした動きになるので、予備コメント化 2020/01/02 メインコンテナcarouselスライドショーh3を2つ記述していたので統合 2020/01/02 スライドショーの左右クリックボタンWEBアイコンの変更。 見た目が洗練されているFontAwesomeの「丸囲み＜」と「丸囲み＞」に切り替える。 2020/01/02 メニューやフッタにもcarouselスライドショーを問題無く表示できるよう、見出しを修正する 2020/01/04 タブのマウスオーバー時の下線の色の改善 2020/01/04 ボタンへマウスオーバー時の色、他テーマとの互換性を廃止したのに伴う修正 2020/01/04 ふち取りボタンの再設定 左右の丸めを廃止して、通常の四角いボタンのスタイルを継承する main.cssからBoostrap設定を移植 btn-ghostは背景が透明 btn-ghost-wは背景を白色にして使い勝手を修正 2020/01/04 引用符の大きさを3から4へ、位置の調整 2020/01/05 768px~992px未満時はメニューのcarouselスライドショーでの文字を90％に縮小する 2020/01/05 箇条書き単体の行間を1.8emに設定 2020/01/05 567px以下の.containerの左右排他領域を3pxへ 568px時の.containerの左右排他領域を10pxへ 768px時の.containerの左右排他領域を8pxへ 992px時の.containerの左右排他領域を15pxへ 2020/01/06 preの文章の行高さを1.6emから1.8emへ修正 2020/01/06 見出し3の上下マージンを調整 2020/01/07 ゴーストボタン、待機時のテキストシャドウを追加して視認性をあげる ゴーストボタンマウスオーバー時のテキストシャドウを追加 ただし、黒文字の場合はテキストシャドウをなしにするよう調整 2020/01/08 .carousel-captionの丸印がナビの表に出るエラーを修正 z-index:15を8に修正 2020/01/10 表の文字スタイルシートにセレクタ.haik-container 指定を復活。 消すとboostrap.min.css のスタイルシートが優先されてしまうため。 2020/01/13 見出し0(h1)の属性 追加。 本来は多用する属性ではないのでメイン画面用に記述。 あくまでも見出し2に近いもの 2020/01/15 検索ボタンだけでなく、メールフォームの確認ボタンも兼用している事が判明 ボタンの高さ指定を解除、検索ボタン指定をコメント化。 [placeholder="検索ワード"]の幅を縮めて見た目を改善。 2020/01/15 ナビメニュー要素に1500px以上のパターンを追加。 ユニバーサルデザイン対応で読みやすくするため 2020/01/15 ラベルのコントラスト比を3以上になるように調整。 ユニバーサルデザイン対応を強化 2020/01/15 ラベルの装飾解除にテキストシャドウの解除を追加 2020/01/15 ナビ要素の768px時のメニュー書体の大きさを18pxに指定 出せる項目を増やしたい事もある 2020/01/16 見出し3の上下マージンを調整 padding: 0.3em 0.618em 0.3em 0.618em; margin: 2em 0 1.5em; 相対値に統一 2020/01/16 見出し1の排他領域を調整 padding: 0.618em; 相対値に統一 2020/01/17 段落と段落が連結した際の上下マージンを1.875emに空ける 2020/01/18 段落と段落が連結した際の上下マージンだけでなく左右マージンの存在も忘れず。 2020/01/24 ボタンのタイトルを自動的に折り返して表示するよう修正 最小幅を設定してタイトル文字崩れを防ぐ white-space: pre-line; word-break: break-word; min-width: 3.5em; しかし、ブログのカテゴリボタンや検索ボタンでタイトルが崩れる。 ここではコメントアウトして、サムネイル・カラム内で意図的に宣言する。 2020/02/14 ラベルの行間を1.2から1.8に修正 2020/06/30 ラベルの上下右マージンの単位をpx固定からem相対に変更 絶対排他領域を修正して余白とバランスをとる 2020/07/07 メニュー内でのボタン折り返しの調整 「検索」ボタンの「検索」が折り返さないようにメニューの段落内のボタンに限定して調整 2020/07/08 レイアウトが#layout(fullpage)指定時はrowの左右余白をなくす 【注意】 #layout(fullpage)ではrowの指定がなくなりHTMLタグが変わる ソースの指定でHTMLを吐き出す所を修正する必要があるが、どこにあるか不明。 (-4px指定) 2020/07/11 h1, h2, h3, h4見出し初期値 letter-spacing: .1em;を0.5emに 2020/07/11 セクション内のタブに上左右の空白を作る セクション内のタブの背景を透明色にする 2020/07/11 .thumbnailの背景色を少し透明にする（親となる） 2020/07/12 ラベルsecondary（defaultの別名）新しい色（light,dark）を追加 2020/07/12 ボタンsecondary（defaultの別名）新しい色（light,dark）を追加 2020/07/12 ゴーストボタンsecondary（defaultの別名）新しい色（light,dark）を追加 2020/07/12 グラデーションボタンsecondary（defaultの別名）新しい色（light,dark）を追加 2020/07/13 ナビの最大幅設定を1980→100％へ （1980ピクセルを上回る解像度のモニターが出始めた） 2020/07/13 （オプション）（オプション）最初に来る見出し1でマージンを強制指定をコメント化 2020/07/13 段落と段落が連結した際の上下マージンを1.5emに調整 2020/07/13 アイキャッチのマージンを改修margin: 0 30px;→margin: 0 0.5em;へ 2020/07/13 ボタンの上下空間が広がるよう上下マージンを0.1emから0.3emに修正 2020/07/13 セクションの568px時のメディアクエリを廃止 2020/07/19 safariで書体サイズやボタンが自動的に変わるのを防ぐスタイルを挿入 safariでボタンなどにiOS のデフォルトスタイルを適用させない 2020/07/19 検索や問い合わせフォームオブジェクトの属性追加調整 2020/07/20 ボタンのスタイル属性はBoostrapのbutton.lessに依存、追加のみとする 2020/07/20 html, bodyでline-heightを指定したらいけない。他にエラーが起こっていないか。 2020/07/20 検索や問い合わせフォームオブジェクトの排他余白を相対emに 2020/07/20 見出し1～3、タブや枠類全てのの左右マージンを調整 2020/07/20 モバイル時の.containerの左右排他領域を0pxへ（空間確保のため） 【重要 セクションレイアウト見直しに伴う修正】 2020/07/21 カラム桁内の段落類のマージンを相対単位emに統合 ソースが画長くなるのでメディアクエリ568px～を廃止 2020/07/21 画面レイアウトfullpage時 画面レイアウトnomenu時 のセクションの排他余白を増やす 2020/07/21 .containerの左右余白を0にする モバイル端末でセクションを表示する際に余白ができてしまうため .containerの下のクラスhaik-container haik-nomenu-containerなどの表示で余白表示を切り替える 2020/07/21 フルページ、メニューなし画面時の余白を調整する 2020/07/21 画面レイアウトによって左右マージンの組み合わせを変える HTMLタグで【default】と【wide】のレイアウトが組み合わせになっていることに注意 2020/07/22 引用の枠の左右マージンを1emから0.5emへ 2020/07/22 フッターの左右マージンを15pxから0.8emにする 2020/07/13 見出し1のモバイル端末時の左右マージン0に 2020/07/24 問い合わせフォーム文字設定に重大な間違いあり 「.col-sm-9」はBoostrapのクラス名で、「.form-group」が正しい。 さらにその下に「.qform-contract」「.control-label」などグループに属するクラスがある。初期のクラス名がよくわかっていなかった頃の間違いで、nagamira_css3h.cssで対応済みだったのでコメントアウトする。 2020/07/28 セクションの最初に来る見出し1 上が開きすぎないようにするため 2020/07/28 セクションの最後を開ける 狭くなりすぎないようにするため 2020/08/01 クラス.wellの継承で従来のレスポンシブ対応を廃止 今のところは多く使わないため 編集画面を広くとるためにマージンを0に wellの書式を修正左右マージンを0に padding: 1em;に角丸めを廃止 【予定】 rem単位導入に伴い、html, bodyで指定する基本フォントサイズを10pxに替えて、1.6rem,1.8remといった記述で感覚的にわかりやすくする 2020/08/14 見出し内のラベルを自動で角を丸めて左右排他領域を調整する 2020/08/14 .br_label .labelクラスを追加 ラベルの「#bs_box(class=br_label)」内での利用または 「#html2(
)～#html2(
)」で囲むと通常の段落内で使う事もできます 2020/08/19 bs_box.cssからテーブルの基本的な装飾を引っ越し 【旧履歴】 2020/07/30 テーブルの色設定 2020/08/04 #calendar2テーブル用スタイル 2020/08/05 テーブルセル内tdの文字の配置、揃えを改修 2020/08/19 テーブルの基本的な装飾をここに統合 2020/08/24 ボタンの角丸めの調整を追加 2020/09/05 ラベルに.label.maru,.label.pill shadow borderを追加 2020/09/05 ラベル「#bs_box(class=br_label)」内での利用または 「#html2(
)～#html2(
)」で囲む利用を廃止 ラベルのクラスに指定できることが判明 2020/09/05 ラベルクラスの種類を増やす label関数で指定できるラベルの種類が増えた。 2020/09/06 タブ上左右の丸めを大きくする。従来のはボタンにしか見えなかったのでこれを改める 2020/09/07 ラベルの大きさを指定できるように大きさを追加 大きいラベル（large,lg）120% 小さいラベル（small,sm）85% かなり小さいラベル（mini,xs）70% 2020/09/10 ボタンの色を調整 背景を濃い色にしてわかったが、フチが太いボタンではかなり違和感が大きい warningを黄色に修正して警告の意味を持たせた。 2020/09/10 preの大きさ、マージン、排他領域の調整 黒文字とグレーの組み合わせをチェック 背景が白だとコントラスト差が激しいと目が疲れるのでグレー枠線と水色系背景に修正 2020/09/11 fullpageレイアウトでセクションにアコーディオンパネルを記述すると正常に出なかったためmax-width: 100%　コメント化から復活 2020/08/30 見出し4の左右マージンを調整して小さくする 2020/09/06 1200px以上の画面でアクティブタブの枠線が細いのでこれを太くする 2020/09/08 ボタンの文字高さ、排他領域を小さく。やや大きくなっているため 2020/09/08 ボタンの上下空間が広がるよう上下マージンを0.2emから0.2emに修正 2020/09/09 段落内でのボタンの左右空間が広がるよう左右マージンを0から0.2emに修正 2020/09/09 button.inc.phpの引数でクラス指定で使えるように .btn.bold,　枠線を太くする .btn.maru,　角を丸くする .btn.pill,.btn.circle,　角を丸くする .btn.square,　角を直角にする を追加。 2020/09/09 段落内でのボタンの左右空間が広がるよう左右マージンを0から0.2emに修正 2020/09/09 ゴーストボタン枠線の色指定を親に統合、マウスオーバー時はボタンの太さのみ可変対応 2020/09/09 button.inc.phpの引数でクラス指定で使えるようにクラスを追加 2020/09/09 ボタン枠線の可変対応。ゴーストボタンで色が変わらなかったのを修正 2020/09/09 preの書体を修正、Consolasを優先フォントに。日本語が綺麗に出る。 Menloだと日本語がメイリオになるので汚い 2020/09/09 preの背景と文字色を変更 背景　黒　文字色　明るいグレー 今やコードの記述にしか使っていないので 2020/09/10 ボタンの色を調整 背景を濃い色にしてわかったが、フチが太いボタンではかなり違和感が大きいので修正 2020/09/11 セクション内での引用の文字色をグレーに指定 2020/09/11 ボタンの色を調整。 info,danger,successの色を調整して文字が読めるように修正 2020/09/12 ラベルでの単体角丸ラベルの角度、左右マージンの調整 2020/09/13 ボタンの大きさ指定で、HTMLタグにいちいち書くの面倒なので.btn.で始まるクラスを別途追加 2020/09/13 ボタンのサイズでフォントpx指定を廃止、感覚的にわかりやすい%指定に切り返る 2020/09/13 ボタンの大きさでxlargeを追加 2020/09/13 ラベル角丸、モバイル画面時は左右排他領域を0.5emから1emへ上下排他領域を0.2emに 詰まった印象を改善した 2020/09/15 見出し3がわからず見づらいので左右マージンを減らして調整 2020/09/16 クラス　.label.bright ラベルを明るい系統の色に切り替える ラベル文字が黒文字の方がいい場合に使うとよい 2020/09/16 ラベル　darkを黒くする クラス　.label.brightを追加してグレー背景のラベルができたので黒くしても大丈夫と判断 2020/09/16 ボタンのpadding高さは 通常ボタン、角丸ボタンが6px固定 正方形ボタン、真円ボタンが0.2em可変 2020/09/20 セクションの見出しに縁取りを追加、シャドウを常時設定する 2020/09/20 アイキャッチ・セクションでclass=title-noborderを指定することでタイトルとテキストに縁取りを任意で外せる 2020/09/20 セクションの見出し書式を修正する 2020/09/21 セクション内で段落（パラグラフ）も縁取りできるようにする 2020/09/27 見出し2の左右マージン修正 2020/10/01 html, bodyのletter-spacingを0.05em;から0.02em;へ 2020/10/02 アコーディオンパネル内のpreの左右マージンを画面の大きさで可変する調整 字数を確保する 2020/10/02 pre角の丸めを12pxから0へ　アコーディオンパネルやボタン類と区別するため 2020/10/02 preモバイル画面時の左右マージンが詰まりすぎないように調整する （iphoneSEサイズでは左右が詰まる傾向がある） 2020/11/16 blockquoteのデザインを変更 ダブルクオーテーションの位置を変更 オレンジ色を水色に変更 角丸めを減らす 枠線の太さを修正 2020/11/24 ダブルクオーテーションの位置と大きさを再度変更 小さすぎたため 2021/01/29 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し ナビ、ブログサムネイルは2000px,2500pxで対応 （全画面表示でのみ使うことが多い） サイドメニューの文字バランスは検討 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを修正 テストしたところ125％にして拡大する人も多いので1700pxはおそらく使われる機会は多くないと判断 2021/01/30 2000px、2500px時のナビの行高の可変を調整 20201/01/31 ナビ・ドロップダウンメニューの装飾をnagamira_css10h.cssへ引っ越し コードの肥大化を防ぐため 20201/01/31 タブの装飾をnagamira_css10h.cssへ引っ越し コードの肥大化を防ぐため 2021/02/08 混乱するため、見出し内でのラベルの角丸めは行わない 2021/02/11 preの背景色を調整。white-spaceを追加。角丸めを復活 2021/02/11 p(段落)のwhite-space連続する半角スペース、タブ、改行をそのまま表示、それに加えて自動的な折り返しも行います。 white-space: pre-wrap; 2021/07/05 border-top-left-radius-radiusを使っている箇所があり修正 文法チェッカーでも出てこないエラー 2021/07/20 段落と段落が連結した際の上下マージンをスマホ画面と大画面とで切り替える 空間を取るが、読みやすさを重視して調整 スマホ画面上下マージンを1emに調整 大画面上下マージンを1.875emに調整 2021/08/31 【試作中】段落の文字の大きさをiphone7,8,SE2でも読みやすくする 2021/08/31 【試作中】見出し1～3のsmall（サブタイトル）書体大きさをモバイル版で見やすいように％を調整 2021/08/31 【試作中】preの文字の大きさをiphone7,8,SE2でも読みやすくする 2021/08/31 【試作中】定義語 + 説明の文字の大きさをiphone7,8,SE2でも読みやすくする 2021/08/31 【試作中】箇条書き、WEBアイコンつき箇条書き、ol 番号付箇条書きの大きさをiphone7,8,SE2でも読みやすくする 2021/08/31 【試作中】目次で表示される文字の大きさをiphone7,8,SE2でも読みやすくする 2021/08/31 【試作中】アイキャッチ見出しの大きさをiphone7,8,SE2でも読みやすくする （h2~h4 P） 2021/09/02 【試作中】アイキャッチ見出し縁取りをぼかしに修正して見やすくする 2021/09/02 アイキャッチ・セクションでclass=title-borderを指定することでタイトルやテキストを1pxの細い縁取にできる 太い縁取りは今のところ汚くなるので見送っている 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする サイズ調整 2021/09/03 アイキャッチ・セクションでclass=title-borderまたはclass=title-border-1を指定することでタイトルやテキストを1pxの縁取にできる アイキャッチ・セクションでclass=title-border-2を指定することでタイトルやテキストを2pxの縁取にできる アイキャッチ・セクションでclass=title-border-blurを指定することでタイトルやテキストを2pxのぼかし縁取にできる 以下のように設定。カスタマイズ用にコメントで中身を残している カスタマイズ用 縁取りぼかし カスタマイズ用 縁取り細 カスタマイズ用 縁取り太 カスタマイズ用 縁取り右下影（1px） 2021/09/03 アイキャッチ・セクションでclass=title-border-blur-2を指定することで右下影（2px）にできる 2021/09/03 アイキャッチ・セクションでclass=title-border-shadow-1を指定することで右下影（1px）にできる 2021/09/03 アイキャッチ・セクションでclass=title-border-shadow-2を指定することで右下影（2px）にできる 2021/09/03 表の内容をモバイル解像度に合わせた表示に修正 2021/09/03 メイン画面の見出し3（h4）をiphoneでも見やすいように大きさを調整 2021/09/03 メイン画面の見出し2（h3）をiphoneでも見やすいように大きさを調整 画面が小さいのであまり大きくできない 2021/09/03 メイン画面の見出し1（h2）をiphoneでも見やすいように大きさを調整 画面が小さいのであまり大きくできない 2021/09/03 見出し1～3のsmall（サブタイトル）書体大きさをモバイル版で見やすいようにさらに％を調整、統一 2021/09/03
を無効にする 旧いHTML記述ではbrを入れて空行を作っていたが、非推奨になっている。 マージンはCSSで指定する事が求められている 2021/09/04 セクションの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は専用のマージン。 2021/09/04 ラベルに縁取りのサイズをborder（1px）に加えて1～3pxの太さを用意した border（デフォルト） border-1 border-2 border-3 2021/09/04 ラベル文字太さ 通常（font-normal)を追加 font-weight:500が標準。400だと細くなる。 2021/09/05 ラベルの行高さを1.8emから1.4emに修正。文章内で使う場合、1.8emだと大きすぎる場合があるため。 2021/09/05 ラベルの行高さを修正したのに合わせて、角丸め、正方形、丸ラベルの幅も修正 2021/09/06 アイキャッチ・セクション余白を大きくする クラス .title-wrapper-largeを追加したので文字書式のマージンを調整、段落も修正。 上下幅を1em前後になるよう調整 2021/09/06 ラベルの下からの位置を0.1emから0.3emへ増やす 拡大するとずれが大きくなっていた 2021/09/07 メイン画面の見出し1（h2）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 2021/09/07 メイン画面の見出し2（h3）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 2021/09/07 メイン画面の見出し3（h4）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 モバイル解像度での見出し文字は画面が狭くなるので枠や字下げなどで修飾する事を前提にしている 2021/09/17 目次の文字の大きさ。モバイル端末の表示を小さくする 大きすぎると行送りが増えるため 2021/09/20 サイド メニューでのセクション書式を追加。 タブレット画面と高解像度画面での表示を変えて行あたりの字数を増やす。 2021/10/17 ラベルの黒文字を＃333333から＃111に修正 iphoneで表示するとはっきりしない色だったため また今後細い文字で表示する場合に備えて対応 2021/10/17 リンク文字の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ 2021/10/17 目次リンク文字の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ 2021/10/17 メイン見出しリンク文字色の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ 2021/10/17 ブログの新着ブログcaptionリンク文字色の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ 2021/10/17 ラベル文字細いクラス .label.font-narrow　 ラベル文字太字（標準）.label.font-bold を追加 2021/10/18 カラムのマージン最小値を調整。 レスポンシブ対応、左右0.25emに 568PX（スマホを横にした時の大きさ）以上の場合に左右0.5em; 2021/10/26 ラベル文字の太さをMacで確認して修正 font-weight:200が細字 font-weight:400が標準 2022/07/21 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone margin: 1em 0.8emとする Android margin: 1emとする 2022/07/22 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone5,SE font-size: 24px; margin: 1em 0.8em; iphone7,8,SE2 font-size: 22px; margin: 1em 0.8emとする iphone7 PLUS,8 PLUS,XS,XS Pro iphone11,12,13/Pro iphone12,13/Pro/ProMax font-size: 22px; margin: 1em 0.8emとする Android font-size: 20px; margin: 1em 0.8em; 2022/07/23 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone5,SE font-size: 18px; margin: 1em 0.8em; 2022/07/26 段落、箇条書きの文字大きさを調整 iphone5,SE Android font-size: 18px; margin: 1em 0.8em; iphone7,8,SE2 font-size: 20px; margin: 1em 0.8emとする iphone7 PLUS,8 PLUS,XS,XS Pro iphone11,12,13/Pro iphone12,13/Pro/ProMax font-size: 22px; margin: 1em 0.8emとする 【参考】 5/5s/SE(1) 4.7インチ 320×568 6/6s/7/8/SE(2・3) 4.7インチ 375×667 [6/6s/7/8] Plus 5.5インチ 414×736 [X/XS/11] Pro 5.8インチ 375×812 [XS/11] ProMax 6.5インチ 414×896 [XR/11] 6.1インチ 414×896 [12/13] mini 5.4インチ 414×780 12/13[12/13] Pro 6.1インチ 390×844 [12/13] ProMax 6.7インチ 428×926 ==================================*/ /*++++++++++++++++++++++++++++++ html, body 2018.05.10 基本フォントサイズ数を11px→14pxへ修正 2019.03.05 文字の間隔を0.1em　から　0.05emへ 2019.03.06 基本的な大きさをモバイル画面14pxとPC画面16pxとで分ける 2019.08.19 デフォルトの文字色を#333から#111にしてみる 2019/09/18 html,body全体に禁則処理を追加。 これまでバラバラだった禁則処理を標準化。 word-break: break-all; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; 2019/12/07 基本フォントサイズを最低限の大きさとしての14px→18px、16px→20pxへ修正 （もし未指定になっても、最低限表示できるようにする。とくにテーマのヘッダとフッタの調整なため） 2019/12/20 基本フォントサイズを最低限の大きさとしての18px→14pxにして、20pxはコメント化へ修正 html,bodyにフォントサイズを複数出すやり方はメンテナンス性がよくないため。 2019/12/31 html,bodyにムーススクロール機能を追加 scroll-behavior: smooth; 2020/07/18 ラベルの大きさを段落に依存するように変更。 spanタグなので文字の大きさを判定しなくてもよい 2020/07/18 フッター用タブの見出しに下線を出さない 2020/07/19 safariで書体サイズやボタンが自動的に変わるのを防ぐスタイルを挿入 safariでボタンなどにiOS のデフォルトスタイルを適用させない 2020/07/20 html, bodyでline-heightを指定したらいけない。他にエラーが起こっていないか。 2020/07/27 最初に来る見出し1 この書式の適用が冒頭の見出し1のみになるよう「>」を入れる 2020/09/23 画面レイアウト改修に伴う脚注のスタイル改修、左右マージン追加 2020/10/01 letter-spacingを0.05em;から0.02em;へ 2020/10/02 角丸めによって文字がはみ出る左右排他領域の調整 2021/10/17 html, bodyの基本文字色を修正 従来の #252525; だとihponeでははっきりせず目に弱いので これを #111; で色を強調する形にした （2022/07/26予定メモ） html, bodyの font-size: 14pxをfont-size: 1.4rem;に変更する ++++++++++++++++++++++++++++++*/ html, body { font-size: 14px; letter-spacing: 0.02em; /* line-height: 1.7em; */ color: #252525; word-break: break-all; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; scroll-behavior: smooth; overflow-x: hidden; /* 背景色テスト用 */ /*background-color: #cadfff;*/ } /* @media (min-width: 768px) { html, body { font-size: 16px; } } /* =============== 2019.05.02 フッターの幅を拡大、変更 2019.05.12 フッターの幅を拡大、変更するクラス名の修正 .container→.haik-footer .containerに 2020/07/22 フッターの左右マージンを15pxから0.8emにする ===============*/ .haik-footer .container { max-width: 100%; margin-right: auto; margin-left: auto; padding-left: 0.8em; padding-right: 0.8em; } /* =============== 2019.03.14 スタイルシート制作をフッターに表示する 2019/09/19 段落（p）のマージン下を1emから1.5emに拡大 2019/09/19 もう使わないコメント化コードを削除 ===============*/ .haik-licence:before { content: "ARIGATORUSGO 長岡京健康みらい研究所"; color: orange; font-size: 14px; font-weight: 700; } /*================================== 2019.05.10 .haik-xs-nopadding .haik-containerの基本設定 ==================================*/ @media (max-width: 766px) { .haik-xs-nopadding .haik-container { border-radius: 0; } } @media (max-width: 767px) { .haik-container { word-wrap: normal; } .haik-container { padding: 0 10px; } } /* =================== 2019.04.02 .haik-container左右排他領域調整 元はテーマ　Haik cool用として記述したがセレクタ記述により汎用化に成功 2019.05.03 .haik-container左右排他領域調整 　　768px　左右幅調整 2019.05.04 条件セレクタで冗長性を廃止 2019.05.18 .haik-container左右排他領域調整をnagamira_css6.cssから移動 2019.05.18 .haik-container左右排他領域調整。単位をemに 2019/09/11 .haik-containerのpaddingを0でリセットする テーマFLATでpaddingを上下30pxも設定していた。 2019/09/12 768px時のhaik-container右排他領域を8pxから16pxに増やす 2020/01/01 2020/01/01 ul、ol 番号付箇条書き右マージンを1emから0emに修正 2019/12/31 CSSだけでアイキャッチテキスト類のみ下からフェードイン 画面を読み込んだ時、テキスト類のみアニメーションでフェードインする 追加 実験のみ。実際の運用はページ毎に追加する方針で。 何度も見ていると嫌みになるので派手ではない方がいいかも。 2020/01/01 CSSだけでフェードイン 画面を読み込んだ時、.haik-containerの最初の見出し1だけアニメーション 2020/07/21 フルページ、メニューなし画面時の余白を調整する 2020/07/21 画面モードが【wide】の時は1200px以上からワイド画面対応となる それまではdefaultと同じ扱い ===================*/ .haik-container { padding: 0; margin: 30px 0; background-color: inherit; border-radius: 5px; padding-left: 0; padding-right: 0; } /* 2020/07/21 画面レイアウトによって左右マージンの組み合わせを変える HTMLタグで【default】と【wide】のレイアウトが組み合わせになっていることに注意 */ @media (min-width: 768px) { /*【default】*/ .haik-container.haik-content { padding-left: 0.5em; padding-right: 0.1em; } /*【fullpage】&&【landing】*/ .haik-container.haik-fullpage-container, .haik-container.haik-landing-container { padding-left: 0; padding-right: 0; } /*【nomenu】*/ .haik-container.haik-nomenu-container { padding-left: 2em; padding-right: 2em; } } @media (min-width: 993px) { /*【default】&&【wide】*/ .haik-container.haik-content{ padding-left: 1em; padding-right: 1em; } } @media (min-width: 1200px) { /*【wide】*/ .container.haik-fullpage-container { width:90% } } @media (min-width: 1500px) { .container.haik-fullpage-container { width:80% } } /* =============== 2019.05.03 bs_boxなどにおいて最後の行で1emあける .qhm-bs-blockのよくわからない記述で意味があるとは思えなかった子として最後のE要素のマージン下を0emから1emへ修正。 空間が確保されて読みやすくなった last-childは、疑似クラスの一種で、 子として最後のE要素にスタイルを適用する際に使用します。 2019.08.29 なぜbs_boxなどにおいて最後の行であけるのか全く見えてこないので0emに改修したが、 従来のbs_box枠など表示がおかしくなったので互換性のため1emに設定する。 2019/12/29 bs_boxなどにおいて最後の行で1emあけるだが、main.cssの内容を統合したので、予備コメント化する これまでもこの対応が邪魔だったので。 （従来との互換性を重視する場合はこれを使う） ===============*/ /* .qhm-bs-block > p:last-child, .qhm-bs-block > h1:last-child, .qhm-bs-block > h2:last-child, .qhm-bs-block > h3:last-child, .qhm-bs-block > h4:last-child, .qhm-bs-block > div[class*=qhm-align-]:last-child > p:last-child, .qhm-bs-block > div[class*=qhm-align-]:last-child > h1:last-child, .qhm-bs-block > div[class*=qhm-align-]:last-child > h2:last-child, .qhm-bs-block > div[class*=qhm-align-]:last-child > h3:last-child, .qhm-bs-block > div[class*=qhm-align-]:last-child > h4:last-child, .qhm-bs-block > ul:last-child, .qhm-bs-blocl > ol:last-child { margin-bottom: 1em; } */ img { max-width: 100% } /* 2019/09/22 画像にリンクが入ると自動的に左右マージンが入ってしまう仕様を強制的に修正する div.qhm-align-centerの下にある段落の左右マージンを0.4emに戻す。 2019/09/22 div.qhm-align-centerの下にある段落の下マージンを0.5emにする。 カラムタイトルが見やすい */ div.qhm-align-center>p { margin-left: 0.4em; margin-right: 0.4em; margin-bottom: 0.5em; } /* ====== コピー防止確認用ダミー ====== */ .nagamira-default.img { max-width: 100% } /*================================== 2021/09/03 brを無効にする 旧いHTML記述ではbrを入れて空行を作っていたが、見栄えが悪く使えないので廃止。 マージンはCSSで指定する事が求められている ==================================*/ br { display : none ; } /*================================== 2019.05.24 従来のアイキャッチの最大幅を改修 画面のレイアウト設定でクラスの構成が変わるが、 パレット毎にバラバラに記述されていたのを統一する ==================================*/ /*================================== 2019.05.24 従来のアイキャッチの最大幅を改修 画面のレイアウト設定毎にクラスの構成、さらにパレット毎に記述されてわかりにくかったので統一する 画面のレイアウトモードがわかり次第、追加予定 2020/07/13 アイキャッチのマージンを改修margin: 0 30px;→margin: 0 0.5em;へ ==================================*/ .haik-eyecatch-top .container-fluid, .haik-eyecatch-top.haik-fullpage .qhm-section-content, .haik-fullpage-eyecatch.haik-eyecatch-top .container-fluid { max-width: 100%; margin: 0 0.5em; } /*================================== 2019.02.26 通常の段落 最小ポイント数を18ポイントに修正 2019.03.03 メディアクエリ1200px以上の場合を追加 文字間詰め 2019.03.07 行間を2→1.9へ マージン下を2→1.8へ 行間が1.9だと長時間読んでも疲れるので2に戻す。 マージン下も意外に疲れるので2へ 767px以上大きくなる時は左右にマージンを1文字分いれる 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.03.31 768px時のメディアクエリを入れて右側排他領域の調整 2019.04.30 p line-heightの調整2emと1.8emと使い分ける。文字が小さい時は行間を大きく。 2019.05.03 p 段落 768px時の左右マージン調整 2019.08.24 段落で行送りでアドレスを改行していないのでword-break: break-all;を追加。 2019.08.30 文字の大きさを調整 2019.09.02 段落文字の大きさを調整 とくにスマホの解像度の向上で18pxでも読めない場合が出ると予想。 2019/09/18 word-break: break-all; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; を追加。bodyと重複するが、重要なのでこちらでも加える。 2019/09/18 段落（p）の行高を1.8emから1.875emにしてルビがふれる高さに改善 2019/09/19 ルビ文字の大きさを拡大したので段落（p）の行高を1.875emから1.93emに修正 2019/09/19 ルビ文字の大きさを拡大したので段落（p）の行高を1.875emから1.93emに修正したが、意味がないので戻す。 ルビはスマホでは属性が無視される模様。 2019/09/19 段落（p）のマージン下を1emから1.5emに拡大 2019/09/27 iphone5(SE)の解像度(359px)以下に対応 書体の大きさ 2019/12/28 段落にコピー防止にユーザーが選択できないように設定 開発中はコメントにする 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2019/12/30 段落マージンをmargin: 1em 0.5em;に統一 2020/01/17 段落と段落が連結した際の上下マージンを1.875emに空ける 2020/01/18 段落と段落が連結した際の上下マージンだけでなく左右マージンの存在も忘れず。 2020/07/20 モバイル時の段落上下左右マージンを1emに 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 文字段落の大きさは2000px,2500pxで対応 2021/02/11 p(段落)のwhite-space連続する半角スペース、タブ、改行をそのまま表示、それに加えて自動的な折り返しも行います。 white-space: pre-wrap; 2021/08/31 【試作中】段落の文字の大きさをiphone7,8,SE2でも読みやすくする 2022/07/21 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone5,SE margin: 1em 0.8emとする 2022/07/22 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone5,SE font-size: 20px; margin: 1em 0.8em; iphone7,8,SE2 font-size: 20px; margin: 1em 0.8emとする iphone7 PLUS,8 PLUS,XS,XS Pro iphone11,12,13/Pro iphone12,13/Pro/ProMax font-size: 22px; margin: 1em 0.8emとする Android font-size: 20px; margin: 1em 0.8em; 2022/07/23 スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整 iphone5,SE font-size: 18px; margin: 1em 0.8em; 【参考】 5/5s/SE(1) 4.7インチ 320×568 6/6s/7/8/SE(2・3) 4.7インチ 375×667 [6/6s/7/8] Plus 5.5インチ 414×736 [X/XS/11] Pro 5.8インチ 375×812 [XS/11] ProMax 6.5インチ 414×896 [XR/11] 6.1インチ 414×896 [12/13] mini 5.4インチ 414×780 12/13[12/13] Pro 6.1インチ 390×844 [12/13] ProMax 6.7インチ 428×926 ==================================*/ p { line-height: 1.875em; font-size: 20px; color: inherit; margin: 1em; word-break: break-all; line-break: strict; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; } /*iphone5,SE(1)*/ @media (min-width: 320px) { p { font-size: 18px; margin: 1em 0.8em; } } /*Android*/ @media (min-width: 360px) { p { font-size: 20px; margin: 1em 0.8em; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { p { font-size: 20px; margin: 1em 0.8em; } } /* iphone7 PLUS,8 PLUS,XS,XS Pro iphone11,12,13/Pro iphone12,13/Pro/ProMax */ @media (min-width: 390px) { p { font-size: 22px; margin: 1em 0.8em; } } /*モバイル横にした時*/ @media (min-width: 568px) { p { margin: 1em; font-size: 26px; } } @media (min-width: 768px) { p { font-size: 20px; } } @media (min-width: 992px) { p { font-size: 22px; } } @media (min-width: 1200px) { p { font-size: 24px; } } @media (min-width: 1500px) { p { font-size: 26px; } } @media (min-width: 2000px) { p { font-size: 28px; } } @media (min-width: 2500px) { p { font-size: 30px; } } /* 2020/01/17 段落と段落が連結した際の上下マージンを1.875emに空ける 2020/01/18 段落と段落が連結した際の上下マージンだけでなく左右マージンの存在も忘れず。 2020/07/13 段落と段落が連結した際の上下マージンを1.5emに調整 2021/07/20 段落と段落が連結した際の上下マージンをスマホ画面と大画面とで切り替える 空間を取るが、読みやすさを重視して調整 スマホ画面上下マージンを1emに調整 大画面上下マージンを1.875emに調整 */ p+p { margin-top: 1em; margin-bottom: 1em; } @media (min-width: 768px) { p+p { margin-top: 1.875em; margin-bottom: 1.875em; } } /*================================== 2018.09.06 リンク文字の修正 2021/10/17 リンク文字の修正　ラベルの色と重複すること、iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ ==================================*/ a { color: #0070c9; text-decoration: none; } a:hover { color: #0070c9; text-decoration: underline; } /*================================== 目次で表示される文字の大きさを修正 2018.05.04 2019.02.26 最小ポイント数を18ポイントに修正 2019.03.03 メディアクエリ1200px以上の場合を追加 文字間詰め 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019/09/07 目次行の行間を1.8emに統一 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2021/08/31 【試作中】目次で表示される文字の大きさをiphone7,8,SE2でも読みやすくする 2021/09/17 目次の文字の大きさ。モバイル端末の表示を小さくする 大きすぎると行送りが増えるため 2021/10/17 目次リンク文字の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ ==================================*/ .plugin-contents a { font-size: 18px; font-weight: 700; color: #0070c9; line-height: 2em; } /*iphone5,SE*/ @media (min-width: 320px) { .plugin-contents a { font-size: 22px; } } /*Android*/ @media (min-width: 360px) { .plugin-contents a { font-size: 20px; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { .plugin-contents a { font-size: 22px; } } /*モバイル横にした時*/ @media (min-width: 568px) { .plugin-contents a { font-size: 26px; } } @media (min-width: 768px) { .plugin-contents a { font-size: 20px; } } @media (min-width: 992px) { .plugin-contents a { font-size: 22px; } } @media (min-width: 1200px) { .plugin-contents a { font-size: 24px; } } @media (min-width: 1500px) { .plugin-contents a { font-size: 26px; } } @media (min-width: 2000px) { .plugin-contents a { font-size: 28px; } } @media (min-width: 2500px) { .plugin-contents a { font-size: 30px; } } .plugin-contents a:hover { color: #0070c9; text-decoration: underline; } /*================================== ボタンの文字属性、反応をふわっとさせる 2019.03.03 最小ポイント数を18ポイントに修正 メディアクエリ1200px以上の場合を追加 2019.03.07 最小ポイント数を20ポイントに修正、調整 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019/09/13 ボタンの属性を移植。 こちらで使う場合も多いため。 2019/09/13 ボタンに影をつけて立体的に見せる ボタンのタイトルを太字にする テキストシャドウを外す 2019/12/28 360px未満時のボタン文字サイズを追加 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/01/24 ボタンのタイトルを自動的に折り返して表示するよう修正 最小幅を設定してタイトル文字崩れを防ぐ white-space: pre-line; word-break: break-word; min-width: 3.5em; しかし、ブログのカテゴリボタンや検索ボタンでタイトルが崩れる。 ここではコメントアウトして、サムネイル・カラム内で意図的に宣言する。 2020/07/20 ボタンのスタイル属性はBoostrapのbutton.lessに依存、追加のみとする 2020/09/08 ボタンの文字高さ、排他領域を小さく。やや大きくなっているため 2020/09/09 ボタンの枠線スタイルを改修。buttons.lessのサイズだと枠線が細すぎるため ==================================*/ .btn { font-weight: 700; font-size: 18px; border-width: 2px; border-style: solid; border-color: transparent; transition: 0.3s; line-height: 1.3; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1), 0 2px 3px 0 rgba(0, 0, 0, .1); text-shadow: none; } @media (min-width: 360px) { .btn { font-size: 20px; } } @media (min-width: 568px) { .btn { font-size: 22px; } } @media (min-width: 768px) { .btn { font-size: 20px; } } @media (min-width: 992px) { .btn { font-size: 22px; } } @media (min-width: 1200px) { .btn { font-size: 24px; } } @media (min-width: 1500px) { .btn { font-size: 26px; } } @media (min-width: 2000px) { .btn { font-size: 28px; } } @media (min-width: 2500px) { .btn { font-size: 30px; } } /*================================== 2019/09/18 段落内ではボタン上下マージンを調整する 2020/07/07 メニュー内でのボタン折り返しの調整 「検索」ボタンの「検索」が折り返さないようにメニューの段落内のボタンに限定して調整 2020/07/13 ボタンの上下空間が広がるよう上下マージンを0.1emから0.3emに修正 2020/09/08 ボタンの上下空間が広がるよう上下マージンを0.2emから0.2emに修正 2020/09/09 段落内でのボタンの左右空間が広がるよう左右マージンを0から0.2emに修正 2020/09/15 ラベル、見出し内では左右排他領域を0.6emから1emへ広げる ==================================*/ p>.btn { margin: 6px 0.2em; } .haik-menu p>.btn { white-space: pre-line; } /*================================== アイキャッチスタイルを変える 2018.04.26 アイキャッチの文字色、その他のフォントはテーマ編集の設定に依存している 2019.03.03 メディアクエリ1200px以上の場合を追加 2019.03.04 Android用にGoogle日本語フォント対応 'Noto Serif JP' 以下を内に読み込ませておく。 Haikの場合はこのCSSフィルの読み込み記述で併せて宣言 h1,h2,h3 全部同じサイズで出ていたのでわけておく 2019.03.05 メディアクエリで767px以下（モバイル画面）の大きさを小さくする 2019.03.22 WEBフォントのsrc処理とスワップ処理を採用検討。 2019.05.18 Googleフォントで公式機能としてfont-display: swap がサポートされるようになったので対応 ==================================*/ /*================================== 2019.03.22 WEBフォントのsrc処理とスワップ処理を採用検討。 @font-face、font-display: swap;で日本語WEBフォント遅延読み込み処理。 ただしgoogleの方で対応が十分ではない課題がある。 以下のコードをheadタグ内、またはbodyタグ内の末尾前に記述することでfont-display: swap;が書き加えられる。すごい！ #beforescript{{ }} 2019.05.18 Googleフォントで公式機能としてfont-display: swap がサポートされるようになったので対応 3月に研究したHAIKの方でJSによる書き換えを辞めて、以下のコードを使う または埋め込み式では font-family: 'Noto Serif SC'をfont-family: 'Noto Serif JP'に書き換えた 2019.07.06 ブログの新着ブログrecentまじないで下線を復活 ==================================*/ /*================================== 2019.08.31 アイキャッチの見出しにリンクが入っていても解除する HAIKの自動リンクが働く単語が見出しに入ってもリンクが動作しないようにする 2019/09/13 アイキャッチの見出しにリンクが入っていても解除するのはカスタマイズ用としておく。 文字自体にホームへのリンクを入れているものもよくある。リンク文字の変化どうするか？ やはりリンクを入れる事にするただし、リンク文字色が変わらないようにする 2019/09/13 アイキャッチの見出しにリンクが入っても文字色が変わらないのと、 マウスオーバー時はアンダーラインが出る以外は解除しない。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>h1 a, .qhm-eyecatch>.qhm-section>div>div>h1 a, .qhm-eyecatch>.qhm-section>div>div>h2 a, .qhm-eyecatch>.qhm-section>div>div>h2 a, .qhm-eyecatch>.qhm-section>div>div>h3 a, .qhm-eyecatch>.qhm-section>div>div>h3 a, .qhm-eyecatch>.qhm-section>div>div>h4 a, .qhm-eyecatch>.qhm-section>div>div>h4 a, .qhm-eyecatch>.qhm-section>div>div>p>a, .qhm-eyecatch>.qhm-section>div>div>p>a { /*アイキャッチ見出しのリンク飾りを解除する*/ color: inherit; pointer-events: auto; cursor: pointer; } /* 2019/09/13 アイキャッチにボタンが入っていたらリンク無効を解除する アイキャッチのリンクを外部で加工されてしまったときのためのバックアップスタイルシート */ .qhm-eyecatch>.qhm-section>div>div>p>a.btn, .qhm-eyecatch>.qhm-section>div>div>p>a.btn { color: inherit; pointer-events: auto; cursor: default; } /*================================== アイキャッチ用　! ヘッド文字（h1） 2019.03.04 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.31 アイキャッチ見出し（h2,h3,h4,p）の書体大きさ調整 2019.09.02 アイキャッチ見出し（h1,h2,h3,h4,p）の書体大きさ調整 前回の調整が大きすぎたため 2019/09/10 アイキャッチの見出し（h1,h2,h3,h4）ボーダー線を消す テーマによってはアイキャッチの見出しにボーダーが入っているものがあるので消すようにする 2019/09/19 アイキャッチの見出し（h1,h2,h3,h4）左右margin: 0.3em 1em;に統一 2019/12/28 360px未満時のアイキャッチの見出し、本文（h1．h2．h3，h4，p）の文字サイズを追加 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字の大きさは2000px,2500pxで対応 2021/09/02 【試作中】アイキャッチ見出し縁取りをぼかしに修正して見やすくする 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする 2021/09/04 アイキャッチの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は従来通り。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 28px; line-height: 1.3em; margin: 0.5em 0.4em; padding: 0em; font-weight: 700; background-color: transparent; /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ /* font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGP明朝B", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;*/ /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細*/ text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; /* カスタマイズ用 縁取り太*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ color: inherit; border: none; } @media (min-width: 568px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 36px; } } @media (min-width: 768px) { .qhm-eyecatch>.qhm-section>div>div>h1 { margin: 0.5em 1em; line-height: 1.7em; font-size: 36px; } } @media (min-width: 992px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 40px; } } @media (min-width: 1200px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 44px; } } @media (min-width: 1500px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 46px; } } @media (min-width: 2000px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 48px; } } @media (min-width: 2500px) { .qhm-eyecatch>.qhm-section>div>div>h1 { font-size: 50px; } } /*================================== アイキャッチ用　見出し1（h2） 2019.03.04 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019.08.31 アイキャッチ見出し（h2,h3,h4,p）の書体大きさ調整 2019.09.02 アイキャッチ見出し（h1,h2,h3,h4,p）の書体大きさ調整 前回の調整が大きすぎたため 2019/09/10 アイキャッチの見出し（h1,h2,h3,h4）ボーダー線を消す テーマによってはアイキャッチの見出しにボーダーが入っているものがあるので消すようにする 2019/09/19 アイキャッチの見出し（h1,h2,h3,h4）左右margin: 0.3em 1em;に統一 2019/12/28 360px未満時のアイキャッチの見出し、本文（h1．h2．h3，h4，p）,ボタンの文字サイズを追加 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字の大きさは2000px,2500pxで対応 2021/08/31 【試作中】アイキャッチ見出しの大きさをiphone7,8,SE2でも読みやすくする 2021/09/02 【試作中】アイキャッチ見出し縁取りをぼかしに修正して見やすくする 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする サイズ調整 2021/09/04 アイキャッチの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は従来通り。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 26px; line-height: 1.4em; margin: 0.4em 0.8em; padding: 0em; background-color: transparent; font-weight: 700; /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ /* font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGP明朝B", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;*/ /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細*/ text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; /* カスタマイズ用 縁取り太*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ border: none; } @media (min-width: 568px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 32px; } } @media (min-width: 768px) { .qhm-eyecatch>.qhm-section>div>div>h2 { line-height: 1.3em; font-size: 30px; } } @media (min-width: 992px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 34px; } } @media (min-width: 1200px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 38px; } } @media (min-width: 1500px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 40px; } } @media (min-width: 2000px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 42px; } } @media (min-width: 2500px) { .qhm-eyecatch>.qhm-section>div>div>h2 { font-size: 44px; } } /*================================== アイキャッチ用　見出し2（h3） 2019.03.04 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019.08.31 アイキャッチ見出し（h2,h3,h4,p）の書体大きさ調整 2019.09.02 アイキャッチ見出し（h1,h2,h3,h4,p）の書体大きさ調整 前回の調整が大きすぎたため 2019/09/10 アイキャッチの見出し（h1,h2,h3,h4）ボーダー線を消す テーマによってはアイキャッチの見出しにボーダーが入っているものがあるので消すようにする 2019/09/19 アイキャッチの見出し（h1,h2,h3,h4）左右margin: 0.3em 1em;に統一 2019/12/28 360px未満時のアイキャッチの見出し、本文（h1．h2．h3，h4，p）の文字サイズを追加 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字の大きさは2000px,2500pxで対応 2021/08/31 【試作中】アイキャッチ見出しの大きさをiphone7,8,SE2でも読みやすくする 2021/09/02 【試作中】アイキャッチ見出し縁取りをぼかしに修正して見やすくする 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする サイズ調整 2021/09/04 アイキャッチの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は従来通り。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 24px; line-height: 1.5em; margin: 0.6em 0.5em; padding: 0em; font-weight: 700; background-color: transparent; /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ /* font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGP明朝B", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;*/ /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細*/ text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; /* カスタマイズ用 縁取り太*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ border: none; } /*モバイル横にした時*/ @media (min-width: 568px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 30px; } } @media (min-width: 768px) { .qhm-eyecatch>.qhm-section>div>div>h3 { line-height: 1.3em; font-size: 28px } } @media (min-width: 992px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 32px } } @media (min-width: 1200px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 36px } } @media (min-width: 1500px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 38px } } @media (min-width: 2000px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 40px } } @media (min-width: 2500px) { .qhm-eyecatch>.qhm-section>div>div>h3 { font-size: 42px } } /*================================== アイキャッチ用　見出し3（h4） 2019.03.04 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019.08.31 アイキャッチ見出し（h2,h3,h4,p）の書体大きさ調整 2019.09.02 アイキャッチ見出し（h1,h2,h3,h4,p）の書体大きさ調整 前回の調整が大きすぎたため 2019/09/10 アイキャッチの見出し（h1,h2,h3,h4）ボーダー線を消す テーマによってはアイキャッチの見出しにボーダーが入っているものがあるので消すようにする 2019/09/10 見出し4　文字色を上位継承する記述の書き忘れの補足 2019/09/19 アイキャッチの見出し（h1,h2,h3,h4）左右margin: 0.3em 1em;に統一 2019/12/28 360px未満時のアイキャッチの見出し、本文（h1．h2．h3，h4，p）の文字サイズを追加 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字の大きさは2000px,2500pxで対応 2021/08/31 【試作中】アイキャッチ文字の大きさをiphone7,8,SE2でも読みやすくする 2021/09/02 【試作中】アイキャッチ見出し縁取りをぼかしに修正して見やすくする 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする サイズ調整 2021/09/04 アイキャッチの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は従来通り。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 22px; line-height: 1.5em; margin: 0.8em 1em; padding: 0em; font-weight: 700; color: inherit; /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ /* font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HGP明朝B", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;*/ /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細*/ text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; /* カスタマイズ用 縁取り太*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ border: none; } @media (min-width: 568px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 28px; } } @media (min-width: 768px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 24px line-height: 1.3em } } @media (min-width: 992px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 24px; } } @media (min-width: 1200px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 26px; } } @media (min-width: 1500px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 28px; } } @media (min-width: 2000px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 32px; } } @media (min-width: 2500px) { .qhm-eyecatch>.qhm-section>div>div>h4 { font-size: 36px; } } /*================================== 2019.09.04 アイキャッチ見出し（h1,h2,h3,h4）のサブ見出し追加 元スタイルシートではh4の記述漏れがあった ==================================*/ .qhm-section>div>div>h1>small, .qhm-section>div>div>h2>small, .qhm-section>div>div>h3>small, .qhm-section>div>div>h4>small { color: inherit; font-weight: inherit; font-size: 85%; } /*================================== アイキャッチ用　段落 2019.03.04 2019.03.22 font-display: swap;　を追加。ただしchrome60以上のみ対応 WEBフォントのインポートを採用。これでherf 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.19 アイキャッチの文字縁取りを黒にして背景を問わず読めるようにする 2019.08.29 アイキャッチ用の書体をWEBフォントを使わない設定でコメント化する カスタマイズで必要な場合はWEBフォントを使うようにする （h1,h2,h3.h4､p） 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019.08.31 アイキャッチ見出し（h2,h3,h4,p）の書体大きさ調整 2019/09/30 アイキャッチの段落のマージンをmargin: 1em 1em;に揃える 2019/12/28 360px未満時のアイキャッチの見出し、本文（h1．h2．h3，h4，p）の文字サイズを追加 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字段落の大きさは2000px,2500pxで対応 2021/08/31 【試作中】アイキャッチ文字の大きさをiphone7,8,SE2でも読みやすくする 2021/09/03 【試作中】アイキャッチ見出し2pxの太い縁取りを斜め下にも線を引いて修正して見やすくする サイズ調整 2021/09/04 アイキャッチの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は従来通り。 ==================================*/ .qhm-eyecatch>.qhm-section>div>div>p { font-size: 20px; line-height: 1.6em; margin: 1em 1em; padding: 0em; font-weight: 700; /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細*/ text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; /* カスタマイズ用 縁取り太*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ } /*モバイル横にした時*/ @media (min-width: 568px) { .qhm-eyecatch>.qhm-section>div>div>p { line-height: 1.3em; font-size: 24px; } } @media (min-width: 768px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 20px } } @media (min-width: 992px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 22px } } @media (min-width: 1200px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 24px } } @media (min-width: 1500px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 26px } } @media (min-width: 2000px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 28px } } @media (min-width: 2500px) { .qhm-eyecatch>.qhm-section>div>div>p { font-size: 30px } } /*================================== 2019.03.05 モバイル画面用 アイキャッチの絶対空間を確保 @media (min-width: 768px){ .qhm-section>div>.container-fluid { padding: 15px; ｝ } 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019/09/11 アイキャッチの排他領域指定に最優先セレクタを追加して、値を統一する #qhm_section_1 > div > div seedのように整合性を無視して書き換えているテーマがあるためばらつきがある 2019/09/18 アイキャッチの排他領域指定を0にする 排他領域指定が意味の不明な枠となって野暮ったい感じになっていたがこれがよくなった 2020/07/13 セクションの568px時のメディアクエリを廃止 ==================================*/ .qhm-section>div>.container-fluid, #qhm_section_1>div>div { padding: 0px; } /* 2020/07/21 画面レイアウトfullpage時 画面レイアウトnomenu時 のセクションの排他余白を増やす */ .haik-fullpage-content .qhm-section, .haik-nomenu-container .qhm-section{ padding: 0.5em; } @media (min-width: 568px) { .haik-fullpage-content .qhm-section, .haik-nomenu-container .qhm-section{ padding: 1em; } } /*================================== 2020/01/13 見出し初期値 2020/07/11 h1, h2, h3, h4見出し初期値 letter-spacing: .1em;を0.05emに タイトルの字間は少し大きめに広げる ==================================*/ h1, h2, h3, h4 { line-height: 1.7em; letter-spacing: .05em; font-weight: 700; } /*================================== 2020/01/13 見出し0(h1)の属性 追加。 本来は多用する属性ではないのでメイン画面用に記述。 あくまでも見出し2に近いもの Boostrapで設定されているものしか無かったが、使う場合に備えて設置した。 ：!見出しで指定する 2021/01/30 2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し 文字段落の大きさは2000px,2500pxで対応 ==================================*/ .haik-container h1 { font-size: 26px; margin: 2em 0; padding: 0.4em; } @media (min-width: 360px) { .haik-container h1 { font-size: 28px; } } @media (min-width: 568px) { .haik-container h1 { padding: 0.618em; font-size: 36px; } } @media (min-width: 768px) { .haik-container h1 { font-size: 32px; } } @media (min-width: 992px) { .haik-container h1 { font-size: 38px; } } @media (min-width: 1200px) { .haik-container h1 { font-size: 42px } } @media (min-width: 1500px) { .haik-container h1 { font-size: 44px } } @media (min-width: 2000px) { .haik-container h1 { font-size: 46px } } @media (min-width: 2500px) { .haik-container h1 { font-size: 48px } } /*================================== 見出し1の属性 2018.05.04 2019.03.03 メディアクエリ1200px以上の場合を追加 文字間詰め 2019.03.16 見出し1のマージンを修正。スマホで見た時に疲れないように上を1em、下を2em空ける スマホは全てで左右マージンを0に。 2019.03.16 マージン調整　スマホとPC画面を明確に分けてみやすくする スマホは全てで左右マージンを0に。 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.03.31 768px時のメディアクエリを入れてマージンを調整 2019.05.03 見出し（h2,h3,h4）の　768px　以上のマージン調整 2019.08.31 見出し（h2,h3,h4）の書体大きさ調整 2019.08.31 行高さ調整 2019.09.03 768px時の見出し1,2,3の大きさを調整 2019/09/09 見出し（h2,h3,h4）の初期（スマホ時）の書体大きさ調整 見出し（h2,h3,h4）の文字つめ調整 2019/09/11 見出し（h2,h3）のスタイル指定に新しいセレクタを追加する .haik-container～ seedのようにパレット毎に余白などを無駄に書き換えているテーマがあるため 統一する事で見やすくするのとカスタマイズしやすくする 2019/09/12 見出し1字間letter-spacing: .1em;に統一 2019/09/13 見出し（h2,h3,h4）上下マージン調整 見出し（h2,h3,h4）モバイル画面（最小）時文字大きさを小さくして文字数を増やす 2019/09/14 見出し(1,2,3)で英文折り返しが行われていないのを修正 2019/09/15 見出し（h2,h3,h4）上マージン増加・調整 読みやすい記事は上マージンをしっかり取っているため。 2019/09/20 見出し（h2,h3,h4）上下マージン増加・調整 2.875em,1.875emと開きすぎなので2.618em,1.618emに減らした 2019/09/27 iphone5(SE)の解像度(359px)以下に対応 書体の大きさ 2019/12/06 見出し1，2，3の行高を1.7emに修正 2020/01/16 見出し1の排他領域を調整 padding: 0.618em; 相対値に統一 2020/07/13 見出し1のマージン、余白を調整 margin: 3em 0 1em; padding: 0.6em; 2020/07/13 最初に来る見出し1の上マージンを調整 margin: 1.5em 0 1.5em; 2020/07/13 見出し1のモバイル端末時の左右マージン0に margin: 1.5em 0 1.5em; モバイル時の最初に来る見出し1が左右マージン0だが意外に気にならないことで採用 2020/07/27 最初に来る見出し1 この書式の適用が冒頭の見出し1のみになるよう「>」を入れる 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し アイキャッチの文字段落の大きさは2000px,2500pxで対応 2021/09/03 メイン画面の見出し1（h2）をiphoneでも見やすいように大きさを調整 画面が小さいのであまり大きくできない 2021/09/07 メイン画面の見出し1（h2）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 ==================================*/ /* 2019/09/11 最初に来る見出し1 上が開きすぎないようにするため */ .haik-container>h2:first-child { margin: 1.5em 0 1.5em; } /* 2020/07/28 セクションの最初に来る見出し1 上が開きすぎないようにするため */ section h2:first-child{ margin:1em 0.2em 1.5em; } h2, .haik-container h2 { font-size: 24px; margin: 3em 0em 1.5em; padding: 0.6em; } @media (min-width: 360px) { h2, .haik-container h2 { font-size: 26px; } } @media (min-width: 375px) { h2, .haik-container h2 { font-size: 28px; } } @media (min-width: 568px) { h2, .haik-container h2 { font-size: 34px; } } @media (min-width: 768px) { h2, .haik-container h2 { font-size: 30px; margin: 3em 0.2em 1.5em; } } @media (min-width: 992px) { h2, .haik-container h2 { font-size: 36px; } } @media (min-width: 1200px) { h2, .haik-container h2 { font-size: 38px } } @media (min-width: 1500px) { h2, .haik-container h2 { font-size: 40px } } @media (min-width: 2000px) { h2, .haik-container h2 { font-size: 42px } } @media (min-width: 2500px) { h2, .haik-container h2 { font-size: 44px } } /*================================== 見出し2の属性 2018.05.04 2019.03.03 メディアクエリ1200px以上の場合を追加 文字間詰め 2019.03.03 2行以降の字下げの自動設定 2019.03.05 字下げがテーマによっては失敗になるのでコメント化 2019.03.07 行間、フォントサイズ調整 2019.03.16 マージン調整　スマホとPC画面を明確に分ける スマホは全てで左右マージンを0に。 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.03.31 768px時のメディアクエリを入れてマージンを調整 2019.05.03 見出し（h2,h3,h4）の　768px　以上のマージン調整 2019.08.31 見出し（h2,h3,h4）の書体大きさ調整 2019.08.31 行高さ調整 2019.09.03 768px時の見出し1,2,3の大きさを調整 2019/09/09 見出し（h2,h3,h4）の初期（スマホ時）の書体大きさ調整 見出し（h2,h3,h4）の文字つめ調整 2019/09/11 見出し（h2,h3）のスタイル指定に新しいセレクタを追加する .haik-container～ seedのようにパレット毎に余白などを無駄に書き換えているテーマがあるため 統一する事で見やすくするのとカスタマイズしやすくする 2019/09/12 見出し2字間letter-spacing: .1em;に統一 2019/09/14 2019/09/14 見出し(1,2,3)で英文折り返しが行われていないのを修正 2019/09/15 見出し（h2,h3,h4）上マージン増加・調整 読みやすい記事は上マージンをしっかり取っているため。 2019/09/20 見出し（h2,h3,h4）上下マージン増加・調整 margin: 1.618em 0 1.618em;→margin: 1.618em 0 .875em; 2019/09/27 iphone5(SE)の解像度(359px)以下に対応 書体の大きさ 2019/12/06 見出し1，2，3の行高を1.7emに修正 2019/12/08 見出し2の左右排他領域を0.618emに広げる 2019/12/23 見出し2の左右マージンを0にセット 2019/12/28 見出し2,3の上下マージンを調整 セクションの見出し2，3を改修したのに伴う措置 margin: 2em 0 1.5em;に統一 2020/01/16 見出し2の上下マージンを調整 padding: 0.3em 0.618em 0.3em 0.618em; margin: 2em 0 1.5em; 相対値に統一 2020/09/27 見出し2の左右マージン修正 モバイル画面時 margin: 2.5em 0.25em 1.5em; 568px以上時 margin: 2.5em 0.5em 1.5em; 2021/01/30 2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し 2021/09/03 メイン画面の見出し2（h3）をiphoneでも見やすいように大きさを調整 画面が小さいのであまり大きくできない 2021/09/07 メイン画面の見出し2（h3）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 ==================================*/ h3, .haik-container h3 { font-size: 24px; padding: 0.3em 0.618em 0.3em 0.618em; margin: 2.5em 0.25em 1.5em; } @media (min-width: 360px) { h3, .haik-container h3 { font-size: 24px; } } @media (min-width: 375px) { h3, .haik-container h3 { font-size: 26px; } } @media (min-width: 568px) { h3, .haik-container h3 { font-size: 30px; margin: 2.5em 0.5em 1.5em; } } @media (min-width: 768px) { h3, .haik-container h3 { font-size: 26px; } } @media (min-width: 992px) { h3, .haik-container h3 { font-size: 32px; } } @media (min-width: 1200px) { h3, .haik-container h3 { font-size: 36px } } @media (min-width: 1500px) { h3, .haik-container h3 { font-size: 38px } } @media (min-width: 2000px) { h3, .haik-container h3 { font-size: 40px } } @media (min-width: 2500px) { h3, .haik-container h3 { font-size: 42px } } /*================================== 見出し3の属性 2018.05.04 パネル、アコーディオンなどの見出しもこの見出しが兼ねていることがある 2019.03.03 メディアクエリ1200px以上の場合を追加 文字間詰め 2019.03.07 行間、フォントサイズ調整 マージンを大きくする 2019.03.13 メディアクエリ768px以上の字下げの調整 2019.03.16 マージン調整　スマホとPC画面を明確に分ける スマホは全てで左右マージンを0に。 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.03.31 768px時のメディアクエリを入れてマージンを調整 2019.05.03 見出し（h2,h3,h4）の　768px　以上のマージン調整 2019.08.26 見出しの文字間を広げる 2019.08.28 見出しのマージン調整 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019.08.31 見出し（h2,h3,h4）の書体大きさ調整 2019/09/09 見出し（h2,h3,h4）の初期（スマホ時）の書体大きさ調整 見出し（h2,h3,h4）の文字つめ調整 2019/09/11 見出し（h2,h3）のスタイル指定に新しいセレクタを追加する対象に見出し３（h4）がならなかったのは h4がアコーディオンパネルの見出しに使われていたため。 2019/09/14 見出し(1,2,3)で英文折り返しが行われていないのを修正 2019/09/15 見出し（h2,h3,h4）上マージン増加・調整 読みやすい記事は上マージンをしっかり取っているため。 2019/09/16 見出し（h4）最小表示時の上下マージン調整　2.618em→1.618emへ 2019/09/20 見出し（h2,h3,h4）上下マージン増加・調整 margin: 1.618em 0 1.618em;→margin: 1.618em 0 .875em; 2019/09/27 iphone5(SE)の解像度(359px)以下に対応 書体の大きさ 2019/12/06 見出し1，2，3の行高を1.7emに修正 2019/12/28 見出し2,3の上下マージンを調整 セクションの見出し2，3を改修したのに伴う措置 margin: .1em .618em 1em .618em;へ統一 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/01/06 見出し3の上下マージンを調整 2020/08/15 h4のみだったのをh4, .haik-container h4に修正 セクション内での変更で記述ミスが最小限になるようにするため 2020/09/15 見出し3がわからず見づらいので左右マージンを減らして調整 2021/01/30 2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し 2021/09/03 メイン画面の見出し3（h4）をiphoneでも見やすいように大きさを調整 2021/09/07 メイン画面の見出し3（h4）をモバイルでiphoneとAndroidの違いが少なくなるよう調整 ==================================*/ h4, .haik-container h4{ font-size: 22px; padding: 0px 8px 0px 8px; margin: 2em .6em 1.2em; letter-spacing: .05em; } @media (min-width: 360px) { h4, .haik-container h4{ font-size: 22px; } } @media (min-width: 375px) { h4, .haik-container h4{ font-size: 24px; } } @media (min-width: 568px) { h4, .haik-container h4{ font-size: 28px; letter-spacing: .1em; margin: 2.2em .5em 1.2em; } } @media (min-width: 768px) { h4, .haik-container h4{ font-size: 24px; letter-spacing: .05em; } } @media (min-width: 992px) { h4, .haik-container h4{ font-size: 26px; letter-spacing: .1em; } } @media (min-width: 1200px) { h4, .haik-container h4{ font-size: 30px } } @media (min-width: 1500px) { h4, .haik-container h4{ font-size: 32px } } @media (min-width: 2000px) { h4, .haik-container h4{ font-size: 34px } } @media (min-width: 2500px) { h4, .haik-container h4{ font-size: 36px } } /* ============================== haik-palette テンプレート28色分で指定されている見出しの冒頭のアイコン、画像を消す。 アコーディオン見出しにh4:beforeなどで線やアイコンが指定されていると見た目が邪魔になるため 2018/04/25 2019.03.03 任意で切り替える * 8色分から28色分へ増加 2019.03.07 31色に増加 汎用的に全部記述しておいて、テーマ毎に使っている色だけを選ぶ形をとる 2019.03.12 見出し1，2も追加 2019.05.04 条件セレクタで冗長性を廃止 2019/12/27 見出しの冒頭のアイコン、画像を消す所で重複するパターンを統合 ============================== */ .haik-container h2:before, .haik-container h3:before, .haik-container h4:before { content: none; display: none; } /*================== 検索や問い合わせフォーム オブジェクトの属性 2019/10/12 検索や問い合わせフォームのテキストボックスのマージンと高さを調整 2020/07/19 検索や問い合わせフォームオブジェクトの属性追加調整 2020/07/20 検索や問い合わせフォームオブジェクトの排他余白を相対emに 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し ==================*/ .form-control { font-size: 18px; border-radius: 5px; padding: 0px 0.3em; height: 2em; line-height: 1.8em; } @media (min-width: 360px) { .form-control { font-size: 20px; } } @media (min-width: 568px) { .form-control { font-size: 22px; } } @media (min-width: 992px) { .form-control { font-size: 24px; } } @media (min-width: 1200px) { .form-control { font-size: 26px; } } @media (min-width: 1500px) { .form-control { font-size: 28px; } } @media (min-width: 2000px) { .form-control { font-size: 30px; } } @media (min-width: 2500px) { .form-control { font-size: 32px; } } /*================= 箇条書き、番号つき箇条書き　リスト用 他の li要素と干渉することがあるので 頭の黒ポチ、番号を変えるのは注意を。 2018.04.28 * 2018.03.03 * 大きさ調整 * 2018.03.04 * 大きさ調整 * メディアクエリ1200px以上パターンを追加 * 重複していた内容を統合 * 2018.03.22 * WEBアイコンが行頭に付けられるようになったので左側の絶対領域を1文字開けるように調整。 * padding: 5px 0;→padding: 5px 0 0 1em; * アイコン付と番号付をわけて対応 * 大きくとっているのは枠に対応するため。 * 2018.03.25 * 番号つき箇条書きの子項目が下がり過ぎるので左側の絶対領域を調整 * padding: 5px 0;→padding: 5px 0 0 0.5em; 2019.03.27 568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。 2019.09.05 箇条書きの左排他領域を0.2emから0emに 2019.09.05 箇条書きのスマホ時左側マージン1emから8pxに 2019.09.05 ulは標準だと padding-inline-start: 40px; だが、このままだと使い勝手が悪いので値を変える。 2019/09/07 20pxに調整 .plugin-contents ulも合わせてmargin:の値に注意する 2019/12/25 箇条書きのレスポンシブ対応調整。360px時のサイズを追加。 2019/12/26 箇条書き、番号付箇条書きのマージンを調整 2019/12/28 番号付リストの書式指定で、.plugin-contents ul,.haik-container li.list1,ul.list1の記述は不要 統一へ 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2019/12/30 行間を1.8emに統一。 =================*/ .haik-container ol.list1 { line-height: 1.8em; margin-left: 2em; font-size: 18px; } /*================= 番号つき箇条書き アイコンつき箇条書きの字下げ属性 アイコンつき箇条書きの字下げ属性を上書きする * 2018.03.25 番号つき箇条書きの子項目が下がり過ぎるので左側の絶対領域を調整 2019.03.27 568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。 2019.05.03 箇条書きマージンと排他領域の調整 2019.09.02 番号つき箇条書きの大きさ調整 2019.09.05 箇条書きで行送りインデントを導入。 2019.09.05 ナビとタブ、箇条書きのクラスが似ているので衝突しないようにクラスを明示して分ける 2019.09.06 箇条書きで行送りインデントのクラスを箇条書き（クラスlist1）のみに適用されるようにした。 インデント明示してをコメント化して動作チェック 2019/09/07 箇条書きのインデントを改善して上マージンを増やして視認性を向上 2019/09/10 箇条書き行間を広げて読みやすくする 箇条書き字下げを修正 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/07/17 箇条書きの書式調整 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し =================*/ /* 2019/09/10 箇条書き行間を広げて読みやすくする 箇条書き字下げを修正 また、padding-left: 0px;にすることでデフォルトの20pxを修正、 これで箇条書きが左に詰められて見やすくなった */ .haik-container ul>li>ul { margin: 5px 0; padding-left: 0px; } /* 箇条書きで行送りインデントを導入。 行送り時に見やすくなった。 list2,list3は予備として確保 2019/12/25 箇条書きのアイコンを変えたのでtext-indentを-1.3emから-1.2emに修正 2019/12/27 箇条書きの位置調整、左マージン、左排他領域を1emに 2019/12/27 箇条書きのテキストインデントを1.2emに 2019/12/30 箇条書きリストの上マージン統合につき、記述廃止 2019/12/30 箇条書き全体の右マージン1emを追加 2020/01/05 箇条書き単体の行間を1.8emに設定 */ .haik-container ul.list1>li, .haik-container ul.list2>li, .haik-container ul.list3>li { margin-left: 1em; margin-right: 1em; text-indent: -1.2em; padding-left: 1em; line-height: 2em; } /* ul アイコンあり箇条書き*/ /* ol 番号付箇条書き 2019/12/26 ol 番号付箇条書き左マージンを1emから0emに修正 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/01/01 ul、ol 番号付箇条書き右マージンを1emから0emに修正 */ .haik-container ul, .haik-container ol { margin-left: 0em; margin-right: 0em; padding: 0; font-size: 18px; } /* 2019/12/30 箇条書き単体　上下マージン設定 */ li { margin: 0.5em 0em; } /* 2019/12/30 箇条書き WEBアイコンつき箇条書き ol 番号付箇条書き 書体サイズ指定統合 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 2021/08/31 【試作中】箇条書き、WEBアイコンつき箇条書き、ol 番号付箇条書きの大きさをiphone7,8,SE2でも読みやすくする 2022/07/26 箇条書き、WEBアイコンつき箇条書き、ol 番号付箇条書きの大きさを段落の大きさに合わせる */ /*iphone5,SE*/ @media (min-width: 320px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 18px; } } /*Android*/ /*iphone7,8,SE2*/ @media (min-width: 360px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 20px; } } /* iphone7 PLUS,8 PLUS,XS,XS Pro iphone11,12,13/Pro iphone12,13/Pro/ProMax */ @media (min-width: 390px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 22px; } } /*モバイル横にした時*/ @media (min-width: 568px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 26px; } } @media (min-width: 768px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 20px; } } @media (min-width: 992px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 22px; } } @media (min-width: 1200px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 24px; } } @media (min-width: 1500px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 26px; } } @media (min-width: 2000px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 28px; } } @media (min-width: 2500px) { .haik-container ul>li, .haik-container ol>li, .haik-container ol.list1 { font-size: 30px; } } /* タブマージン 2019/12/26 タブと箇条書き、番号付箇条書きが共用になっているので設定されているマージンを外す。 */ .haik-container .nav.nav-tabs { margin-left: 1em; margin-right: 0.5em; } /* 2020/07/11 セクション内のタブに上左右の空白を作る セクション内のタブの背景を透明色にする */ .qhm-section .nav.nav-tabs { margin-top:1em; margin-left: 0.5em; margin-right:0.5em; } .qhm-section .nav-tabs>li>a { background-color: #9e9e9eb0; } /*================= Pre記述 ソースなどを記述する 「このページの差分」画面でも使われている 2018.05.03 文字の大きさ、行間を調整 2018.05.04 スマホで文字が小さすぎる事が判明、修正 2019.03.03 メディアクエリ1200px以上パターンを追加 2019.03.15 見え方を読みやすく調整。 主にコードを記述するpreの見え方を読みやすく、書体や大きさなどを調整。 HAIKでは「引用」扱いになっているがまちがい。 Bootstrapの仕様に近づけた。 2019.03.27 568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。 2019.05.05 pre　margin全て見直し pre　枠の色見直しと角丸めを廃止 2019.05.09 pre　スマホで文字がまだ小さすぎる事が判明、修正 2019.09.02 pre　スマホで文字が大きすぎて字数が減るので調整 2019/09/12 pre　border-radiusを0から8pxへ 角が出ているのでアコーディオンパネルと区別するため 2019/09/18 禁則処理のword-break: break-all;を削除してクラスhtml,bodyに統一。 句読点で折り返しができないことがあるため。 2019/09/18 pre上下マージンを0から1.875emへ 2019/09/23 preの背景と枠線を水色に。グレー系党では英文字が文字見づらいと感じる事が多くあるため。 2019/09/27 iphone5(SE)の解像度(359px)以下に対応 書体の大きさ 2019/10/02 preの上下マージンを大きくする。干渉が発生していた。 2020/01/06 preの文章の行高さを1.6emから1.8emへ修正 2020/07/16 preのマージンを調整、メニュー用のスタイルを用意 2020/07/20 preのマージンを調整 2020/07/22 preのモバイル画面568px未満時、左右マージンを1emから0.5emへ 2020/09/09 preの書体を修正、Consolasを優先フォントに。日本語が綺麗に出る。 Menloだと日本語がメイリオになるので汚い 2020/09/09 preの背景と文字色を調整 黒文字とグレーの組み合わせをチェック 背景が白だとコントラスト差が激しいと目が疲れるのでグレー枠線と水色系背景に修正 2020/09/10 preの大きさ、マージン、排他領域の調整 2020/10/02 pre角の丸めを12pxから0へ　アコーディオンパネルやボタン類と区別するため 2020/10/02 preモバイル画面時の左右マージンが詰まりすぎないように調整する （iphoneSEサイズでは左右が詰まる傾向がある） 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 2021/02/11 preの背景色を調整。white-spaceを追加。角丸めを復活 2021/08/31 【試作中】preの文字の大きさをiphone7,8,SE2でも読みやすくする =================*/ pre { font-family: Consolas,Monaco,"Menlo","Courier",monospace,ui-sans-serif; border: solid 1px #dcdcdc; color: #333; background-color: #e1f4f9; display: block; padding: 0.8em 0.5em; line-height: 1.8; overflow: auto; white-space: pre-wrap; margin: 1.5em 0.7em; } /*iphone5,SE*/ @media (min-width: 320px) { pre { font-size: 24px; } } /*Android*/ @media (min-width: 360px) { pre { font-size: 20px; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { pre { font-size: 24px; } } /*モバイル横にした時*/ @media (min-width: 568px) { pre { font-size: 26px; margin: 1.875em 1em; padding: 1em 0.8em; } } @media (min-width: 768px) { pre { font-size: 20px; } } @media (min-width: 992px) { pre { font-size: 22px; } } @media (min-width: 1200px) { pre { font-size: 24px; } } @media (min-width: 1500px) { pre { font-size: 26px; } } @media (min-width: 2000px) { pre { font-size: 28px; } } @media (min-width: 2500px) { pre { font-size: 30px; } } /* 2020/10/02 アコーディオンパネル内のpreの左右マージンを画面の大きさで可変する調整 字数を確保する */ .orgm-accordion pre { margin-left: 0.3em; margin-right: 0.3em; } @media (min-width: 992px) { .orgm-accordion pre { margin-left: 0.5em; margin-right: 0.5em; } } .haik-menu pre, .haik-article-menu pre{ margin: 1em 0.3em; } /*================= 2018.04.28 定義語 + 説明 2019.03.03 メディアクエリ1200px以上パターンを追加 2019.03.27 568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 2021/08/31 【試作中】定義語 + 説明の文字の大きさをiphone7,8,SE2でも読みやすくする =================*/ dd, dt { font-size: 20px } /*iphone5,SE*/ @media (min-width: 320px) { dd, dt { font-size: 24px; } } /*Android*/ @media (min-width: 360px) { dd, dt { font-size: 20px; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { dd, dt { font-size: 24px; } } @media (min-width: 568px) { dd, dt { font-size: 26px; } } @media (min-width: 768px) { dd, dt { font-size: 20px; } } @media (min-width: 992px) { dd, dt { font-size: 22px; } } @media (min-width: 1200px) { dd, dt { font-size: 24px; } } @media (min-width: 1500px) { dd, dt { font-size: 26px; } } @media (min-width: 2000px) { dd, dt { font-size: 28px; } } @media (min-width: 2500px) { dd, dt { font-size: 30px; } } /*================= blockquote 左側に引用符再定義 2019.03.02　前川修寛 スマホでも見やすく修正 色をピンク、書体を白にしている。 FontAwesomeフォントを使う予定がサイドメニューを表示させると文字化けすることがあるため回避。 大きさがずれる可能性があるが割切る 左ダブル引用符、左ダブルクォーテーションマーク 「“」 "\201d" 右ダブル引用符、右ダブルクォーテーションマーク 「”」 "\201d" 2019/03/04 フォントファミリーを指定 font-family: 'Noto Serif JP',"游明朝","Yu Mincho","YuMincho","ヒラギノ明朝 ProN","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝", "MS PMincho","MS 明朝",serif 2019/03/07 メディアクエリで767ｐｘ以上のパターンを用意 2019/04/01 線をグレーにして色をマッチしやすくする 2019/05/13 最後の1行を斜め太字にして引用元を記述する 2019/09/16 blockquoteで長くわからなかった上下枠のズレをtop、bottom属性を-1にして解消 2019/09/19 引用がパネルと混同しやすいので形を角張るように修正 引用符のみで背景色を廃止。 font-family:を修正 枠線の太さ、メディアクエリを整理 2019/10/08 引用符の書体を改修 rem単位を試験的に採用 2019/12/07 基本サイズを大きくしたので引用符の大きさを3から4remへ修正 2019/12/23 blockquoteアイコンの書体を FontAwesome;に変更　端末毎に書体が変わるため統一する。 2019/12/26 引用の枠線の太さの改修と角の丸めを6pxから12pxに大きくする 引用のシャドウを廃止して、枠線色をオレンジに替える 2020/01/04 引用符の大きさを3から4へ、位置の調整 2020/07/22 引用の枠のモバイル画面568px未満時、左右マージンを1emから0.5emへ 2020/09/11 セクション内での引用の文字色をグレーに指定 枠線種類指定の重複を修正 2020/11/16 blockquoteのデザインを変更 ダブルクオーテーションの位置を変更 オレンジ色を水色に変更 角丸めを減らす 枠線の太さを変更、枠線の色をグレーに修正 2020/11/24 ダブルクオーテーションの位置と大きさを再度変更 小さすぎたため =================*/ blockquote { margin: 0 0 0px; position: relative; padding: 25px 15px; box-sizing: border-box; color: #333; border: 2px solid #6d6d6d; border-radius: 5px; margin: 2.5em 0.5em 1.5em; } @media (min-width: 768px) { blockquote { border-width: 3px; margin: 3em 0.5em; } } @media (min-width: 992px) { blockquote { border-width: 4px; } } @media (min-width: 1500px) { blockquote { border-width: 5px; } } blockquote:before { display: inline-block; position: absolute; top: -20px; left: 15px; width: 45px; height: 45px; vertical-align: middle; text-align: left; font-family: FontAwesome; content: "\201c"; color: #77c0c9; background-color: white; font-size: 7rem; line-height: 1em; font-weight: 900; } blockquote:after { display: inline-block; position: absolute; bottom: -22px; right: 10px; width: 45px; height: 45px; vertical-align: middle; text-align: left; font-family: FontAwesome; content: "\201d"; color: #77c0c9; background-color: white; font-size: 7rem; line-height: 1em; font-weight: 900; } blockquote p { position: relative; padding: 0; margin: 0.5em; z-index: 3; line-height: 1.8em; } /*セクション内での文字色はグレーに*/ section blockquote p { color:#cacaca; } blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child { margin-bottom: 0; } /* 最後の1行を太字にして引用元を記述する 1行しかない場合は全体が太字になる。 */ blockquote p:last-child { font-weight: 900; } /* cite属性はシステムとしても使用価値が不明なので使用する意味はないといっていいでしょう。 */ /* blockquote cite { position: relative; z-index: 3; display: block; text-align: right; font-size: 0.9em; } */ /* =============== 主にフッターの検索ボタン 高さの調整　 2018.05.09　レスポンシブル対応 フォントサイズが変化するので調整 btnクラスを呼んでいる。 2019/12/25 検索ボタンの高さを調整。書体によって高さが変わるので高さを固定する。 2019/12/27 検索ボタンの高さと配置を調整。書体によって高さが変わるので高さを固定する。 2020/01/15 検索ボタンだけでなく、メールフォームの確認ボタンも兼用している事が判明 ボタンの高さ指定を解除、検索ボタン指定をコメント化。 [placeholder="検索ワード"]の幅を縮めて見た目を改善。 2020/09/27 もう半年以上使わないコードを削除 ===============*/ .form-inline .input-group>.form-control[placeholder="検索ワード"] { width: 98%; } /* =============== 2019.03.03 フッターの文字 p 大きさ定義 2019.03.03 .haik-footer p　のみでは変更できないので色毎に記述する * 8色分から28色分へ増加 2018.03.07 31色に増加 汎用的に全部記述しておいて、テーマ毎に使っている色だけを選ぶ形をとる 2018.03.29 768pxのメディアクエリを568ｐｘと兼用にする 2019.05.03 フッターの文字 p 大きさ定義 条件セレクタを使った記述に切り替え 2019/09/09 フッターの文字 p 左右マージンを0.5em設定 見やすくなった 2019/09/21 フッターの文字 p 下マージンを1em設定 見やすくなった 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2019/12/31 フッターの文字 p 上マージンを1em設定 2021/01/30 2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 2021/09/01 【試作中】フッターの段落の文字の大きさをiphone7,8,SE2でも読みやすくする =============== */ .haik-footer p { font-size: 20px; margin: 1em 0.5em; } /*iphone5,SE*/ @media (min-width: 320px) { .haik-footer p { font-size: 24px; } } /*Android*/ @media (min-width: 360px) { .haik-footer p { font-size: 20px; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { .haik-footer p { font-size: 24px; } } /*モバイル横にした時*/ @media (min-width: 568px) { .haik-footer p { font-size: 26px; } } @media (min-width: 768px) { .haik-footer p { font-size: 20px; } } @media (min-width: 992px) { .haik-footer p { font-size: 22px; } } @media (min-width: 1200px) { .haik-footer p { font-size: 24px; } } @media (min-width: 1500px) { .haik-footer p { font-size: 26px; } } @media (min-width: 2000px) { .haik-footer p { font-size: 28px; } } @media (min-width: 2500px) { .haik-footer p { font-size: 30px; } } /* ==================================== 2019．03．05 視認性をあげるため見出し1,2を読みやすくする h2,h3を対象に　28色分 まだない色がわかったら追加すること バックグラウンドの色を消すが、必要に応じて改修する haik_flat では見出し1が帯タイトルになっているので使う場合は内容をコメントアウトする 2019．03．10 31色に増加 汎用的に全ての31色で指定しているのでhaik_flatなどで見出し1、2の白抜き帯または色つき文字が必要なら「視認性をあげるため見出し1,2,3を読みやすくする」項目の内容の文字色指定をコメントアウトしたスタイルシートを別途用意する。 条件セレクタを使った記述に切り替えた それぞれの31行分が1行に統合されて大幅に減った 2019.05.10 見出し注意書きで使われるsmall書式の修正を追加 2019.05.29 見出し文字の背景を透明にする 2019.08.27 サブ見出しの書式を改修 　見出し+サブ見出し　サブタイトルを付けたいと時に便利。 (例)* ここに見出し ###サブ見出し### (例)* ここに見出し&br###サブ見出し### なお、見出し3では多用しない方がよい。 2019.09.04 サブ見出しの書式に h2 h3 h4 .haik-container .haik-menu .haik-article-menu .haik-footer を追加 2021/08/31 【試作中】見出し1～3のsmall（サブタイトル）書体大きさをモバイル版で見やすいように％を調整 ====================================*/ .haik-container h2 { color: #333; background-color: transparent; } .haik-container h3 { color: #333; background-color: transparent; } /* 2019/09/13 配置のバランス確認用に1px solid; 枠線で囲む 通常はコメントにしておく 2020/01/12 メイン画面の見出し4の初期動作確認用に下4px点線：通常はコメントにしておく */ .haik-container h4 { /* border: 1px solid #ccc; */ color: #333; padding: 0.5em 0em; background-color: transparent; /* border-bottom: dotted 4px #ccc; */ } /* 2019/11/12 見出し1～3のsmall（サブタイトル）書体大きさをモバイル版と大画面とで見やすいように調整 2021/08/31 見出し1～3のsmall（サブタイトル）書体大きさをモバイル版で見やすいように％を調整 2021/09/03 見出し1～3のsmall（サブタイトル）書体大きさをモバイル版で見やすいようにさらに％を調整、統一 */ h2 small, .haik-container h2 small, .haik-menu h2 small, .haik-article-menu h2 small, .haik-footer h2 small { color: #222; background-color: transparent; font-size: 80%; font-weight: 700; line-height: 1em; } h3 small, .haik-container h3 small, .haik-menu h3 small, .haik-article-menu h3 small, .haik-footer h3 small { color: #222; background-color: transparent; font-size: 80%; font-weight: 700; line-height: 2em; } h4 small, .haik-container h4 small, .haik-menu h4 small, .haik-article-menu h4 small, .haik-footer h4 small { color: #333; background-color: transparent; font-size: 80%; font-weight: 700; line-height: 2em; } /* ==================================== 2019.03.30 メインコンテンツの見出し1，2，3（h2,h3,h4）のリンク文字がテーマカラーに変わらないようにする。 ページ名と一致する文字列が自動リンクした場合に色が変わってしまう機能の誤作動を軽減する。ただし、リンクそのものは生きているのでマウスオーバー時の色はかわる。 リンクさせなくてもいい場合はコメントにしている以下の内容を使う。 pointer-events: none; cursor: default; text-decoration: none; を追加するとリンクに反応しなくなる。 ただし、メニューにあるアコーディオンパネル（h4）やブログ日付タイトルリスト（h2）が巻き添えになるので使う時は注意。 前記した「視認性をあげるため見出し1,2を読みやすくする」で設定した見出しの色と合わせることをお勧めします。 2019/09/09 メインコンテンツの見出し1，2，3（h2,h3,h4）のリンク文字色h2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする ここで設定しているのは基本的なスタイルシートなので、 カスタマイズが必要な場合は上書きしないで属性を継承して設定すること ====================================*/ .haik-container h2 a { color: #333; text-decoration: underline; } .haik-container h3 a { color: #333; text-decoration: underline; } .haik-container h4 a { color: #333; text-decoration: underline; } /* ================= 2019.09.01 メイン見出しリンク文字色マウスオーバー時調整 2019/09/09 メイン見出しリンク文字色マウスオーバー時調整のh2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする 2019/09/09 メイン見出しリンク文字色マウスオーバー時調整のh2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする 2021/10/17 メイン見出しリンク文字色の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ =================*/ .haik-container h2 a:hover { color: #0070c9; text-decoration: none; } .haik-container h3 a:hover { color: #0070c9; text-decoration: none; } .haik-container h4 a:hover { color: #0070c9; text-decoration: none; } /*================================== 2019．03．08 サムネイルの中身を修正する マージンと本文段落のマージンを見やすくする 2019.03.18 thumbnail,cols対応 英単語を改行させるため、 word-break: break-all;を追加 2019.04.03 thumbnailの高さをそろえる方法を発見 あらかじめ最低限の高さを設定しておけばレイアウト崩れはかなり防げる 2019.04.04 メンテナンス性を考慮してnagamira_css6へ移動 こちらの更新は凍結。 互換性を考慮して動作に支障がない事を確認次第、.thumbnail pをのぞき、凍結する。 2019.04.29 .thumbnail pのmarginを0.5emから 0.1emへ 2019.04.29 .thumbnailの枠線を改修。陰をつける メモ：thumbnailの中にbr（改行）が入っているが、これはthumbnailsプラグインで呼び出しているcolプラグインの中で入れている。 スタイルシートではbr（改行）を削除するなどの対応はできない。 2019.05.02 thumbnail互換性のため残していた旧い記述をコメント化 2019.06.01 thumbnail背景色を白に統一。継承しているとわかりにくい事があるため。 2019/09/12 thumbnail大きさを調整 スマホでは空白をできるだけ減らす 2019/09/18 禁則処理のword-break: break-all;を削除してクラスhtml,bodyに統一。 句読点で折り返しができないことがあるため。 2019/09/22 thumbnailの画像を大きく表示するのに伴い、上左右角丸めを0pxに設定。 2019/09/24 thumbnailの背景色を透明にする 2019/10/05 thumbnailのpadding-top: 0へ 上に余白を入れない方がいい 2019/12/27 .thumbnailにtransition: border .2s ease-in-out;を追加 2019/12/28 .thumbnailのボックスシャドウを廃止、枠線を濃く修正 処理が重いため。マウスオーバー時のボックスシャドウはしばらく保留 2020/07/11 .thumbnailの背景色を少し透明にする（親となる） 2020/07/21 マージン上を5%にしてしまっているがこれでよかったのだろうか？ 前の事なので理解しがたいのでコメントにして、整合性を図るようにする ====================================*/ .thumbnail { /* display: block; */ padding-top: 0; /* margin: 0 5% 20px 0; */ margin: 0.5em 0.25em 0.4em; line-height: 1.42857143; background-color: #ffffffd1; border: #e5e5e5 solid 2px; border-radius: 0; /* box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1), 0 2px 3px 0 rgba(0, 0, 0, .1); */ transition: border .2s ease-in-out; } /*================================== 2019．03．08 カラム桁内の段落（P）の記述でメディアクエリ毎に本文を整形する ぶっつけ本番なので、解像度によっては修正が出てくるかもしれない 2019.03.18 thumbnail,cols対応 英単語を改行させるため、 word-break: break-all;を追加 2019.04.29 カラムのマージンを調整。間隔を大きくした。 last-childは、疑似クラスの一種で、 子として最後のE要素にスタイルを適用する際に使用します。 2019.05.03 col-sm-の次のqhm-align-の最後の記述、なぜこのようにするのかよくわからない。 左右マージンを少し広げる形で見た目の差が小さくなるようカバーする。 2019/09/08 カラム桁内の段落（P）左右マージンを微調整して文字数を増やした。 margin-left、-right: 0.4em;→0.29em; 中途半端な数字なのは書体の計算で変わるため スマホ時のカラム2列で文字数が7文字から8文字に増えた なお、メディアクエリで568px以上はmargin-left、-right: 0.4em;になるようにした。 2019/09/12 スマホ時のカラムの左右マージンを0.29emから3pxに固定 2019/09/18 禁則処理のword-break: break-all;を削除してクラスhtml,bodyに統一。 句読点で折り返しができないことがあるため。 2019/09/22 カラムのマージン最小値を調整。左右3pxから8pxに カラムの568px以上のマージン値の記述ミスを修正 2020/07/21 カラム桁内の段落類のマージンを相対単位emに統合 ソースが画長くなるのでメディアクエリ568px～を廃止 2021/10/18 カラムのマージン最小値を調整。 レスポンシブ対応、左右0.25emに 568PX（スマホを横にした時の大きさ）以上の場合に左右0.5em; ====================================*/ div[class^=col-sm-]>p:last-child, div[class^=col-sm-]>h1:last-child, div[class^=col-sm-]>h2:last-child, div[class^=col-sm-]>h3:last-child, div[class^=col-sm-]>h4:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>p:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h1:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h2:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h3:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h4:last-child, div[class^=col-sm-]>ul:last-child, div[class^=col-sm-]>ol:last-child { margin: 0.4em 0.25em; } @media (min-width: 568px) { div[class^=col-sm-]>p:last-child, div[class^=col-sm-]>h1:last-child, div[class^=col-sm-]>h2:last-child, div[class^=col-sm-]>h3:last-child, div[class^=col-sm-]>h4:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>p:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h1:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h2:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h3:last-child, div[class^="col-sm-"]>div[class*="qhm-align-"]:last-child>h4:last-child, div[class^=col-sm-]>ul:last-child, div[class^=col-sm-]>ol:last-child{ margin: 0.4em 0.5em; } } /*================================== 2019．03．18 Boostrapの桁分けの余白の調整 スマホでこれが仇になって余白が大きくなりすぎるので調整 ぶっつけ本番なので、解像度によっては修正が出るかもしれない 左右を絶対値として確保できないか見る。 padding-left: 10px; padding-right: 10px; とする。値をチェックして変えていくこと。 2019．03．18 結果：左余白がなさすぎるのと変化がわからないんで保留する 2019.03.26 Boostrapの桁分けの余白の調整 上の余白がある事でレイアウトがやたらと空いて不便なので調整 margin-top: 10px;→margin-top: 4px;に切り替えてみた。 2019.03.28 rowのマージン修正にともない padding-left: 15px; padding-right: 15px; を修正。これでカラムの排他領域がなくなり、見やすくなる 2019.03.28 .form-horizontal .control-label も影響を受けて居たのでこれも修正。 padding-left: 0px; padding-right: 0px; を修正。これでカラムの排他領域がなくなり、見やすくなる なお、他のテーマでもかなりいじっているのでそれにあわせた調整が必須。 2019.05.15 Boostrapの桁分けの余白の調整にfloat: none;を追加→意味がないので元に戻す 2019/09/14 タイトルが長いボタンなどの桁あふれを防ぐためoverflow: hidden;を追加、 これをするとサムネイルの枠下が隠れてしまうので中止 ====================================*/ .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; margin-top: 0px; padding-left: 0px; padding-right: 0px; } /*======== 2019/09/27 編集画面のカラム指定の幅が狭いのを修正 boostrap.min.css内で割り当てられた値を修正。 83.33333333%を99%に 99％なのは100％にするとipadでレイアウト崩れが起こることがあるため。 ==========*/ @media (min-width: 768px) { .col-sm-10 { width: 99%; } } /*================================== 2019．03．09 ラベルの一部、色を訂正 2019.03.12 色の明度を落としてみた 2019.03.19 他のスタイルシートのラベル書式を統合。 スタイルを変えている 2019.03.24灰色の明度を調整 2019.03.27 568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。 2019.05.03 .label 見た目の調整 2019.05.13 ラベル内で入りきらない場合は改行する ラベルを左寄せに修正 2019.05.29 ラベルであふれた文字は隠す 2019.08.24 ラベルの文字を調整する 運用で大きすぎたり小さすぎたりしたため 2019.09.03 ラベル文字を折り返すように修正。 レスポンシブ対応でレイアウト崩れが起こらないようにするため display: inline-block;にしてラベルの並びを間を空けて並べられるようにした。 2019/09/09 ラベルの行高さを1.0emから1.2emへ修正 2019/09/12 ラベルのpadding:上下を調整して.3emと.4emから上下とも.2emとして、重ならないようにした。 2019/10/12 ラベルの縦位置（vertical-align）を真ん中（middle）に修正 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/01/15 ラベルのコントラスト比を3以上になるように調整。 ユニバーサルデザイン対応を強化 2020/01/15 ラベルの装飾解除にテキストシャドウの解除を追加 2020/06/30 ラベルの上下右マージンの単位をpx固定からem相対に変更 絶対排他領域を修正して余白とバランスをとる 2020/07/18 ラベルの大きさを段落に依存するように変更。 spanタグなので文字の大きさを判定しなくてもよい 2020/08/14 見出し内のラベルを自動で角を丸めて左右排他領域を調整する 2020/08/14 .br_label .labelクラスを追加 「#bs_box(class=br_label)」内での利用または 「#html2(
)～#html2(
)」で囲むと通常の段落内で使う事もできます 2020/09/05 ラベルの「#bs_box(class=br_label)」内での利用または 「#html2(
)～#html2(
)」で囲む利用を廃止 ラベルのクラスに指定できることが判明 ====================================*/ /* ラベル左右マージンと領域、文字サイズ 　親ラベルをここで書き換える 　ボタンと間違わないように角を付ける 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/02/14 ラベルの行間を1.2から1.8に修正 2020/07/12 ラベルsecondary（defaultの別名）新しい色（light,dark）を追加 2020/09/05 ラベルクラスの種類を増やす ラベルに.label.maru,.label.pill shadow borderを追加 （真円） .label.circle （正方形） .label.square （左角丸） .label.maru_left .label.pill_left （右角丸） .label.maru_right .label.pill_right （左上角丸） .label.maru_top_left .label.pill_top_left （左下角丸） .label.maru_bottom_left .label.pill_bottom_left （右上角丸） .label.maru_top_right .label.pill_top_right （右下角丸） .label.maru_bottom_right .label.pill_bottom_right を追加。label関数で指定できるラベルの種類が増えた。 2020/09/07 ラベルの大きさを指定できるように大きさを追加 label関数を改修して引数を判別、自動的にクラスを付加するようにしている ボタンのサイズ指定と同じ 大きいラベル（large,lg）130% 小さいラベル（small,sm）85% かなり小さいラベル（mini,xs）70% 特殊に大きなラベルを追加 かなり大きいラベル（xlarge,xlg）150% あまり大きすぎても小さすぎてもよくない 2020/09/12 ラベルでの単体角丸ラベルの角度、左右マージンの調整 2020/09/13 ラベルでの単体角丸ラベルの角度、0度を追加 でも上書きされて使えないので即廃止 2020/09/13 ラベル角丸、モバイル画面時は左右排他領域を0.5emから1emへ上下排他領域を0.2emに 詰まった印象を改善した 2020/09/15 ラベル、見出し内では左右排他領域を0.6emから1emへ広げる 2020/09/16 ラベル　darkを黒くする クラス　.label.brightを追加したので黒くしても大丈夫と判断 2021/09/04 ラベルに縁取りのサイズをborder（1px）に加えて1～3pxの太さを用意した 2021/09/04 ラベル文字太さ 通常（font-normal)を追加 2021/09/05 ラベルの行高さを1.8emから1.4emに修正。文章内で使う場合、1.8emだと大きすぎる場合があるため。 2021/09/05 ラベルの行高さを修正したのに合わせて、角丸め、正方形、丸ラベルの幅も修正 2021/09/06 ラベルの下からの位置を0.1emから0.3emへ増やす 拡大するとずれが大きくなっていた 2021/10/17 ラベルの黒文字を＃333333から＃111に修正 iphoneで表示するとはっきりしない色だったため また今後細い文字で表示する場合に備えて対応 2021/10/17 ラベル文字細いクラス .label.font-narrow　 ラベル文字太字（標準）.label.font-bold を追加 */ .label { margin: 0.1em 0.3em 0.3em 0; padding: 0 .6em; font-weight: 700; font-size: 100%; border-radius: 2px; display: inline-block; line-height: 1.4em; color: #fff; text-align: left; white-space: normal; vertical-align: middle; text-shadow: none; border:0px #cacacac7; } /* 2021/09/04 ラベル文字太さ 通常（font-normal)を追加 font-weight:500が標準。300だと細くなる。 2021/10/17 ラベル文字細いクラス .label.font-narrow　 ラベル文字太字（標準）.label.font-bold を追加 2021/10/26 ラベル文字の太さをMacで確認して修正 font-weight:200が細字 font-weight:400が標準 2021/11/04 ラベル文字の太さをMacで確認して修正 font-weight:200をfont-weight:100に */ .label.font-normal { font-weight: 400; } /* ラベル文字細い */ .label.font-narrow{ font-weight: 100; } /* ラベル文字太字（標準） */ .label.font-bold{ font-weight: 700; } /* ラベル角丸 */ .label.br_label, .label.maru, .label.pill{ border-radius: 60px; padding: 0.2em 1em; } @media (min-width: 568px) { .label.br_label, .label.maru, .label.pill{ padding:0 .6em; } } /*ラベル真円*/ .label.circle{ padding: 0 .2em; border-radius: 60px; } /*ラベル正方形*/ .label.square{ padding: 0 .2em; border-radius: 0px; } /*ラベル左角丸*/ .label.maru_left, .label.pill_left{ border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 45px; border-bottom-left-radius: 45px; } /*ラベル右角丸*/ .label.maru_right, .label.pill_right{ border-top-right-radius: 45px; border-bottom-right-radius: 45px; border-top-left-radius: 0; border-bottom-left-radius: 0; } /*ラベル左上角丸*/ .label.maru_top_left, .label.pill_top_left{ border-top-left-radius: 45px; border-bottom-left-radius: 0px; padding-left:1em; } /*ラベル左下角丸*/ .label.maru_bottom_left, .label.pill_bottom_left{ border-top-left-radius: 0px; border-bottom-left-radius: 45px; padding-left:1em; } /*ラベル右上角丸*/ .label.maru_top_right, .label.pill_top_right{ border-top-right-radius: 45px; border-bottom-right-radius: 0px; padding-right:1em; } /*ラベル右下角丸*/ .label.maru_bottom_right, .label.pill_bottom_right{ border-top-right-radius: 0px; border-bottom-right-radius: 45px; padding-right:1em; } /* ラベルに縁取りをつける 横幅が若干増えるが高さは同じ 2021/09/04 ラベルに縁取りのサイズをborder（1px）に加えて1～3pxの太さを用意した border(デフォルト) border-1 border-2 border-3 */ .label.border{ border: solid 1px; border-color:#dadadac7; } .label.border-1{ border: solid 1px ; border-color:#dadadac7; } .label.border-2{ border: solid 2px ; border-color:#dadadac7; } .label.border-3{ border: solid 3px ; border-color:#dadadac7; } .label.shadow{ box-shadow: 0px 3px #c5c5c5c7; border-color:#dadadac7; } /*かなり大きいラベル（xlarge,xlg）*/ .label.xlarge, .label.xlg{ font-size: 150%; } /*大きいラベル（large,lg）*/ .label.large, .label.lg{ font-size: 130%; } /*小さいラベル（small,sm）*/ .label.small, .label.sm{ font-size: 85%; } /*かなり小さいラベル（mini,xs）*/ .label.mini, .label.xs{ font-size: 70%; } /* 見出し内では自動で角を丸めて左右排他領域を調整する 2020/10/02 角丸めによって文字がはみ出る左右排他領域の調整 2021/02/08 混乱するため、見出し内でのラベルの角丸めは行わない */ h2>span.label, h3>span.label, h4>span.label { padding: 0 1.3em; font-size:90%; /* border-radius:60px; */ } @media (min-width: 568px) { h2>span.label, h3>span.label, h4>span.label { padding: 0 .6em; } } .label-default, .label-secondary { background-color: #888; } .label-info { background-color: #36a2af; } .label-danger { background-color: #db6868; } .label-primary { background-color: #337ab7; } .label-success { background-color: #409668; } .label-warning { background-color: #ffc818; color: #111; } .label-light { color: #111; background-color: #fafafa; } .label-dark { background-color: #3a3a3a; } /* 2020/09/16 クラス　.label.bright ラベルを明るい系統の色に切り替える ラベル文字が黒文字の方がいい場合に使うとよい */ .label.bright{ color: #111; } .label.bright.label-default, .label.bright.label-secondary { background-color: #d2d2d2; } .label.bright.label-info { background-color: #44c7d6; } .label.bright.label-danger { background-color: #ea7070; } .label.bright.label-primary { background-color: #63acea; } .label.bright.label-success { background-color: #4fb77f; } .label.bright.label-warning { background-color: #ffd54e; } .label.bright.label-light { background-color: #ffffff; } .label.bright.label-dark { color: #111; background-color: #b9b9b9; } /*================================== 2019.03.12 ボタンの色を訂正 色の明度を落としてみた 2019.03.24灰色の明度を調整 2019/09/13 ボタンへマウスオーバー時の色の継承とオーバーライド ボタンへマウスオーバー時の色がどきついので落ち着いた色に書き換えた 2020/01/04 ボタンへマウスオーバー時の色、他テーマとの互換性を廃止したのに伴う修正 2020/07/12 ボタンsecondary（defaultの別名）新しい色（light,dark）を追加 2020/08/24 ボタンのタイプ指定に角、角丸、円を追加 枠線を太くする指定を追加 .btn-border-bold 　枠線を太くする .btn-rounded-pill 角丸 .btn-rounded-0　角 .btn-rounded-circle　円 【注意】CSSの記述順はボタンの色指定の後でないとと正しく出ません 2020/09/09 button.inc.phpの引数でクラス指定で使えるようにクラスを追加 .btn.border,　枠線を太くする .btn.maru,　角を丸くする .btn.pill, 角を丸くする .btn.circle,　角を丸くする .btn.square,　角を直角にする .btn.rounded-0,　角を直角にする を追加。 2020/09/09 ボタン枠線の可変対応。ゴーストボタンで色が変わらなかったのを修正 初期の頃にボタン枠線の太さが固定になっていたのをスタイルごとに変えられるようにした 2020/09/10 ボタンの色を調整 背景を濃い色にしてわかったが、フチが太いボタンではかなり違和感が大きいので修正 warningを黄色に修正して警告の意味を持たせた。 ラベルと色がかぶらないように調整 2020/09/11 ボタンの色を調整。 info,danger,successの色を調整して文字が読めるように修正 ====================================*/ .btn-default, .btn-secondary { color: #fff; background-color: #888; border-color: #e6e6e6; } .btn-default:hover, .btn-default:focus, .btn-secondary:hover, .btn-secondary:focus { color: #333; background-color: #e6e6e6; border-color: #888; } .btn-info { color: #fff; background-color: #308f9a; border-color: #77d0d0; } .btn-info:hover, .btn-info:focus { color: #fff; background-color: #77d0d0; border-color: #308f9a; } .btn-danger { color: #fff; background-color: #d06464; border-color: #ea8983; } .btn-danger:hover, .btn-danger:focus { color: #fff; background-color: #ea8983; border-color: #d06464; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #4eaaf3; } .btn-primary:hover, .btn-primary:focus { color: #fff; background-color: #4eaaf3; border-color: #337ab7; } .btn-success { color: #fff; background-color: #409668; border-color: #4fd087; } .btn-success:hover, .btn-success:focus { color: #fff; background-color: #4fd087; border-color: #409668; } .btn-warning { color: #333; background-color: #ffdf36; border-color: #ffc818; } .btn-warning:hover, .btn-warning:focus { background-color: #ffc818; border-color: #ffdf36; text-shadow: none; color: #333; } .btn-light { color: #333; background-color: #ffffff; border-color: #e2e2e2; } .btn-light:hover, .btn-light:focus { background-color: #e2e2e2; border-color: #ffffff; text-shadow: none; color: #333; } .btn-dark { color: #fff; background-color: #5a5a5a; border-color: #929292; } .btn-dark:hover, .btn-dark:focus { background-color: #929292; border-color: #5a5a5a; text-shadow: none; color: #fff; } /* 2020/09/09 button.inc.phpの引数を追加するのが大変なので オプションだけで使えるように.btn.～で始まるクラスを追加 2020/09/16 ボタンのpadding高さは 通常ボタン、角丸ボタンが6px固定 正方形ボタン、真円ボタンが0.2em可変 */ .btn.border, .btn-border-bold{ border-style: solid; border-width: 4px; } .btn.maru, .btn.pill, .btn-round, .btn-rounded-pill { border-radius: 30px; padding: 6px 0.6em; } .btn.square, .btn.rounded-0, .btn-rounded-0{ border-radius: 0; padding: 0.2em 0.4em; } .btn.circle, .btn-rounded-circle{ border-radius: 45px; padding: 0.2em 0.35em; vertical-align: middle; text-align: center; } /*＝＝＝＝＝＝＝＝＝＝＝＝ 2019/09/13 ワード強調色の彩度が高すぎるので調整 2019/09/15 ワード強調色が明るい系党の色が白飛びしないように書体色を指定する 2019/12/17 ワード強調色を使っている所が検索、スペースで区切った単語ごとにワードを強調しているとわかった。 文字色をそれぞれ読めるようにコントラストを調整 ＝＝＝＝＝＝＝＝＝＝＝＝＝*/ strong.word0 { background-color: #ffd54f; color: #111; } strong.word1 { background-color: #79cece; color: #111; } strong.word2 { background-color: #6dc16d; color: #111; } strong.word3 { background-color: #c77171; color: #FFF; } strong.word4 { background-color: #d650d6; color: #000; } strong.word5 { background-color: #670000; color: #FFF; } strong.word6 { background-color: #008a00; color: #FFF; } strong.word7 { background-color: #735800; color: #FFF; } strong.word8 { background-color: #083f80; color: #FFF; } strong.word9 { background-color: #ab0cab; color: #FFF; } /*＝＝＝＝＝＝＝＝＝＝＝＝ 2019/09/13 ボタンサイズの再設定 .btn-lg　大きいボタン .btn-sm　小さいボタン .btn-xs　かなり小さいボタン 2019年3月時点ではクラスと属性がわからなかったのができるようになった。 これをフォントサイズを％で使うと検索ボタンで使われている.btn-smの大きさがおかしくなるので保留 フォントサイズはPXで指定すること 2019/09/19 ボタンの文字サイズをpx固定からレスポンシブ対応のemサイズ指定にする 0.2em刻みで調整する →これも検索ボタンで使われている.btn-smの大きさがおかしくなる。 Boostrap自体でフォントサイズがPX固定になっているため、どこかでエラーを起こしている。 フォントサイズはPXで指定すること 2019/12/25 ボタンサイズの再設定で .btn-lg　大きいボタン .btn-sm　小さいボタン .btn-xs　かなり小さいボタン の文字の大きさをそれぞれレスポンシブ可変にする 標準ボタンのボタンサイズが可変になっているのでそれに合わせる 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/09/13 ボタンの大きさ指定で、HTMLタグにいちいち書くのが面倒なので.btn.で始まるクラスを別途追加 .btn.large, .btn.lg, .btn.small, .btn.sm, .btn.mini, .btn.xs 2020/09/13 ボタンのサイズでフォントpx指定を廃止、感覚的にわかりやすい%指定に切り返る 2020/09/13 ボタンの大きさでxlarge,xxlargeを追加 .btn.xlarge, .btn.xlg, .btn-xlgを追加 ＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .btn.xlarge, .btn.xlg, .btn-xlg { font-size: 150%; padding: 0.25em 0.45em; } .btn.large, .btn.lg, .btn-lg { font-size: 130%; } .btn.small, .btn.sm, .btn-sm { font-size: 85%; } .btn.mini, .btn.xs, .btn-xs { font-size: 70% } /*＝＝＝＝＝＝＝＝＝＝＝＝ 2019.03.14 ふち取りボタン（ゴースト）の色の再設定 標準のは明度が高く読みづらいため、修正 文字色も読めるように修正 2020/01/04 ふち取りボタンの再設定 左右の丸めを廃止して、通常の四角いボタンのスタイルを継承する main.cssからBoostrap設定を移植 btn-ghostは背景が透明 btn-ghost-wは背景を白色にして使い勝手を修正 2020/01/07 ゴーストボタン、待機時のテキストシャドウを追加して視認性をあげる ゴーストボタンマウスオーバー時のテキストシャドウを追加 ただし、黒文字の場合はテキストシャドウをなしにするよう調整 2020/07/12 ゴーストボタンsecondary（defaultの別名）新しい色（light,dark）を追加 2020/09/09 ゴーストボタン枠線の色指定を親に統合、マウスオーバー時はボタンの太さのみ可変対応 2020/09/10 ゴーストボタン枠線の色調整 ＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .btn.btn-ghost { background-color: transparent; color: #fff; text-shadow: 1px 1px 0 #000; } .btn.btn-ghost-w { background-color: white; color: #333; } .btn.btn-ghost:hover { color: white; } .btn.btn-ghost-w:hover { color: white; text-shadow: 1px 1px 0 #000; } .btn.btn-ghost.border, .btn.btn-ghost-w.bold{ border-width: 4px; } .btn.btn-ghost.border:hover, .btn.btn-ghost-w.bold:hover{ border-width: 4px; } .btn-default.btn-ghost, .btn-secondary.btn-secondary { border-color: #d8d8d8; } .btn-default.btn-ghost:hover, .btn-default.btn-ghost-w:hover, .btn-secondary.btn-ghost:hover, .btn-secondary.btn-ghost-w:hover { background-color: #d8d8d8; color: #111; text-shadow: none; } .btn-info.btn-ghost { border-color: #6ed2de; } .btn-info.btn-ghost:hover, .btn-info.btn-ghost-w:hover { background-color: #6ed2de; } .btn-danger.btn-ghost { border-color: #ff7f77; } .btn-danger.btn-ghost:hover, .btn-danger.btn-ghost-w:hover { background-color: #ff7f77; } .btn-primary.btn-ghost { border-color: #4dadff; } .btn-primary.btn-ghost:hover, .btn-primary.btn-ghost-w:hover { background-color: #4dadff; } .btn-success.btn-ghost { border-color: #5fde9b; } .btn-success.btn-ghost:hover, .btn-success.btn-ghost-w:hover { background-color: #5fde9b; } .btn-warning.btn-ghost { border-color: #ffc818; } .btn-warning.btn-ghost:hover, .btn-warning.btn-ghost-w:hover { background-color: #ffc100; color: #333; text-shadow: none; } .btn-light.btn-ghost { border-color: #fafafa; } .btn-light.btn-ghost:hover, .btn-light.btn-ghost-w:hover { background-color: #fafafa; color: #111; text-shadow: none; } .btn-dark.btn-ghost { border-color: #939393; } .btn-dark.btn-ghost:hover, .btn-dark.btn-ghost-w:hover { background-color: #939393; } /*＝＝＝＝＝＝＝＝＝＝＝＝ 2019.03.14 グラデーションボタンの色の再設定 標準のは明度が高く読みづらいことがあるため、修正 2019/12/25 グラデーションボタンのマウスオーバー時の設定を追加 移植が必須なのに放置していた。 2020/07/12 グラデーションボタンsecondary（defaultの別名）新しい色（light,dark）を追加 ＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .btn-default.btn-gradient, .btn-secondary.btn-gradient { background: linear-gradient(#fff, #646768); border-color: #aaaaaa; color: #fff; } .btn-default.btn-gradient:hover, .btn-secondary.btn-gradient:hover { background: linear-gradient(#fff, #c1c1c1); } .btn-info.btn-gradient { background: linear-gradient(#8fe3e8, #64B1BA); border-color: #64B1BA; color: #fff; } .btn-info.btn-gradient:hover { background: linear-gradient(#8fe3e8, #8fe3e8); } .btn-danger.btn-gradient { background: linear-gradient(#eb7a77, #db4441); border-color: #e53030; color: #fff; } .btn-danger.btn-gradient:hover { background: linear-gradient(#eb7a77, #eb7a77); } .btn-primary.btn-gradient { background: linear-gradient(#51a8dd, #337ab7); border-color: #337ab7; color: #fff; } .btn-primary.btn-gradient:hover { background: linear-gradient(#51a8dd, #51a8dd); } .btn-success.btn-gradient { background: linear-gradient(#62c462, #5BB184); border-color: #5BB184; color: #fff; } .btn-success.btn-gradient:hover { background: linear-gradient(#62c462, #62c462); } .btn-warning.btn-gradient { background: linear-gradient(#f4ca66, #EBA65B); border-color: #EBA65B; color: #111; } .btn-warning.btn-gradient:hover { background: linear-gradient(#f4ca66, #f4ca66); } .btn-light.btn-gradient { background: linear-gradient(#fafafa, #dcdcdc); border-color: #dcdcdc; color: #111; } .btn-light.btn-gradient:hover { background: linear-gradient(#efefef, #fafafa); } .btn-dark.btn-gradient { background: linear-gradient(#9a9a9a, #5a5a5a); border-color: #5a5a5a; color: #fff; } .btn-dark.btn-gradient:hover { background: linear-gradient(#5a5a5a, #9a9a9a); } /*＝＝＝＝＝＝＝＝＝＝＝＝ 2019.03.16 主にリンク切れなどのテキストメッセージに使われているフォントを調整 ＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .haik-container.haik-nomenu-container { font-size: 1.6em; line-height: 1.2em; } /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * scrollup アイコン透明度 、位置設定 * 2018.04.28 * scrollupプラグインのデフォルト設定にフックをかける形で変えています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/ .qhm-plugin-scrollup { opacity: 0.3; font-size: 24px; bottom: 80px; right: 10px; } @media (min-width: 568px) { .qhm-plugin-scrollup { bottom: 48px; } } @media (min-width: 768px) { .qhm-plugin-scrollup { opacity: 0.5; bottom: 65px; font-size: 26px; } } @media (min-width: 992px) { .qhm-plugin-scrollup { bottom: 80px; font-size: 28px; } } /*================================== 2019.03.18 クラス.wellでのword-breakの扱い修正 .well { word-break: break-all; } 通常の設定が word-break: normal; になっているため、そのままだと英単語で改行されないため混乱するため、ここで入れておく。.qhm-bs-box.well.paper_default h2の用に継承している場合は英単語が改行されるか注意すること。 2019.03.27 　左右マージンの調整 2019.04.04 　568px以上時の右マージンの調整 2019.05.03 　568px以上時の右マージンの再設定 2019.08.24 　三角形の誘導枠がうまく表示されないので調整 　それぞれの画面幅でのマージンの調整 2019.08.26 .well一番小さい画面幅でのマージン調整 2019/09/18 禁則処理のword-break: break-all;を削除してクラスhtml,bodyに統一。 句読点で折り返しができないことがあるため。 2019/10/30 .wellで継承されている box-shadow: を消去 2020/08/01 クラス.wellの継承で 編集画面を広くとるためにマージンを0に wellの書式を修正左右マージンを0に padding: 1em;に角丸めを廃止 ==================================*/ .well { margin-left: 0; margin-right: 0; padding: 1em; box-shadow: none; } /* @media (min-width: 568px) { .well { margin-left: 0.2em; margin-right: 0.2em; } } @media (min-width: 992px) { .well { margin-left: 0em; margin-right: 0em; } } */ /*================================== 2019.03.28 Bootstrapのサブセットでrowの値がマイナス値に記述されていたのを改善 margin-left: -15px; margin-right: -15px; これまでサムネイルなどに左右マージンをつけるなどメンテナンス性が悪かった原因がこれと思われる。 .container もあわせて修正 .form-horizontal .form-groupも！ 2019.03.31 .container の左右排他領域を15px→2pxに修正 スマホ時の最小が17pxになるよう調整 2019.04.02 フッターの余白がなくなるのでこれを調整して少しもたせる。 2019.05.04 スマホ画面の左右排他領域10px→8pxに修正 2019.05.11 異なる高さをそろえる 散々試行錯誤して・・・ .container .row { position:initial; float:none; } @media (min-width: 768px){ .container .row { display: flex; flex-flow: row wrap; } } これを追加したらうまくいった 2019.05.12 ipadでレイアウト崩れが起こるのでdisplay: flex;を調査する まずHAIKでは768px未満ではdisplay:flexが無効になるらしくレスポンシブ対応が変わる 2019.05.12 ipadでレイアウト崩れが起こるのでdisplay: flex;を調査する まずHAIKでは768px未満ではdisplay:flexが無効になるらしくレスポンシブ対応が変わる（実際は後述するクラス指定が原因だった） 2019.05.12 前のは.container .rowでクラス指定をしていたので全体にわたって宣言がされてしまっている。 クラス指定を.haik-container.haik-content .rowとすることで避けられる。 これは偶然display: none;にして、コンテナ全体が非表示になる事で気づいた。 2019.05.12 メディアクエリがなくても動作できるようになったので外す 2019.05.12 haik-container用 .haik-footer .haik-menu クラスそれぞれのタグ配置に応じて.rowに display: flex; をセットする 2019.05.14 colsで回り込みが正常にできない事からfloat:left;を復活させてみる。 PC版では異常はでない。ipadではどうなるか確認する。→レイアウト崩れが起こってだめでした。 ベンダープレフィックスをつけてみる 2019.05.15 rowの排他領域をマイナス値にしてみる 2019.03.28の修正で0にしているが、ipadでの動作を確認するため .row { margin-left: -10px; margin-right: -10px; } 【結果】関係なかったが、-5ｐｘで画面を詰める事ができることがわかった 2019.05.15 display:flex関係の記述を整理してすっきりさせる 2019.05.15 display:flexがipadではきちんと機能しないのでカラムの高さをそろえるjquery.matchHeight.jsを使ってカラムをそろえてみる。 display:flexを使った版が以下のバージョン nagamira_css1_201905152032.css nagamira_css6_201905152032.css これを新たにjquery.matchHeight.jsを使った版に書き換える際、floatの復活とdisplay:flexのコメント化のみ しかし、複数クラスがある場合は動かない問題が・・・。 2019.05.16 IE8・9にもFlexboxを対応させるFlexboxのポリフィル「flexibility.js」を導入。 これを「-js-display: flex;」と書いて使う事でFlexboxに対応していないIE 9等のブラウザでもFlexboxが有効になる。 2019.05.16 colsの比率を20％、25％、33.333％、50％ではなく、19％、24％、32％、49％とする 2019.05.16 上下中央揃えjustify-content: space-betweenを適用したが、見送り 2019.05.18 フッター用タブ 水辺中央そろえに改修 flexibility.jsを使うとカラム落ちすること、サポート対象外になったので廃止 ==================================*/ .row { margin-left: 0px; margin-right: 0px; } /* 2020/07/08 レイアウトが#layout(fullpage)指定時はrowの左右余白をなくす 【注意】 #layout(fullpage)ではrowの指定がなくなりHTMLタグが変わる ソースの指定でHTMLを吐き出す所を修正する必要があるが、どこにあるか不明。 */ .haik-fullpage-content .row { margin-left: -4px; margin-right: -4px; } /* 2019.05.29 .haik-container > .rowを追加 .haik-contentの中にコンテンツがに入っていないものがあったので設定 2019/12/22 .haik-container > rowを.haik-container .rowに修正 要素のすぐ子要素限定適用（>）を止めて子孫要素に適用されるようにした */ .haik-container.haik-content .row, .haik-container .row, .haik-footer .container .row, .haik-menu .bar .row { -js-display: flex; display: flex; flex-flow: row wrap; justify-content: center; } /* 2019.05.13 メディアリストのdisplay:を設定するダミー rowを使っているので、これによって衝突を回避する */ .haik-container.haik-content [class^="medialist-"] .row { display: block; } /*=========== 2019.05.11 【例　エラーが起こる書式】 異なる高さをそろえる ipadでレイアウト崩れが起こるので別の記述を試して見る 2019.05.12 display: flex;をdisplay: none; にしてわかったことを。 .container .rowでクラス指定をしているので全体にわたって宣言がされてしまっている。 クラス指定を.haik-container.haik-content .rowとすることで避けられる。 2019.05.23 最大幅1045px以上は対応していないのでcontainer配置は自動にする 2019.09.04 スマホ時などの.container.haik-fullpage-container設定を追加 2019.09.04 ナビの最大幅設定を1045→1200へ 2019/09/24 ナビの最大幅設定を1200→1980へ 2019/09/29 ナビの最大幅設定にテーマ「moi」の独自な解釈のために.container属性の最大幅を追加 2020/07/21 コメント化 2020/09/11 fullpageレイアウトでセクションにアコーディオンパネルを記述すると正常に出なかったためmax-width: 100%　コメント化から復活 ===========*/ .container.haik-fullpage-container { max-width: 100% } /* ナビの最大幅設定 2019/09/24 ナビの最大幅設定を1200→1980へ 2020/07/13 ナビの最大幅設定を1980→100％へ （1980ピクセルを上回る解像度のモニターが出始めた） */ nav .container { max-width: 100%; } @media(min-width:768px) { .container { width: inherit; } } /* 2019/09/29 ナビの最大幅設定にテーマ「moi」の独自な解釈のために.container属性の最大幅max-width: 4980pxを追加 2019/11/06 ナビ余白の排他領域の調整修正の説明を追加 【説明】 テーマcool系のナビ余白の排他領域の設定 （他のテーマではナビ右に余白が出る事がある） 上位containerクラスで左右排他領域を確保している （nagamira_css1.cssのcontainerで確保している） これを .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header で継承しているが、左右の排他領域も継承してしまうのでレイアウトによっては 継承された排他領域を左右マージンにマイナス値を与えて打ち消す必要がある。 以下のクラス .container-fluid>.navbar-header, .container>.navbar-header で継承された排他領域を左右マージンにマイナス値を与えて消す必要がある。 （nagamira_css10にて対応済み） 2019/12/13 ナビのヘッダーの右排他領域を0にする。意味不明な右余白ができるのを防ぐ 2019/12/22 .containerのmax-width:を凍結 .containerの左右排他領域を5pxへ 568px時の.containerの左右排他領域を15pxへ 2020/01/05 567px以下の.containerの左右排他領域を3pxへ 568px時の.containerの左右排他領域を10pxへ 768px時の.containerの左右排他領域を8pxへ 992px時の.containerの左右排他領域を15pxへ モバイル時の.containerの左右排他領域を0pxへ（空間確保のため） 2020/07/21 .containerの左右余白を0にする モバイル端末でセクションを表示する際に余白ができてしまうため .containerの下のクラスhaik-container haik-nomenu-containerなどの表示で余白表示を切り替える */ .container { /* max-width: 4980px; */ margin-right: 0px; margin-left: 0px; padding-left: 0px; padding-right: 0px; } /* @media (min-width: 568px) { .container { padding-left: 0px; padding-right: 0px; } } @media (min-width: 768px) { .container { padding-left: 8px; padding-right: 8px; } } @media (min-width: 992px) { .container { padding-left: 15px; padding-right: 15px; } } */ /* 1200px以上は幅が固定されている場合、.containerを中央に揃えるように自動で左右マージンを設定する */ @media (min-width: 1200px) { .container { margin-left: auto; margin-right: auto; } } /*フォームグループの間を空ける*/ .form-group { margin-bottom: 0.7em; } .form-horizontal .form-group { margin-left: 0px; margin-right: 0px; } @media (min-width: 768px) { .form-horizontal .control-label { text-align: left; margin-bottom: 0; padding-top: 0px; } } /*============= 2019.05.23 carousel(スライドショー）用スタイルシート) アイキャッチに入れる時、左右のマージンを自動的に省く プログラムが最大1600PXまでなのでそれ以上は左右のマージンを復活させる ============= */ /* アイキャッチに入れる時、左右のマージンを自動的に省く */ .qhm-eyecatch .carousel.qhm-section.qhm-section-default.qhm-eyecatch .qhm-section-content { margin-left: 0px; margin-right: 0px; } /* 2019/10/09　 予備コメント化→carouselは元が最大1600PXまでなのでそれ以上は左右のマージンを復活させる */ /* @media (min-width: 1601px) { .qhm-eyecatch .carousel.qhm-section.qhm-section-default.qhm-eyecatch .qhm-section-content { margin-left: 0%; margin-right: 0%; } } */ .carousel { position: relative; } /*=========== メインコンテナcarouselスライドショーでの文字サイズ設定 2019.05.24 carouselスライドショーでフォント設定を行う。WEBフォントも読み込める 2020/01/02 メインコンテナでのcarouselスライドショーでh3とpフォント設定を行う。 文字を黒ふちにする なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。 2020/01/02 メインコンテナcarouselスライドショーh3を2つ記述していたので統合 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し ===========*/ .haik-container .carousel-caption h3 { /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ color: white; text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px; font-weight: 700; border: none; margin: 0; font-size: 22px; border: none; padding: 20px 0; background: none; border-left: none; box-shadow: none; } @media (min-width: 360px) { .haik-container .carousel-caption h3 { font-size: 24px; } } @media (min-width: 568px) { .haik-container .carousel-caption h3 { font-size: 28px; } } @media (min-width: 768px) { .haik-container .carousel-caption h3 { font-size: 26px; } } @media (min-width: 992px) { .haik-container .carousel-caption h3 { font-size: 32px; } } @media (min-width: 1200px) { .haik-container .carousel-caption h3 { font-size: 36px; } } @media (min-width: 1500px) { .haik-container .carousel-caption h3 { font-size: 38px; } } @media (min-width: 2000px) { .haik-container .carousel-caption h3 { font-size: 40px; } } @media (min-width: 2500px) { .haik-container .carousel-caption h3 { font-size: 42px; } } /* 2020/01/02 Boostrap.min.css内で宣言されている。書き換える予定がないので予備コメント化 */ /* .carousel-inner > .item > a > img, .carousel-inner > .item > img { line-height: 1; } */ /* 画像にアドレスが入ると自動でcarousel-innerクラスが含まれる 2019/09/22 スライドショーに使われるクラス.carousel-inner .img-responsive、 サムネイル　.thumbnail、 画像にアドレスが入った場合、画像を拡大して、画像下マージン0.5emをつける 2019/10/24 サムネイルの画像拡大transform: scaleを1.5から1.11へ 2020/01/02 carousel-innerクラスの装飾はカクカクした動きになるので、予備コメント化 */ /* .carousel-inner > .item > a > img, .carousel-inner > .item > img, .img-responsive, .thumbnail a > img, .thumbnail > img { display: block; height: auto; object-fit: cover; transform: scale(1.11); margin-bottom: 0.5em; } */ /*=========== 2019.05.23 carouselスライド画像のdisplayがcontentだと画像がでなくなるので注意 ===========*/ .carousel-inner>.item>a>img, .carousel-inner>.item>img { display: block; } /* 2019.05.24 carouselスライド内の画面効果 カスタマイズ時はこちらを変える */ /* .carousel-inner>.item { display: none; position: relative; transition: .6s ease-in-out left; } @media not all, (-webkit-transform-3d) .carousel-inner>.item { transition: transform .6s ease-in-out; perspective: 1000px; } */ /*=========== 2020/01/02 スライドショーの左右クリックボタンWEBアイコンの変更。 見た目が洗練されているFontAwesomeの「丸囲み＜」と「丸囲み＞」に切り替える。 ===========*/ .glyphicon-chevron-right:before { font-family: FontAwesome; content: "\f138"; } .glyphicon-chevron-left:before { font-family: FontAwesome; content: "\f137"; } /*=========== 2019.06.01 スライドショーの移動クリック範囲の調整 ===========*/ .carousel-control { position: absolute; top: 0; left: 0; bottom: 0; width: 15%; opacity: .5; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, 0); transition: .3s; } @media (min-width: 768px) { .carousel-control { width: 10%; } } .carousel-control.left { background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%); background-repeat: repeat-x; } .carousel-control.right { left: auto; right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%); background-repeat: repeat-x; } .carousel .carousel-control { outline-style: none; } .carousel-control:focus, .carousel-control:hover { outline: 0; color: #fff; text-decoration: none; opacity: .9; } /*=========== スライドショーのタイトル、キャプションの装飾 2019.10.13 スライドショーの文字を黒ふちにする 見やすくなった ===========*/ .carousel-caption { position: absolute; left: 6%; right: 6%; bottom: 15px; z-index: 10; padding-top: 0em; padding-bottom: 1em; color: #fff; text-align: center; text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px; } .carousel-caption a { color: inherit; font-weight: 700; text-decoration: none; } /* 2020/01/02 フッタにもcarouselスライドショーを表示できるよう、見出しを修正するスライドショーを表示できるよう、見出しを修正する */ .container .carousel-caption h3, .haik-footer .carousel-caption h3 { color: #fff; border: none; background-color: transparent; } /* 2020/01/05 768px~992px未満時はメニューのcarouselスライドショーでの文字を90％に縮小する */ @media (min-width: 768px) { .haik-menu .carousel-caption h3, .haik-menu .carousel-caption p, .haik-menu .glyphicon-chevron-right:before, .haik-menu .glyphicon-chevron-left:before { font-size: 90% } } @media (min-width: 992px) { .haik-menu .carousel-caption h3, .haik-menu .carousel-caption p, .haik-menu .glyphicon-chevron-right:before, .haik-menu .glyphicon-chevron-left:before { font-size: 100% } } /*=========== 2019.09.06 a:hoverだけ記述していて誤作動していた所を修正 ===========*/ .carousel-caption a:active, .carousel-caption a:hover { outline: 0; } /*=========== 2019.07.06 ブログの新着ブログcaptionでマウスオーバー時の下線を復活 2019.09.01 日付だけにでるのでマウスオーバー時の下線を見送る 2019.09.06 a:hoverだけ記述していて誤作動していた所を修正 2019/10/09 .carousel-captionの丸印を大きくする .carousel-captionの位置を下0に修正 2019/12/30 .carousel-captionの位置をleft: 50%;に修正 2019/12/30 .haik-container 内での.carousel-captionの位置をleft: 20%;に修正 2020/01/08 .carousel-captionの丸印がナビの表に出るエラーを修正 z-index:15を8に修正 2021/10/17 ブログの新着ブログcaptionリンク文字色の修正　iPhoneで表示すると色合いが変だったので色を変更 #337ab7　から #0070c9 へ ===========*/ .carousel-caption a:focus, .carousel-caption a:hover { color: #0070c9; text-decoration: underline; } @media (min-width: 768px) { .carousel-indicators { bottom: 0px; } } .carousel-indicators { position: absolute; bottom: 0px; left: 50%; z-index: 8; width: 60%; margin-left: -30%; padding-left: 0; list-style: none; text-align: center; } .haik-container .carousel-indicators { left: 20%; } @media (min-width: 768px) { .carousel-indicators { bottom: 0px; } } .haik-container .carousel-indicators ol>li { margin-left: 1em; padding: 0; font-size: 18px; } .carousel-indicators .active { /* margin: 1em; */ margin-left: 0em; width: 14px; height: 14px; background-color: #fff; } .carousel-indicators li { display: inline-block; width: 14px; height: 14px; margin: 1px; text-indent: -999px; border: 1px solid #fff; border-radius: 14px; cursor: pointer; background-color: rgba(0, 0, 0, 0); } .haik-container .qhm-bs-carousel.carousel.slide ol>li { margin-left: 0.3em; padding: 0; font-size: 18px; } /*=========== アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1） 2019.05.24 carouselスライドショーでフォント設定を行う。WEBフォントも読み込める ===========*/ .haik-eyecatch-top .jumbotron h1 { /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-weight: 700; font-size: 36px; margin: 10px 0; border: none; background: none; border-left: none; box-shadow: none; } @media (max-width: 992px) { .haik-eyecatch-top .jumbotron h1 { font-size: 30px; } } @media (max-width: 767px) { .haik-eyecatch-top .jumbotron h1 { font-size: 28px; line-height: 1.7em; margin: 14px 0; } } @media (max-width: 567px) { .haik-eyecatch-top .jumbotron h1 { font-size: 26px; } } /* アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1） */ .haik-eyecatch-top .jumbotron p { /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-size: 22px; margin: 15px 0; border: none; background: none; border-left: none; box-shadow: none; } @media (min-width: 768px) { .haik-eyecatch-top .jumbotron p { font-size: 26px; } } @media (min-width: 992px) { .haik-eyecatch-top .jumbotron p { font-size: 28px; } } @media (min-width: 1200px) { .haik-eyecatch-top .jumbotron p { font-size: 30px; } } /* 2019/12/28 carouselスライドショーでh1~h4疑似要素のクリア */ .haik-container .carousel-caption h1::before, .haik-container .carousel-caption h2::before, .haik-container .carousel-caption h3::before, .haik-container .carousel-caption h4::before { display: none; } /*=========== アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1） 2019.05.24 carouselスライドショーでフォント設定を行う。WEBフォントも読み込める 2020/01/02 メインコンテナでのcarouselスライドショーでフォント設定を行う。 文字の縁取りは継承するのでコメント化 なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し ===========*/ .carousel-caption p { /* WEBフォントカスタマイズ用通常はコメント */ /* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-size: 18px; /*text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;*/ margin: 0; } @media (min-width: 360px) { .carousel-caption p { font-size: 20px; } } @media (min-width: 568px) { .carousel-caption p { font-size: 22px; } } @media (min-width: 768px) { .carousel-caption p { font-size: 20px; } } @media (min-width: 992px) { .carousel-caption p { font-size: 22px; } } @media (min-width: 1200px) { .carousel-caption p { font-size: 26px; } } @media (min-width: 1500px) { .carousel-caption p { font-size: 28px; } } @media (min-width: 2000px) { .carousel-caption p { font-size: 30px; } } @media (min-width: 2500px) { .carousel-caption p { font-size: 32px; } } /*=========== 2019.08.15 パスワードリセット画面などの文字大きさを修正 ===========*/ main.haik-container { font-size: 20px; } /*=========== 2019.08.27 脚注のスタイル改修 使い方　文章中に半角の丸括弧二つで文章を囲む 例：こんな感じで記述((脚注として管理する文章))します。 括弧の部分が小さな*1などとページ内で連番のリンクとなる。 表示される文字の大きさを調整 2019.08.31 smallの左マージンを調整 2020/09/23 画面レイアウト改修に伴う脚注のスタイル改修、左右マージン追加 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し ===========*/ #note::before { font-weight: 700; content: "脚注"; } #note { padding-top: 2em; padding-bottom: 3em; padding-left:1em; padding-right:1em; font-size: 20px; } @media (min-width: 568px) { #note::before { font-size: 24px; } } @media (min-width: 768px) { #note::before { font-size: 22px; } } @media (min-width: 992px) { #note::before { font-size: 24px; } } @media (min-width: 1200px) { #note::before { font-size: 26px; } } @media (min-width: 1500px) { #note::before { font-size: 28px; } } @media (min-width: 2000px) { #note::before { font-size: 30px; } } @media (min-width: 2500px) { #note::before { font-size: 32px; } } /*　以下のコメントを外すと「注」の見出しを追加できる*/ /* .note_super::before { content:"注"; } */ /* 2019/10/08 チェックボックスとラベルのズレをなくすための調整 クラスにsmallを使っているのでそのマージンを調整。 記述ミスでsmallと.smallと存在するのでこれを修正。 2020/09/07 他の所で衝突するのでcolor: inherit、margin-topを廃止、様子を見る チェックボックス用なのでチェックボックス専用にできないか検討 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し */ .small, small { line-height: 1.8em; font-size: 18px; /*color: inherit;*/ /* margin-top: 0.5em; */ margin-left: 0em; } @media (min-width: 568px) { .small, small { font-size: 22px; } } @media (min-width: 768px) { .small, small { font-size: 20px; } } @media (min-width: 992px) { .small, small { font-size: 22px; /* margin-top: 0.4em; */ } } @media (min-width: 1200px) { .small, small { font-size: 24px; } } @media (min-width: 1200px) { .small, small { font-size: 24px; } } @media (min-width: 1500px) { .small, small { font-size: 26px; } } @media (min-width: 2000px) { .small, small { font-size: 28px; } } @media (min-width: 2500px) { .small, small { font-size: 30px; } } /*============= セクションの見出し装飾のクリア 2019/12/28 セクションの見出し装飾のクリア　追加 文字色はセクション指定に従う 2020/09/20 セクションの見出しに縁取りを追加、シャドウを常時設定する 2020/09/20 アイキャッチ・セクションでclass=title-noborderを指定することでタイトルとテキストに縁取りを任意で外せる 2020/09/21 セクション内で段落（パラグラフ）も縁取りできるようにする 2021/09/02 セクション内で段落（パラグラフ）の縁取りをiphoneで見やすいように修正 =============*/ .qhm-section:not(.qhm-eyecatch) .container-fluid>h2, .qhm-section:not(.qhm-eyecatch) .container-fluid>h3, .qhm-section:not(.qhm-eyecatch) .container-fluid>h4, .qhm-section:not(.qhm-eyecatch) .container-fluid>p, .qhm-section:not(.qhm-eyecatch) .container-fluid>h2::before, .qhm-section:not(.qhm-eyecatch) .container-fluid>h3::before, .qhm-section:not(.qhm-eyecatch) .container-fluid>h4::before, .qhm-section:not(.qhm-eyecatch) .container-fluid>h2::after, .qhm-section:not(.qhm-eyecatch) .container-fluid>h3::after, .qhm-section:not(.qhm-eyecatch) .container-fluid>h4::after { border-radius: 0; background-image: none; background-color: transparent; box-shadow: none; border: none; color: inherit; /* カスタマイズ用　縁取りぼかし */ /* text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000; */ /* カスタマイズ用 縁取り細1px*/ text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000; /* カスタマイズ用 縁取り太2px*/ /* text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; */ /* カスタマイズ用 縁取り右下影1px*/ /*text-shadow: #000 1px 1px 0 ;*/ /* カスタマイズ用 縁取り右下影2px*/ /* text-shadow: #000 2px 2px 0 ; */ } h2#content_7_0 {} /* .qhm-section:not(.qhm-eyecatch) .container-fluid>p{ text-shadow: 2px 2px 2px #000, -2px -2px 2px #000, -2px 2px 2px #000, 2px -2px 2px #000, 2px 0px 2px #000, -2px 0px 2px #000, 0px 2px 2px #000, 0px -2px 2px #000 } */ /*============= 2020/09/20 セクションの見出し書式を修正する 2021/09/04 セクションの見出し書式のマージンを調整する。 見栄えと空き領域の節約でモバイル解像度は専用のマージンを設定、768px以上は専用のマージン。 2021/09/06 アイキャッチ・セクション余白を大きくする クラス .title-wrapper-largeを追加したので文字書式のマージンを調整、段落も修正。 上下幅を1em前後になるよう調整 nagamira_css10h.cssの.title-wrapper-large　クラス 2021/09/20 サイド メニューでのセクション書式を追加。 タブレット画面と高解像度画面での表示を変えて行あたりの字数を増やす。 =============*/ .qhm-section:not(.qhm-eyecatch) .container-fluid>h1, .qhm-section:not(.qhm-eyecatch) .container-fluid>h2, .qhm-section:not(.qhm-eyecatch) .container-fluid>h3, .qhm-section:not(.qhm-eyecatch) .container-fluid>h4{ padding-left: .5em; padding-right: .3em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h1, .qhm-section:not(.qhm-eyecatch) .container-fluid>h2{ margin: 1em 0.05em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h3{ margin: 1.3em 0.25em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h4{ margin: 1em 0.5em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>p{ margin: 1em; } @media (min-width: 768px) { .qhm-section:not(.qhm-eyecatch) .container-fluid>h1{ margin: 1em .2em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h2{ margin: 1.2em .5em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h3{ margin: 1.2em .5em; } .qhm-section:not(.qhm-eyecatch) .container-fluid>h4{ margin: 1.2em .5em; /* padding-left: 1em; */ } .qhm-section:not(.qhm-eyecatch) .container-fluid>p{ margin: 1em .5em; } /* サイド メニューでのセクション書式 */ .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h2{ margin: .3em .5em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h3{ margin: .5em .6em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h4{ margin: .7em .4em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>p{ margin: 1em .6em; } } /* サイド メニューでのセクション書式 */ @media (min-width: 1500px) { .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h2{ margin: 1em 0.2em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h3{ margin: 1.2em .5em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>h4{ margin: 1.2em .5em; } .haik-menu .qhm-section:not(.qhm-eyecatch) .container-fluid>p{ margin: 1.2em .5em; } } /*============= 2020/09/20 アイキャッチ・セクションでclass=title-noborderを指定することでタイトルやテキストに縁取りを任意で外せる =============*/ .qhm-section.title-noborder .container-fluid>h1, .qhm-section.title-noborder .container-fluid>h2, .qhm-section.title-noborder .container-fluid>h3, .qhm-section.title-noborder .container-fluid>h4, .qhm-section.title-noborder .container-fluid>p { text-shadow: none; } /*============= 2021/09/02 アイキャッチ・セクションでclass=title-borderまたはclass=title-border-1 を指定することでタイトルやテキストを1pxの細い縁取にできる =============*/ .qhm-section.title-border .container-fluid>h1, .qhm-section.title-border .container-fluid>h2, .qhm-section.title-border .container-fluid>h3, .qhm-section.title-border .container-fluid>h4, .qhm-section.title-border .container-fluid>p, .qhm-section.title-border-1 .container-fluid>h1, .qhm-section.title-border-1 .container-fluid>h2, .qhm-section.title-border-1 .container-fluid>h3, .qhm-section.title-border-1 .container-fluid>h4, .qhm-section.title-border-1 .container-fluid>p { text-shadow: #000 1px 0px, #000 -1px 0px, #000 0px -1px, #000 0px 1px, #000 1px 1px , #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px, #000 1px 1px, #000 -1px 1px, #000 1px -1px, #000 -1px -1px; } /*============= 2021/09/03 アイキャッチ・セクションでclass=title-border-2を指定することでタイトルやテキストを2pxの太い縁取にできる 従来と違うのは斜め下にも縁取りが入っている。iphone、ipadなど高解像度画面でのギザギザはこれで解決できる。 =============*/ .qhm-section.title-border-2 .container-fluid>h1, .qhm-section.title-border-2 .container-fluid>h2, .qhm-section.title-border-2 .container-fluid>h3, .qhm-section.title-border-2 .container-fluid>h4, .qhm-section.title-border-2 .container-fluid>p { text-shadow: #000 2px 0px, #000 -2px 0px, #000 0px -2px, #000 0px 2px, #000 2px 2px , #000 -2px 2px, #000 2px -2px, #000 -2px -2px, #000 1px 2px, #000 -1px 2px, #000 1px -2px, #000 -1px -2px, #000 2px 1px, #000 -2px 1px, #000 2px -1px, #000 -2px -1px; } /*============= 2021/09/03 アイキャッチ・セクションでclass=title-border-blurを指定することでタイトルやテキストをぼかした縁取にできる =============*/ .qhm-section.title-border-blur .container-fluid>h1, .qhm-section.title-border-blur .container-fluid>h2, .qhm-section.title-border-blur .container-fluid>h3, .qhm-section.title-border-blur .container-fluid>h4, .qhm-section.title-border-blur .container-fluid>p { text-shadow: #000 2px 2px 2px , #000 -2px -2px 2px, #000 -2px 2px 2px, #000 2px -2px 2px, #000 2px 0px 2px , #000 -2px 0px 2px, #000 0px 2px 2px , #000 0px -2px 2px; } /*============= 2021/09/03 アイキャッチ・セクションでclass=title-border-shadow-1を指定することで右下影（1px）にできる =============*/ .qhm-section.title-border-shadow-1 .container-fluid>h1, .qhm-section.title-border-shadow-1 .container-fluid>h2, .qhm-section.title-border-shadow-1 .container-fluid>h3, .qhm-section.title-border-shadow-1 .container-fluid>h4, .qhm-section.title-border-shadow-1 .container-fluid>p { text-shadow: #000 1px 1px 0; } /*============= 2021/09/03 アイキャッチ・セクションでclass=title-border-shadow-2を指定することで右下影（2px）にできる =============*/ .qhm-section.title-border-shadow-2 .container-fluid>h1, .qhm-section.title-border-shadow-2 .container-fluid>h2, .qhm-section.title-border-shadow-2 .container-fluid>h3, .qhm-section.title-border-shadow-2 .container-fluid>h4, .qhm-section.title-border-shadow-2 .container-fluid>p { text-shadow: #000 2px 2px 0; } /* 2020/10/01 【テスト】セクションを幅いっぱいに広げるクラス セクションのクラスで呼び出す */ .breaking-out { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } /* 2020/10/01 【テスト】背景だけ広がるセクション セクションのクラスで呼び出す */ .section-container { padding-right: calc(50vw - 50%); padding-left: calc(50vw - 50%); } /* ins？ おそらくテキスト冒頭の区切り線では？ 見たことが無い */ ins { text-decoration: none; border-bottom: 1px solid; padding-bottom: 2px } /*================================== 2018.04.24 テーブルの文字の大きさを修正 2019.02.26 最小ポイント数を18ポイントに修正 2019.03.03 メディアクエリ1200px以上の場合を追加 2019.03.27 568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。 2019.08.30 文字の大きさを調整。スマホ時18ポイントでは小さい場合があるため。 2019/12/28 360px未満時の表の文字サイズを追加 2019/12/29 解像度1500px以上の文字サイズを追加（複数） 2020/01/10 表の文字スタイルシートにセレクタ.haik-container 指定を復活。 消すとboostrap.min.css のスタイルシートが優先されてしまうため。 2020/08/19 bs_box.cssからテーブルの基本的な装飾を引っ越し 基本的な装飾なのでbs_box.cssにあると切り離した時に困る 【旧履歴】 2020/07/30 テーブルの色設定 2020/08/04 #calendar2テーブル用スタイル 2020/08/05 テーブルセル内tdの文字の配置、揃えを改修 2020/08/19 テーブルの基本的な装飾をここに統合 2021/01/30 2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し 2021/09/03 表の内容をモバイル解像度に合わせた表示に修正 ==================================*/ .haik-container .style_td, .haik-container .style_th { line-height: 1.8em; font-size: 18px; } @media (min-width: 320px) { .haik-container .style_td, .haik-container .style_th { font-size: 24px; } } @media (min-width: 360px) { .haik-container .style_td, .haik-container .style_th { font-size: 20px; } } @media (min-width: 375px) { .haik-container .style_td, .haik-container .style_th { font-size: 24px; } } @media (min-width: 568px) { .haik-container .style_td, .haik-container .style_th { font-size: 26px; } } @media (min-width: 768px) { .haik-container .style_td, .haik-container .style_th { font-size: 20px; } } @media (min-width: 992px) { .haik-container .style_td, .haik-container .style_th { font-size: 22px; } } @media (min-width: 1200px) { .haik-container .style_td, .haik-container .style_th { font-size: 24px; } } @media (min-width: 1500px) { .haik-container .style_td, .haik-container .style_th { font-size: 26px; } } @media (min-width: 2000px) { .haik-container .style_td, .haik-container .style_th { font-size: 28px; } } @media (min-width: 2500px) { .haik-container .style_td, .haik-container .style_th { font-size: 30px; } } /*================== 2020/08/19 テーブルの基本的な装飾をここに統合 2020/07/30 テーブルの線、色設定追加 クラスmainと.haik-menu、.haik-footer専用に設定 mainはクラス宣言ではなく名称になっている 必要ならそれぞれのコピーして使う 2020/08/05 テーブルセル内tdの文字の配置、揃えを改修 2020/08/19 bs_box.cssから引っ越し ==================*/ main table, .haik-menu table, .haik-footer table { width: auto; border: 1px solid #B0C4DE; border-collapse: collapse; border-spacing: 0; } main th, .haik-menu th, .haik-footer th { color: #fff; padding: 0.3em !important; vertical-align: middle !important; border: 1px solid #B0C4DE !important; background: #4682B4; font-weight: bold; text-align: center; } main td, .haik-menu td, .haik-footer td{ border-left: 1px solid #B0C4DE; padding: 0.3em !important; vertical-align: middle !important; } main tr:nth-child(2n+1), .haik-menu tr:nth-child(2n+1), .haik-footer tr:nth-child(2n+1){ background: #ffedb8; } main tr:nth-child(2n+1), .haik-menu tr:nth-child(5n+1), .haik-footer tr:nth-child(5n+1){ border-bottom: 2px solid #B0C4DE; } /*　テーブルの線、色設定　その他例 main tr:first-child, .haik-menu tr:first-child, .haik-footer tr:first-child{ border-bottom: 2px solid #B0C4DE; } main tr:last-child, .haik-menu tr:last-child, .haik-footer tr:first-child{ border-bottom: 2px solid #B0C4DE; } */ /*================== 2020/07/31 datepickerクラス用テーブル装飾スタイル追加 ==================*/ .datepicker table { width: auto; border: 1px solid #B0C4DE; border-collapse: collapse; border-spacing: 0; } .datepicker th { color: #fff; padding: 0.3em !important; vertical-align: middle !important; border: 1px solid #B0C4DE !important; background: #4682B4; font-weight: bold; border-radius: 0px !important; text-align: center; } .datepicker td{ border-left: 1px solid #B0C4DE; } .datepicker tr:nth-child(2n+2) { background: #ffedb8; } /*　テーブルの線、色設定　その他例*/ /* .datepicker tr:nth-child(5n) { border-bottom: 2px solid #B0C4DE; } .datepicker tr:first-child { border-bottom: 2px solid #B0C4DE; } .datepicker tr:last-child { border-bottom: 2px solid #B0C4DE; } */ /* 2020/08/04 #calendar2テーブル用スタイル オリジナルに近くなるようにしています。 テーブルの線、色設定　その他例 ほとんど使っていませんが、用心のため スタイルが上書きされないように調整しています。 必要に応じて修正します。 */ .qhm-plugin-calendar2 .style_calendartable { border: none; } .qhm-plugin-calendar2 table{ border: none; } .qhm-plugin-calendar2 td{ border-left: none; } .qhm-plugin-calendar2 tr:nth-child(2n+1){ background: transparent; } .qhm-plugin-calendar2 tr:nth-child(2n+1){ border-bottom: transparent; }