/*++++++++++++++++++++ * * 2021/10/17　修正A　 * 2021/09/20　修正A　 * 2021/09/03　iphone8対応試作中C　 * 2021/09/03　iphone8対応試作中B　 * 2021/09/02　iphone8対応試作中　 * 2021/07/01 * 実装済み * nagamira_css6h.css 高速化互換性なし版 * * 著作権 長岡京健康みらい研究所 * 【重要】nagamira_css2,3,4の後に読み込むこと * 2021/07/01 * W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認 * 2021/07/05 【注意 圧縮ツール】 https://csscompressor.net/ja/ で「Compress colors」をオフにして圧縮すること。 コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * * * メニュー部分の改修と本体部分幅の調整 * メニュー部分（クラス　.haik-menu）のスタイル実装 * あわせてメインコンテンツとの幅の％をここで調整している。 * カラム、サムネイルのレスポンシブ対応も主にここで対応 * 2019.03.24 * .haik-article-menu用のセレクタも用意する 2019.03.25 メディアクエリの解釈を修正 Boostrapグリッドシステムに準拠させたのを試作してみる @media (min-width: 1024px) → 992pxに 2019.03.28 col-sm-6左マージンの調整 2019.03.29 568px時の文字の大きさを大きくする 2019.03.29 メニューのマウスオーバー時の色をパレット色毎にバラバラだったのを#337ab7;に標準化する 2019.03.29 メニューの子メニューのマウスオーバー時の色をパレット色毎にバラバラだったのを#337ab7;に標準化する 2019.04.02 col-sm-6をスマホでも2桁になるよう調整 2019.04.03 col-sm-2,3,4,6をスマホでも2桁になるよう調整 無理に詰め込むとレイアウトが崩れる事を前提に、内容が見られることを優先でwidthを調整 2019.04.03 見出しのボーダー飾りの色の彩度を落として見やすくする 2019.04.04 col-sm-2,3,4,6に加えて col-sm-0,1も行うようにする。 これでサムネイルとカラムの段組にほぼ対応。 2019.04.04 humbnailの高さをそろえる あらかじめ最低限の高さを設定しておけばレイアウト崩れはかなり防げる メンテナンス性を考慮してnagamira_css1から移動。 オーバーライドする形でこちらを利用していく。 マージンや絶対領域などの大きさを調整していく。 2019.04.12 thumbnail内のリンクを太字にして見やすくする 2019.04.29 thumbnailキャプションのマージン調整 2019.04.29 thumbnailのmarginを4辺毎に改修。詰めすぎの印象を改修 2019.04.30 thumbnailのp 段落の行間を調整 2019.04.30 .haik-container .col-sm-0 p, .haik-container .col-sm-1 p, .haik-container .col-sm-2 p, .haik-container .col-sm-3 p, .haik-container .col-sm-4 p, .haik-container .col-sm-6 p の段落の左右マージンを調整。colsで並べたときおかしくなっていたのを修正。 2019.05.01 カラムの調整 2019.05.01 .haik-menu と.haik-article-menu でcols,thumnailを使えるようにする 2019.05.02 haik-menuのthumnailsと衝突しないよう .haik-container クラス専用にする。 .haik-container thumbnailの画像をトリミングして大きさを固定する 2019.05.02 .haik-container thumbnailの大きさに入りきらないテキストを削除するように修正 原則としてタイトルのみ。3行内に収まるようにする。 2019.05.02 .haik-menu と.haik-article-menu でのthumnailスタイル大きさの微調整 .haik-menu と.haik-article-menu でのthumnailの高さが統一されるようにする 大きさにあわせて画像をトリミングするように変更 2019.05.02 .haik-menu .haik-article-menu thumbnailの大きさに入りきらないテキストを削除するように修正 原則としてタイトルのみ。3行内に収まるようにする。 2019.05.02 .haik-container #qblog_list 用 thumnailsクラス 2019.05.02 .haik-menu と.haik-article-menu での qblog-list 用thumnailスタイル 2019.05.03 .haik-container左右排他領域調整 　　768px　左右幅調整 2019.05.03 .haik-menuのサムネイル表示とカラム表示を修正 2019.05.03 メニューの基本構成と重複するので統合 2019.05.03 haik-footer用 .thumbnail　背景色を透明にする事 2019.05.05 .haik-menu と.haik-article-menu 内の.thumbnail.qblog-itemスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 2019.05.05 .haik-footer 内の .qblog-item thumnailスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 2019.05.05 .haik-container 用 .thumbnail.qblog-itemスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 2019.05.09 メニューバーのクラス名.barでの罫線類の書式の修正 色毎に変わってしまう問題を解決 2019.05.10 色毎に共通している記述を統合 2019.05.10 色毎に異なる見出し横のボーダーの記述を独立 2019.05.10 問い合わせフォーム部品配置で.col-sm-9　.col-sm-2がメインコンテナとメニューで共用になっているので共用にならないように改修 2019.05.10 .col-sm-4でブログサムネイル表示とサムネイル・カラム表示がかぶらないようにわける 2019.05.10 .haik-xs-nopadding .haik-containerの基本設定 2019.05.11 row子要素の高さをそろえるflexboxをnagamira_css1に設置したのでthumnailsのheight指定をコメント化、100%にする 2019.05.12 colのwidth:％率を調整 2019.05.12 thumbnailのfloat:をコメント化 2019.05.12 768pxからthumbnail自体の高さを可変に 2019.05.12 flexboxとは無関係だったのでcolのwidth:％率を元に戻す （追加　thumbnailの対応はこれらとは無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 2019.05.12 display:flex対応次第、float:left;をコメント化する 2019.05.13 通常はwidth: 100%;だが、レイアウト崩れ対策で試験的に98%にして行う 2019.05.13 レイアウト崩れを擬似的に起こしてメインとフッターで起こっている事粗 調べてみた。結果、 margin: 0.2em;だった所が悪さをしていた。 padding-left: .25em; padding-right: .25em; を入れるとなおった 2019.05.15 重複しているwidth指定を統合 2019.05.15 ipad向けに%比率を調整テスト 2019.05.15 メイン画面.haik-container のカラム分割はメディアクエリ992pxで3桁配置は見た目が悪いのでコメント化してみる。カスタマイズで応じる機能とする。 2019.05.15 ipad向けに%比率を調整テストしたが、変わらない。元に戻す。 2019.05.16 Flexboxのポリフィル「flexibility.js」を導入。 これを「-js-display: flex;」と書いて使う事でFlexboxに対応していないIE 9等のブラウザでもFlexboxが有効になる。 やはりipadではカラムがずれて表示される。どうしたものか。 2019.05.16 ipad向けに%比率を調整テストしてみる。やはり！ 【試験】.haik-container .col-sのパーセンテージを5％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを3％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを2％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを1％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを0％減らして変えてみる OK カラムの%比率の書き方が原因だった。1カラム目冒頭の左側に少し空白が入るがこれが原因。 避けられないので %比率の書き方を変える必要があった。 合計で100％にならないように修正する。 2019.05.18 .thumbnailの行間を削除　デフォルトの1.8emを継承 2019.05.18 qblogのthumbnailの上下に余白ができるよう調整 マージンを調整しても線は枠いっぱいになるので、高さ比率は100%にしない方がよい。 2019.05.01 カラムの比率調整 2019.05.18 .haik-container左右排他領域調整をnagamira_css1.cssへ移動 2019.05.24 フッターのカラム比率調整 2019.05.29 要素で背景色を可能な限り継承するようにした。 メンテナンスを楽にする事と、今後のダークモードの流行にも備える事もある。 2019.08.21 メニュー用 ブログリスト時概要 2019.08.21 .qblog_abstractから継承 メニュー用に調整した概要を出す。 タイトルの長さによってはレイアウト崩れが発生する 2019.08.21 ブログリスト時概要 メニュー用 マウスの反応範囲を広げる　うまく動かないので予備 2019.08.28 メニュー用 ブログリスト日付と見出しがずれるので上部余白をゼロに 2019.08.29 メニュー内の段落記述の書体属性にタグリストを追加 こちらは[class^="haik-palette-"]をつけなくてもよい 2019.08.29 ブログリスト日付と見出しを縦に並べて表示する。視認性と操作性が改善される。 2019.08.30 メニューの書体の大きさに整合性があるように調整 2019.09.01 メニュー見出しリンク文字色調整 パレット毎に色が異なっていると混乱するので1色に統合する 2019.09.01 メニュー見出しリンク文字色調整 パレット毎に色が異なっていると混乱するので1色に統合する 2019.09.01 メニュー用ブログリストタイトル　マウスオーバー時に下線を引く方式に変更 2019.09.04 メニュー部の上排他領域を増やして詰まった印象を改善する 2019.09.04 画面配置でクラス名を.col-sm-9、.col-md-9とだけ書いていた。 他に同じクラス名を利用すると誤作動が起こるので継承クラスを指定する。 2019.09.05 メニューの見出しがアクティブ時リンク文字のマウス反応を無効にする。 2019.09.05 メニューの見出し書体の大きさ調整(h2,h3,h4) 2019.09.05 メニュー見出しリンク文字をdisplay: blockをinlineにして改行しないようにした 2019/09/10 レスポンシブ対応時のメディアクエリにテーマseed等で使われている.col-sm-3と.col-sm-9を追加 2019/09/10 .col-sm-3＝メニューに割り当てられた桁にテーマseed等で使われている.col-sm-3と.col-sm-9を追加 2019/09/11 右メニュー時の画面割合指定 左メニュー時の画面割合指定設定 2019/09/12 メニューでは検索のAND検索とOR検索のボタンを出さないようにする 2019/09/12 メニュー内の段落の余白マージンを広げる 2019/09/13 メニューの見出しの書体を統一 768px以上はコンテナ（メイン）の見出し1,2,3より小さい 767px未満はコンテナ（メイン）の見出し1,2,3と同じ大きさ 2019/09/15 カラムcol-sm-0~6 は上マージンを0.8emから0.618emにする 2019/09/15 ihpone5,5s系の解像度360px未満時カラムcol-sm-0~6の領域割り当てを99%にする display:float;を削除 2019/09/17 メニューの見出し書体の大きさ調整(h2,h3,h4) 2019/09/17 メニューの見出し(h2,h3,h4)の大きさを調整 1200px以上の大きさ(h2:28px,h3:26px,h4:24px) 1500px以上の大きさを追加(h2:30px,h3:28px,h4:26px) バランスがよくなった 2019/09/11 右メニュー時の画面割合指定 左メニュー時の画面割合指定設定 2019/09/12 メニュー要素親をpadding属性 上下15pxから.6em、 左右15pxから10pxに変えて見やすくした 2019/09/14 メニューの見出し1，2に画像アイコンを出さないようにする 2019/09/18 メニューのタブ上下マージンを新たに追加 2019/09/19 thumbnail全てにマウスオーバー時のアニメーションを追加 2019/09/21 メニュー要素padding属性のマージンを0に メニューのブログ投稿日付と画像のレイアウト崩れが起こるので廃止したが、他のメニューが崩れるので撤回。 2019/09/21 メニュー要素のクリック範囲を枠いっぱいに広げる 2019/09/21 メニュー要素のマウスオーバー時の反応をふわっとさせる 2019/09/21（解決） コンテナとフッターのブログリスト画像日付概要が入った要素のクリック範囲を枠いっぱいに広げる 2019/09/21（解決） コンテナとフッターのブログリスト画像日付概要が入った要素マウスオーバー時の反応をふわっとさせる 2019/09/24 テーマbioのようにメニューの先頭にあるアイコン画像を消す 2019/09/21 メニュー用ブログリストタイトル　768px時　右マージン　0.5emに 2019/09/21 メニュー用ブログリスト タイトルと概要、768px～1499px時は画像左回り込みなし 2019/09/21 メニュー要素のマウスオーバー時の反応をふわっとさせる 2019/09/21 ブログリスト時概要 メニュー用 768px~1199pxのサイドメニュー表示時は概要を表示しない 試したが、イマイチだった。やはり概要がないと意味がない。 2019/09/21 メニュー用ブログリスト 768px～1199px時は画像サムネイルの右マージンは0にする 2019/09/22 メニュー要素のクリック範囲を枠いっぱいに広げるのをクラス指定を変えて、ブログリスト表示（日付、タイトル）での使用のみにする 2019/09/22 .thumbnail内段落のimgを大きくして余白を減らす 2019/09/22 .thumbnail内段落のimgを拡大して余白を減らす所でさらにスケールを1.99倍とする事で枠線との隙間がほぼなくなる 2019/09/22 Qブログアイテム枠内サムネイル画像を余白なしで表示する 2019/09/23 メニュー内での.thumbnail内のimgの高さを130pxに固定する（autoは予備コメント化） 2019/09/24 テーマFLATなど背景色のあるテーマでメニューの背景が白くなるのを修正。 2019/09/24 テーマbioのようにメニューの先頭にあるアイコン画像を消す 2019/09/24 テーマmoiのようにナビのドロップダウンメニューの下線があるのを消す 2019/09/24 左メニュー時の画面割合指定メディアクエリ1500px追加 2019/09/27 ihpone5（SE）解像度追加　書体の大きさ調整 2019/09/28 サムネイルの段落内の画像の上マージンを0にする 他の所で対応できたので必要な時はコメントを外して使う 2019/10/05 .thumbnail内のimgの高さをレスポンシブ対応にして、ブレークポイント毎に固定サイズにする 画像のサイズと高さによっては見出しが隠れてしまうため また列数によって見やすい高さが変わるので調整する。 メニューは高さを固定していたので問題なし。 2019/10/05 フッターの.thumbnail内のimgの高さをレスポンシブ対応にして、ブレークポイント毎に固定サイズにする サイズによっては見出しが隠れてしまうため また列数によって見やすい高さが変わるので調整する。 メニューは高さを固定していたので問題なし。 2019/10/07 重複していた記述を削除 2019/10/18 .thumbnailマウスオーバー時の動きを大きく-4px→-8px コンテナー メニュー フッター 2019/12/08 クラスthumbnail_no_hoverを追加 .thumbnailマウスオーバー時の効果を無効にする thumbnailを通常のカタログとして使いたい場合もあり、マウスオーバー時の反応を無効にする。 2019/12/09 モバイル解像度の360px以下の時、.col-sm-6の2カラム表示が正常に出ないエラーを修正 2019/12/16 .thumbnailマウスオーバー時の動きをtransform: scale(1.03);に変更 従来の上に移動するのは予備として残す 2019/12/20 参考：サムネイルカードの効果例（実験のみ） 2019/12/23 メニューの左右線を消す。 2019/12/16 実験 .thumbnailマウスオーバー時の動きをtransform: scale(1.03);に変更 従来の上に移動するのは予備として残す 2019/12/25終了。やはり上に移動するより処理が重いのと不自然なアニメーションになる （とくにＩＥ系党ブラウザで目立つ） 2019/12/25 thumbnail_no_hover時のサムネイルの枠線が細いので太くする 2019/12/27 不要になった!importantを解除 2019/12/27 .haik-container用 .thumbnailマウスオーバー時text-decoration: none;を追加。 main.cssの内容を削除する場合に備えて 2019/12/27 haik-menu、haik-article-menu用 .thumbnailマウスオーバー時　.thumbnailから継承できるため、凍結 2019/12/28 .col-sm-3のみの記述はカラム単体になるのでcols,thumnailに割り当てられた桁へ統合 padding-top: 1em; を上位カラムへ移動 （この記述へ） 2019/12/28 haik-footer用 .thumbnailマウスオーバー時　ボックスシャドウ廃止 暗色の部分なのでメリットがない。枠線を明るくする形で代用 2019/12/28 thumbnail_no_hover時のサムネイルの枠線を細くして色を濃くする 2019/12/28 thumbnail_no_hover時のサムネイルの枠線角の丸めを0にする 2019/12/30 箇条書き要素のマージンを増加修正したのに伴い、メニュー要素のマージンを修正する 2019/12/31 互換性を止めて.haik-containerクラスなど不要なセレクタを削除。 2019/12/31 .thumbnailマウスオーバー時のボックスシャドウを廃止。処理が重くなるため。 その代わりopacity: .5;を追加 2019/12/29 .thumbnail.qblog-itemの背景を白にする。 透明だとタイトル表示が中途半端になってしまう 2019/12/31 thumbnail_no_hover時のサムネイルの透明度を 1;へ 2020/01/04 従来テーマとの互換性の廃止に伴い不要になった記述の廃止 2020/01/05 .col-sm-3＝メニューの768px、992px、1200px以上時の左余白の調整 2020/01/06 .haik-container .col-sm-のmargin-top: 1em;に統一 2020/01/06 .haik-footer .col-sm-のmargin-top: 1em;に統一 2020/01/06 .haik-menu,.haik-article-menu .col-sm-のmargin-top: 0.658em;に統一 若干小さめにする 2020/01/06 .haik-container .thumbnail.qblog-itemを.haik-container .thumbnailと内容を併せる 別々なのは概要入りサムネイルで使っている可能性があるため。 2020/01/06 .haik-container .thumbnail.qblog-itemのマージンを.haik-container .thumbnailと併せる 別々なのは概要入りサムネイルで使っている可能性があるため。 .haik-container .col-sm-のmargin-top: 1em;に統一 メインコンテナのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 2020/01/06 メニューのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 2020/01/06 フッターのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 2020/01/06 .haik-container .thumbnail.qblog-itemを.haik-container .thumbnailと内容を併せる 別々なのは概要入りサムネイルで使っている可能性があるため。 2020/01/11 ブログリスト時概要の文字サイズのレスポンシブ対応強化と調整 概要と表示が小さかったのを修正 2019/10/12 メールフォームなどで使われるラベルのクラス「.control-label.col-sm-3」の上マージンを0に上書きする 2020/01/15 問い合わせフォーム部品配置で ラベル類：.form-group .col-sm-3 入力フィールド：.form-group .col-sm-9 のレスポンシブ対応指定をこの位置へ移動してメイン画面のカラム指定を打ち消す 入力フォームのカラム指定をコメントアウトしてシンプルにする 2020/01/15 メインコンテナのカラム比率セレクタの}閉じ忘れを修正 2020/01/16 フッターのサムネイルの段落pのマージン上を0に調整 2020/01/17 フッターのカラム比率667px時を追加 （iphone6,7,8向け） カスタマイズ用に保存コメントアウト。 2020/01/17 メインコンテナのカラム比率667px時を追加 （iphone6,7,8向け） カスタマイズ用に保存コメントアウト。 2020/01/17 .thumbnail内のimgの画像の比率を4：3に近づくように修正 2020/01/17 .thumbnail内のimgの画像667px時の高さを170pxに調整 2020/01/20 .thumbnail内のimgの画像1200px時の高さを180pxに調整 2020/07/11 .haik-container .thumbnail.qblog-itemの背景色を半透明を継承する 2020/07/14 ブログリスト（リストタイプ）の枠線を追加 2020/07/15 メニュー用　ブログリストのキャプション画像余白調整 2020/07/16 ipad向けメニュー内の段落の余白マージンが大きすぎたので修正 2020/07/18 .thumbnailマウスオーバー時の上に動くのをやめて、ボックスシャドウに戻す 2020/07/18 haik-footer用 .thumbnailマウスオーバー時の動作をメインの方とあわせる 2020/07/19 メニュー要素が他のマウスオーバーと実行されるため色が重なって出るのでコメント化 今見ると、記述が別のクラスを指しているので変 2020/07/19 メニューにおけるブログ概要の背景を色の重なりを防ぐため透明にする。 2020/07/20 パーツの左右マージンの調整と修正（多数） 2020/07/22 メニュー内のアラートボックスの段落、リストの左右マージンを0にする 2020/08/08 カラムの上マージン1emを下に移動。 パネル内でサムネイルやカラムを使うとマージンから崩れるため 2020/08/22 読みやすくするため自動的に改行を削除していたのを止めて、スタイルは要素ごとに改行する 2020/08/22 サイドメニューを表示しない場合 haik-fullpage-content（fullpage）時のカラム要素の割り当て haik-nomenu-container時のカラム要素の割り当て haik-landing-container時のカラム要素の割り当て サイドメニュー表示時 haik-fullpage-container（wide）時1500px以上時のカラム要素の割り当て を追加。 従来は画面レイアウトを切り替える都度、自分でカスタマイズしなければならなかったのが自動で対応できる。 wide、fullpage、nomenu、landingと自動で切り替えられる 読みにくいのと修正が発生した時、置換するだけで対応できるよう画面レイアウトごとに記述を分けている。 これに伴い、標準defaultのhaik-containerクラスを外して、汎用性をもたせる 2020/08/31 カラム2桁（.col-sm-6）の表示が993px以上ではおかしくなるので修正 2020/09/10 引数でno_hoverクラスを付与できるように新クラスを追加 2020/09/28 ブログタイトルリスト、メニューマウスオーバー時の下線、コメント化 2020/09/29 no_hoverクラスを使えるようにcols.inc.php関数に新たな引数no_hoverを追加 引数を判断してrowクラスにno_hoverを付与するように修正した 2020/09/29 no_hoverクラスを使う際、サムネイルのマウスオーバー範囲を文字のみに戻す （まだ動作しない） 2020/09/30 .thumbnail.no_hover時、リンク文字はマウスオーバー時、下線を出すが、ボタンには出さないようにする （まだ動作しない） 2020/10/01 thumbnail_no_hoverクラスを使う際、クラス指定がないリンク文字列のみ文字色を青にする not([class])で判別する マウスオーバー範囲がリンク文字列のみになる 2020/10/03 .thumbnailマウスオーバー時のシャドウを軽く、複数の影の指定を廃止 2021/01/29 2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し サイドメニューの文字バランスは検討 2021/09/02 メニューの左右余白をiphone7,8,SE2モバイルサイズで余白を減らし、内容を読みやすくする 2021/09/03 メニュー用　ブログリストの文字の大きさをiphoneとAndroidの画面で読みやすいように調整 2021/09/03 .thumbnail.qblog-itemのキャプションの余白を大きくする 2021/09/03 .thumbnail内段落の文字の大きさをiphone等では読みやすくするため少し小さい目に設定 横にした時は大きくするよう調整 2021/09/20 メニュー内の段落記述 サイド メニューでの書式でタブレット画面と高解像度画面での表示を変えて行あたりの字数を増やす。 2021/10/17 メニュー内の段落記述 サイド メニューでの書式でタブレット画面と高解像度画面2000px以上の表示を追加 +++++++++++++++++++++*/ /* ＝＝＝＝＝＝＝＝＝＝＝ レスポンシブ対応時のメディアクエリ 768px以上はメニュー(col-sm-3)(col-md-3)桁が全体の25％から30％になるように調整 スマホ時は検討 2019.03.24 col-sm-3、col-sm-9は通常の画面でのセレクタで、見た目は同じだが、ブログ編集画面ではcol-md-3、col-md-9が専用で出てくるのでセレクタを用意する。 2019.03.29 テーマhaik_coolのパレット色8色分に対応。 全部書くのは大変なので、今後はテーマ毎に記述していく。 2019.04.01 色の調整と標準化。 2019.03.29 メニュー・親子メニューでアクティブ時の文字色を変える。 2019.05.02 1500px以上メニューをのカラム運用もできるように はメイン65％：メニュー35％の比率にする 2019.05.03 .haik-footer でcols,thumnailを使えるようにする 2019.05.04 条件セレクタで冗長性を廃止 重複する似た記述を多く減らせた 2019.05.09 メニューバーのクラス名.barでの罫線類の書式の修正 色毎に変わってしまう問題を解決 2019.09.05 メニュー見出しリンク文字をdisplay: blockをinlineにして改行しないようにした 2019/09/10 レスポンシブ対応時のメディアクエリにテーマseedで使われている.col-sm-3と.col-sm-9を追加 2020/07/22 右メニュー時の画面割合指定で .col-sm-3 .col-sm-9 単体での利用を停止。テーマseedで使われていたが、この記述だとよくわからずエラーを誘発しかねないため。 ＝＝＝＝＝＝＝＝＝＝＝*/ /* 右メニュー時の画面割合指定 */ @media (min-width: 768px) { .col-sm-3.haik-xs-nopadding, .col-md-3.haik-xs-nopadding { width: 30%; } .col-sm-9.haik-xs-nopadding, .col-md-9.haik-xs-nopadding { width: 70%; } } @media (min-width: 1500px) { .col-sm-3.haik-xs-nopadding, .col-md-3.haik-xs-nopadding { width: 35%; } .col-sm-9.haik-xs-nopadding, .col-md-9.haik-xs-nopadding { width: 65%; } } /* 2019/09/11 プッシュ型 左メニュー時の画面割合指定 2019/09/24 プッシュ型 左メニュー時の画面割合指定メディアクエリ1500px追加 */ /* @media (min-width: 768px) { .col-sm-push-3 { left: 30%; } .col-sm-pull-9 { right: 70%; } } @media (min-width: 1500px) { .col-sm-push-3 { left: 35%; } .col-sm-pull-9 { right: 65%; } } */ /*=================== 2019.03.18 .col-sm-3.haik-xs-nopadding , .col-md-3.haik-xs-nopaddin g＝メニューに割り当てられた桁 メニューが入る桁の排他領域を0にして 最適な排他領域を調査する 文字を最小13ポイントから最小18ポイントに大きくしているので調整が必須 2019.03.24 col-sm-3、col-sm-9は通常の画面だが、ブログ編集画面ではcol-md-3、col-md-9が出てくるのでセレクタを用意する。 2019.09.04 メニュー部の上排他領域を増やして詰まった印象を改善する 2019/09/10 .col-sm-3＝メニューに割り当てられた桁にテーマseedで使われている.col-sm-3と.col-sm-9を追加 2019/12/28 .col-sm-3のみの記述はカラム単体になるのでcols,thumnailに割り当てられた桁へ統合 padding-top: 1em; を上位カラムへ移動 2020/01/05 .col-sm-3＝メニューの768px、992px、1200px以上時の左余白の調整 ===================*/ @media (min-width: 768px) { .col-sm-3.haik-xs-nopadding, .col-md-3.haik-xs-nopadding { padding-left: 0px; padding-right: 0px; } } @media (min-width: 992px) { .col-sm-3.haik-xs-nopadding, .col-md-3.haik-xs-nopadding { padding-left: 5px; padding-right: 0px; } } @media (min-width: 1200px) { .col-sm-3.haik-xs-nopadding, .col-md-3.haik-xs-nopadding { padding-left: 10px; padding-right: 0px; } } /*=================== 2019.03.18 .col-sm- ＝cols,thumnailに割り当てられた桁 cols,thumnailで使われるカラムタイルの右側余白を通常より減らす調整をとる形で768px以上の画面で見た時の見栄えをよくしている。 本体コンテンツ（.col-sm-3）の幅を変えているのでここで調整している 2019.03.28 col-sm-6左マージンの調整 2019.04.02 col-sm-6をスマホでも2桁になるよう調整 col-sm-6とあるように6＋6＝12サイズでのカラムなので スマホで2桁になるようになっているが、他のcol-sm-4やcol-sm-5などの設定でどうなるかはまだ未確認。 2019.04.03 col-sm-2,3,4,6をスマホでも2桁になるよう調整 無理に詰め込むとレイアウトが崩れる事を前提に、内容が見られることを優先でwidthを調整 .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4, .haik-container .col-sm-6 で使っている事を確認したのでここに限って調整。 サムネイルとカラムでの段組で対応確認 ただし、Qblogで.col-sm-4と4桁組のcol-sm-4共用になっているのでQblogに併せて設定。 解像度が変動することが前提だと100％の対応はできない。 実際に使えるのは2桁組と4桁組での画面設計が前提になりそう。 6桁組以上は現実的ではないので実装は見送り 2019.04.04 6桁組以上は現実的ではないので実装は見送りと書いたが訂正。 .haik-container .col-sm-0 .haik-container .col-sm-1 を使っていることがわかったのでこれにも対応する。 条件毎に.col-sm-4だけ記述が別になっているものは ブログのサムネイル画面の利用によっては分ける時のため。 2019.04.30 .haik-container .col-sm-0 p, .haik-container .col-sm-1 p, .haik-container .col-sm-2 p, .haik-container .col-sm-3 p, .haik-container .col-sm-4 p, .haik-container .col-sm-6 p の段落の左右マージンを調整。colsで並べたときおかしくなっていたのを修正。 2019.05.05 .haik-container、.haik-menu・.haik-article-menu、.haik-footerそれぞれ桁分け比率が違う事に注意 2019.05.10 .col-sm-4でブログサムネイル表示とサムネイル・カラム表示がかぶらないようにわける .haik-container .col-sm-4 .haik-container #qblog .col-sm-4 2019.05.11 ipad向けに%比率を調整 2019.05.11 float:left;をコメント化してみる 2019.05.11 float:left;のコメント化はしない方がいい 2019.05.12 display:flex対応次第、float:left;をコメント化する 2019.05.13 レイアウト崩れを擬似的に起こしてメインとフッターで起こっている事粗 調べてみた。結果、 margin: 0.2em;だった所が悪さをしていた。 padding-left: .25em; padding-right: .25em; を入れるとなおった 2019.05.15 重複しているwidth指定を統合 2019.05.15 ipad向けに%比率を調整テスト 2019.05.15 ipad向けに%比率を調整テストしたが、変わらない。元に戻す。 2019.05.15 メイン画面.haik-container のカラム分割はメディアクエリ992pxで3桁配置は見た目が悪いのでコメント化してみる。カスタマイズで応じる機能とする。 2019.05.16 .col-sの画面比率パーセンテージを1％減らして変える 2019.05.16 【試験】.haik-container .col-sのパーセンテージを5％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを3％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを2％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを1％減らして変えてみる OK 【試験】.haik-container .col-sのパーセンテージを0％減らして変えてみる NO 　 【結果】.haik-container .col-sのパーセンテージを1％減らすことでOK 　 2019.05.16 thumbnail高さが可変するように設定（ブログカードは固定） 2019.05.16 colsの比率を20％、25％、33.333％、50％、100％ではなく、19％、24％、32％、49％、99％とする .col-nagamira-6, はコピー識別用ダミー 2019/09/15 カラムcol-sm-0~6 は上マージンを0.8emから0.618emにする 2019/09/15 ihpone5,5s系の解像度360px未満時カラムcol-sm-0~6の領域割り当てを99%にする display:float;を削除 2019/12/09 モバイル解像度の360px以下の時、.col-sm-6の2カラム表示が正常に出ないエラーを修正 2019/12/28 .col-sm-3のみの記述はカラム単体になるのでcols,thumnailに割り当てられた桁へ統合 padding-top: 1em; を上位カラムへ移動 （この記述へ） 2019/12/28 .col-sm-の誤って記述していた部分を調整 2019/12/28 .haik-container .col-sm-の行間を調整 padding: 0.3em 0.1em;へ　上下を広げる 2020/01/06 .haik-container .col-sm-のmargin-top: 1em;に統一 メインコンテナのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 2020/01/15 メインコンテナのカラム比率セレクタの}閉じ忘れを修正 2020/01/17 メインコンテナのカラム比率667px時を追加 （iphone6,7,8向け） カスタマイズ用に保存、コメントアウト。 2020/07/21 フッターのサムネイルのマージンの記述で冗長なところを統合 2020/08/08 カラムの上マージン1emを下に移動。 パネル内でサムネイルやカラムを使うとマージンから崩れるため 2020/08/22 サイドメニューを表示しない場合 haik-fullpage-content（fullpage）時のカラム要素の割り当て haik-nomenu-container時のカラム要素の割り当て haik-landing-container時のカラム要素の割り当て サイドメニュー表示時 haik-fullpage-container（wide）時1500px以上時のカラム要素の割り当て を追加。 従来は画面レイアウトを切り替える都度、自分でカスタマイズしなければならなかったのが自動で対応できる。 wide、fullpage、nomenu、landingと自動で切り替えられる 読みにくいのと修正が発生した時、置換するだけで対応できるよう画面レイアウトごとに記述を分けている。 設計ミスなのか haik-fullpage-content（fullpage）とhaik-fullpage-container（wide） の名前が似ていて混同しやすい これに伴い、標準defaultのhaik-containerクラスを外して、汎用性をもたせようとしたがメニューが連動してしまうので断念。 2020/08/31 カラム2桁（.col-sm-6）の表示が993px以上ではおかしくなるので修正 2020/09/01 #qblog .col-sm-4を.col-sm-4に統合（42箇所） ===================*/ .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4, .haik-container .col-sm-6, .haik-container .col-nagamira-6 { margin-bottom: 1em; width: 99%; } @media (min-width: 360px) { .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4, .haik-container .col-sm-6, .haik-container .col-nagamira-6 { width: 49.5%; } } @media (min-width: 768px) { .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4, .haik-container .col-sm-6, .haik-container .col-nagamira-6 { width: 49.5%; } } @media (min-width: 992px) { .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4 { width: 33%; } } @media (min-width: 1200px) { .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4 { width: 33%; } } @media (min-width: 1500px) { .haik-container .col-sm-0, .haik-container .col-sm-1, .haik-container .col-sm-2, .haik-container .col-sm-3, .haik-container .col-sm-4 { width: 24.5%; } } /* haik-fullpage-container（wide）時のカラム要素の割り当て */ @media (min-width: 1500px) { .haik-fullpage-container .col-sm-0, .haik-fullpage-container .col-sm-1, .haik-fullpage-container .col-sm-2, .haik-fullpage-container .col-sm-3, .haik-fullpage-container .col-sm-4, .haik-fullpage-container .col-nagamira-6 { width: 33%; } } /* 2020/08/22 メニューを表示しない場合 haik-nomenu-container時のカラム要素の割り当て */ @media (min-width: 768px) { .haik-nomenu-container .col-sm-0, .haik-nomenu-container .col-sm-1, .haik-nomenu-container .col-sm-2, .haik-nomenu-container .col-sm-3, .haik-nomenu-container .col-sm-4, .haik-nomenu-container .col-nagamira-6 { width: 33%; } } @media (min-width: 992px) { .haik-nomenu-container .col-sm-0, .haik-nomenu-container .col-sm-1, .haik-nomenu-container .col-sm-2, .haik-nomenu-container .col-sm-3, .haik-nomenu-container .col-sm-4, .haik-nomenu-container .col-nagamira-6 { width: 33%; } } @media (min-width: 1200px) { .haik-nomenu-container .col-sm-0, .haik-nomenu-container .col-sm-1, .haik-nomenu-container .col-sm-2, .haik-nomenu-container .col-sm-3, .haik-nomenu-container .col-sm-4, .haik-nomenu-container .col-nagamira-6 { width: 24.5%; } } @media (min-width: 1500px) { .haik-nomenu-container .col-sm-0, .haik-nomenu-container .col-sm-1, .haik-nomenu-container .col-sm-2, .haik-nomenu-container .col-sm-3, .haik-nomenu-container .col-sm-4, .haik-nomenu-container .col-nagamira-6 { width: 19%; } } /* 2020/08/22 メニューを表示しない場合 haik-fullpage-content時のカラム要素の割り当て */ @media (min-width: 768px) { .haik-fullpage-content .col-sm-0, .haik-fullpage-content .col-sm-1, .haik-fullpage-content .col-sm-2, .haik-fullpage-content .col-sm-3, .haik-fullpage-content .col-sm-4 { width: 33%; } } @media (min-width: 992px) { .haik-fullpage-content .col-sm-0, .haik-fullpage-content .col-sm-1, .haik-fullpage-content .col-sm-2, .haik-fullpage-content .col-sm-3, .haik-fullpage-content .col-sm-4 { width: 33%; } } @media (min-width: 1200px) { .haik-fullpage-content .col-sm-0, .haik-fullpage-content .col-sm-1, .haik-fullpage-content .col-sm-2, .haik-fullpage-content .col-sm-3, .haik-fullpage-content .col-sm-4 { width: 24.5%; } } @media (min-width: 1500px) { .haik-fullpage-content .col-sm-0, .haik-fullpage-content .col-sm-1, .haik-fullpage-content .col-sm-2, .haik-fullpage-content .col-sm-3, .haik-fullpage-content .col-sm-4 { width: 19%; } } /* メニューを表示しない場合 haik-landing-container時のカラム要素の割り当て */ @media (min-width: 768px) { .haik-landing-container .col-sm-0, .haik-landing-container .col-sm-1, .haik-landing-container .col-sm-2, .haik-landing-container .col-sm-3, .haik-landing-container .col-sm-4 { width: 33%; } } @media (min-width: 992px) { .haik-landing-container .col-sm-0, .haik-landing-container .col-sm-1, .haik-landing-container .col-sm-2, .haik-landing-container .col-sm-3, .haik-landing-container .col-sm-4 { width: 33%; } } @media (min-width: 1200px) { .haik-landing-container .col-sm-0, .haik-landing-container .col-sm-1, .haik-landing-container .col-sm-2, .haik-landing-container .col-sm-3, .haik-landing-container .col-sm-4 { width: 24.5%; } } @media (min-width: 1500px) { .haik-landing-container .col-sm-0, .haik-landing-container .col-sm-1, .haik-landing-container .col-sm-2, .haik-landing-container .col-sm-3, .haik-landing-container .col-sm-4{ width: 19%; } } /*=================== 2019/10/12 メールフォームなどで使われるラベルのクラス「.control-label.col-sm-3」の上マージンを0に上書きする カラム指定のcol-sm-3クラスをサムネイル、カラム、ラベルと共用にしている。 ラベルのクラスの属性を明確に指定しないとサムネイル、カラムのマージン属性がそのまま使われる。 ===================*/ .control-label.col-sm-3 { margin-top: 0em; } /*=================== 2019.05.10 問い合わせフォーム部品配置で.col-sm-9　.col-sm-3がメインコンテナとメニューで共用になっているので共用にならないように改修 2020/01/15 問い合わせフォーム部品配置で ラベル類：.form-group .col-sm-3 入力フィールド：.form-group .col-sm-9 のレスポンシブ対応指定をこの位置へ移動してメイン画面のカラム指定を打ち消す 入力フォームのカラム指定をコメントアウトしてシンプルにする ===================*/ .form-group .col-sm-3 { width: 99%; } .form-group .col-sm-9 { width: 99%; } /* .form-group .col-sm-9 { width: 99%; } @media (min-width: 768px){ .form-group .col-sm-3 { width: 99%; } .form-group .col-sm-9 { width: 99%; } } @media (min-width: 992px){ .form-group .col-sm-3 { width: 99%; } .form-group .col-sm-9 { width: 99%; } } @media (min-width: 1200px){ .qform-bootstrap.qform-horizontal .col-sm-3 { width: 99%; } .qform-bootstrap.qform-horizontal .col-sm-9 { width: 99%; } } */ /*=================== 2019.05.01 .haik-menu と.haik-article-menu でcols,thumnailを使えるようにする 基本的にサイドメニューが表示される場合は100％桁のみ スマホ画面時は2桁で ブログのページ遷移ボタンは表示しない 【注意】 ブログリスト表示はグリッドデザインのみ対応。リスト形式のデザインは動作保証せず。 2019.05.05 .haik-container、.haik-menu・.haik-article-menu、.haik-footerそれぞれ桁分け比率が違う事に注意 2019.05.10 .col-sm-4でブログサムネイル表示とサムネイル・カラム表示がかぶらないようにわける .haik-menu .col-sm-4 .haik-menu #qblog .col-sm-4 2019.05.11 ipad向けに%比率を調整 2019.05.11 float:left;をコメント化してみる 2019.05.11 float:left;のコメント化はしない方がいい 2019.05.12 display:flex対応次第、float:left;をコメント化する 2019.05.16 colsの比率を20％、25％、33.333％、50％、100％ではなく、19％、24％、32％、49％、99％とする .col-nagamira-6, はコピー識別用ダミー 2019/09/15 カラムcol-sm-0~6 は上マージンを0.8emから0.618emにする 2019/09/15 display:float;を削除 2020/01/06 メニューのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 2020/09/01 #qblog .col-sm-4を.col-sm-4に統合（42箇所） ===================*/ .haik-menu .col-sm-0, .haik-menu .col-sm-1, .haik-menu .col-sm-2, .haik-menu .col-sm-3, .haik-menu .col-sm-4, .haik-menu .col-sm-6, .haik-menu .col-nagamira-6, .haik-article-menu .col-sm-0, .haik-article-menu .col-sm-1, .haik-article-menu .col-sm-2, .haik-article-menu .col-sm-3, .haik-article-menu .col-sm-4, .haik-article-menu .col-sm-6, .haik-article-menu .col-nagamira-6 { margin-top: 0.618em; width: 49%; } /*ブログのページ遷移ボタンはメニューでは最初から表示しない*/ .haik-menu .qblog-list .pagination, .haik-article-menu .pagination { display: none; } @media (min-width: 768px) { .haik-menu .col-sm-0, .haik-menu .col-sm-1, .haik-menu .col-sm-2, .haik-menu .col-sm-3, .haik-menu .col-sm-4, .haik-menu .col-sm-6, .haik-menu .col-nagamira-6, .haik-article-menu .col-sm-0, .haik-article-menu .col-sm-1, .haik-article-menu .col-sm-2, .haik-article-menu .col-sm-3, .haik-article-menu .col-sm-4, .haik-article-menu .col-sm-6, .haik-article-menu .col-nagamira-6 { width: 99%; } } @media (min-width: 1500px) { .haik-menu .col-sm-0, .haik-menu .col-sm-1, .haik-menu .col-sm-2, .haik-menu .col-sm-3, .haik-menu .col-sm-4, .haik-menu .col-sm-6, .haik-menu .col-nagamira-6, .haik-article-menu .col-sm-0, .haik-article-menu .col-sm-1, .haik-article-menu .col-sm-2, .haik-article-menu .col-sm-3, .haik-article-menu .col-sm-4, .haik-article-menu .col-sm-6, .haik-article-menu .col-nagamira-6 { width: 49.5%; } } /*=================== 2019.05.03 .haik-footer でcols,thumnailを使えるようにする 2019.05.05 .haik-container、.haik-menu・.haik-article-menu、.haik-footerそれぞれ桁分け比率が違う事に注意 2019.05.10 .col-sm-4でブログサムネイル表示とサムネイル・カラム表示がかぶらないようにわける .haik-footer .col-sm-4 .haik-footer #qblog .col-sm-4 2019.05.11 float:left;をコメント化してみる 2019.05.11 float:left;のコメント化はしない方がいい 2019.05.12 display:flex対応次第、float:left;をコメント化する 2019.05.16 colsの比率を20％、25％、33.333％、50％、100％ではなく、19％、24％、32％、49％、99％とする 2019.05.01 カラムの比率調整 2019.05.24 フッターのカラム比率調整 カスタマイズに備えて 2019/09/15 ihpone5,5s系の解像度360px未満時カラムcol-sm-0~6の領域割り当てを99%にする display:float;を削除 2019/12/28 .haik-footer .col-sm-の排他領域上下設定を追加 2019/12/28 .haik-footer .col-sm-の行間を調整 padding: 0.5em 0.1em;へ　上下を広げる 2020/01/06 .haik-footer .col-sm-のmargin-top: 1em;に統一 2020/01/06 フッターのカラム比率調整 32%の比率を33%に修正 24%の比率を24.5%に修正 49%の比率を49.5%に修正 .col-nagamira-6, はコピー識別用ダミー 2020/01/17 フッターのカラム比率667px時を追加 （iphone6,7,8向け） ただし、カスタマイズ用に保存コメントアウト。 2020/08/08 カラムの上マージン1emを下に移動。 パネル内でサムネイルやカラムを使うとマージンから崩れるため 2020/09/01 #qblog .col-sm-4を.col-sm-4に統合（42箇所） ===================*/ .haik-footer .col-sm-0 p, .haik-footer .col-sm-1 p, .haik-footer .col-sm-2 p, .haik-footer .col-sm-3 p, .haik-footer .col-sm-4 p, .haik-footer .col-sm-6 p, .haik-footer .col-nagamira-6 p { margin-left: .25em; margin-right: .25em; } .haik-footer .col-sm-0, .haik-footer .col-sm-1, .haik-footer .col-sm-2, .haik-footer .col-sm-3, .haik-footer .col-sm-4, .haik-footer .col-sm-6, .haik-footer .col-nagamira-6 { margin-bottom: 1em; width: 99%; } @media (min-width: 360px) { .haik-footer .col-sm-0, .haik-footer .col-sm-1, .haik-footer .col-sm-2, .haik-footer .col-sm-3, .haik-footer .col-sm-4, .haik-footer .col-sm-6, .haik-footer .col-nagamira-6 { width: 49.5%; } } /* 2020/01/17 カスタマイズ用に保存、コメントアウト。 */ /* @media (min-width: 667px){ .haik-footer .col-sm-0, .haik-footer .col-sm-1, .haik-footer .col-sm-2, .haik-footer .col-sm-3, .haik-footer .col-sm-4, .haik-footer .col-sm-6, .haik-footer .col-nagamira-6{ width: 33%; } } */ @media (min-width: 768px) { .haik-footer .col-sm-0, .haik-footer .col-sm-1, .haik-footer .col-sm-2, .haik-footer .col-sm-3 { width: 33%; } .haik-footer .col-sm-4 { width: 33%; } .haik-footer .col-sm-6 { width: 49.5%; } } @media (min-width: 992px) { .haik-footer .col-sm-0, .haik-footer .col-sm-1 { width: 24.5%; } .haik-footer .col-sm-2 { width: 24.5%; } .haik-footer .col-sm-3 { width: 24.5%; } .haik-footer .col-sm-4 { width: 33%; } } @media (min-width: 1200px) { .haik-footer .col-sm-0, .haik-footer .col-sm-1, .haik-footer .col-sm-2 { width: 19%; } .haik-footer .col-sm-3 { width: 24.5%; } .haik-footer .col-sm-4 { width: 24.5%; } } @media (min-width: 1500px) { .haik-footer .col-sm-4 { width: 33%; } } /*================================== 2019.04.04 thumbnailの高さをそろえる 12桁まで対応。 あらかじめ最低限の高さをmin-heightで設定しておけばレイアウト崩れはかなり防げる メンテナンス性を考慮してnagamira_css1から移動。 オーバーライドする形でこちらを利用していく。 マージンや絶対領域などの大きさを調整していく。 2019.04.29 thumbnailキャプションのマージン調整 padding:9px→5px 2019.04.29 thumbnailのmarginを4辺毎に改修。詰めすぎの印象を改修 2019.04.30 thumbnailのp 段落の行間を調整 2019.05.02 haik-menuのthumnailsと衝突しないよう .haik-container クラス専用にする。 .haik-container thumbnailの画像をトリミングして大きさを固定する 2019.05.02 .haik-container thumbnailの大きさに入りきらないテキストを削除するように修正 原則としてタイトルのみ。3行内に収まるようにする。 2019.05.11 row子要素の高さをそろえるflexboxをnagamira_css1に設置したのでheight指定をコメント化、100%にする 2019.05.11 thumbnailの対応が十分ではないので768px未満は対応が十分ではないため高さを固定,768px以上で可変するようにする 2019.05.12 imgの％率を調整 （追加　thumbnailの対応は無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 .thumbnail .captionのpadding: 0px;を復活 2019.05.16 .thumbnailの高さを全可変にする試験　OK 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019.05.18 .thumbnailの行間を削除　デフォルトの1.8emを継承 ====================================*/ .thumbnail .caption { padding: 0px; color: #333; } /* 2019/09/28 サムネイルの段落内の画像の上マージンを0にする 必要な時はコメントを外して使う .thumbnail p > img{ margin-top:0px; } */ /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 枠高さはheightは100%のままでよい 2020/07/21 メインの.thumbnailのマージンを調整 */ .haik-container .thumbnail { position: relative; margin: 0.3em 0.25em; word-break: break-all; text-overflow: ellipsis; overflow: hidden; /*height: 235px;*/ height: 100%; } /*============= 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） 2019/10/05 .thumbnail内のimgの高さをレスポンシブ対応にして、ブレークポイント毎に固定サイズにする 画像のサイズと高さによっては見出しが隠れてしまうため また列数によって見やすい高さが変わるので調整する。 メニューは高さを固定していたので問題なし。 2020/01/17 .thumbnail内のimgの画像の比率を4：3に近づくように修正 2020/01/17 .thumbnail内のimgの画像667px時の高さを170pxに調整 2020/01/20 .thumbnail内のimgの画像1200px時の高さを180pxに調整 【注意　画像の高さの修正を行う場合】 nagamira_css3h.css内にある .haik-footer .qblog-item .qblog_thumbnail_box, .haik-container .qblog-item .qblog_thumbnail_box { の画像の高さも修正すること。 img 属性がないので十分確認すること =============*/ .haik-container .thumbnail img { width: 100%; height: 155px; object-fit: cover; } @media (min-width: 360px) { .haik-container .thumbnail img { height: 100px; } } @media (min-width: 568px) { .haik-container .thumbnail img { height: 160px; } } @media (min-width: 667px) { .haik-container .thumbnail img { height: 170px; } } @media (min-width: 768px) { .haik-container .thumbnail img { height: 150px; } } @media (min-width: 992px) { .haik-container .thumbnail img { height: 160px; } } @media (min-width: 1200px) { .haik-container .thumbnail img { height: 180px; } } /* 2019/09/22 .thumbnail内段落のimgを拡大して余白を減らす transform:scale()で拡大する 見た目が余白が多すぎるので見た目を改善する 画像がP段落の中にimgタグで入っているため、段落と同じマージンが与えられる また、画像の下にマージンを付与することで説明との空間を改善 2019/09/22 .thumbnail内段落のimgを拡大して余白を減らす所でさらにスケールを1.99倍とする事で枠線との隙間がほぼなくなる メニューでは上に隙間が出るが許容範囲 */ .thumbnail p>img { margin-bottom: 1em; transform: scale(1.199); } /* @media (min-width: 568px){ .haik-container .thumbnail { margin: 0; height: 280px; } .haik-container .thumbnail img { height: 150px; } } @media (min-width: 768px){ .haik-container .thumbnail { height: 275px; } .haik-container .thumbnail img { height: 155px; } } @media (min-width: 992px){ .haik-container .thumbnail { height: 285px; } .haik-container .thumbnail img { height: 160px; } } @media (min-width: 1200px){ .haik-container .thumbnail { height: 305px; } .haik-container .thumbnail img { height: 170px; } } */ .haik-container .thumbnail p { margin: 0em; margin-left:0.3em; } @media (min-width: 320px) { .haik-container .thumbnail p { margin-left:0.3em; } } @media (min-width: 360px) { .haik-container .thumbnail p { margin-left:0.1em; } } @media (min-width: 375px) { .haik-container .thumbnail p { margin-left:0.15em; } } @media (min-width: 568px) { .haik-container .thumbnail p { margin: 0.2em; margin-left:0.2em; } } /* 2021/09/03 .thumbnail内段落の文字の大きさをiphone等では読みやすくするため少し小さい目に設定 横にした時は大きくするよう調整 */ .haik-container .thumbnail p { font-size: 20px; } /*iphone5,SE*/ @media (min-width: 320px) { .haik-container .thumbnail p { font-size: 24px; } } /*Android*/ @media (min-width: 360px) { .haik-container .thumbnail p { font-size: 20px; } } /*iphone7,8,SE2*/ @media (min-width: 375px) { .haik-container .thumbnail p { font-size: 22px; } } /*モバイル横にした時*/ @media (min-width: 568px) { .haik-container .thumbnail p { font-size: 26px; } } @media (min-width: 768px) { .haik-container .thumbnail p { font-size: 20px; } } @media (min-width: 992px) { .haik-container .thumbnail p { font-size: 22px; } } @media (min-width: 1200px) { .haik-container .thumbnail p { font-size: 24px; } } @media (min-width: 1500px) { .haik-container .thumbnail p { font-size: 26px; } } @media (min-width: 2000px) { .haik-container .thumbnail p { font-size: 28px; } } @media (min-width: 2500px) { .haik-container .thumbnail p { font-size: 30px; } } /*=================== 2019.09.29 .haik-container用 .thumbnailマウスオーバー時 2019/10/18 .thumbnailマウスオーバー時の動きを大きく-4px→-8px 2019/12/16 実験 .thumbnailマウスオーバー時の動きをtransform: scale(1.03);に変更 従来の上に移動するのは予備として残す 2019/12/25終了。やはり上に移動するより処理が少し重くなる。 （とくにＩＥ系党ブラウザで目立つ） 2019/12/20 参考：サムネイルカードの効果例（実験のみ） transform: rotatez(360deg); transition: 0.5s ease; transition: 0.3s ease; transform: rotateZ(5deg); 採用しなかった理由 ボタンがくるくるまわったら面白いが、飽きたら日常的に使おうと思わなくなる 2019/12/27 .haik-container用 .thumbnailマウスオーバー時text-decoration: none;を追加。 main.cssの内容を削除する場合に備えて 2019/12/31 .thumbnailマウスオーバー時のボックスシャドウを廃止。処理が重くなるため。 その代わりopacity: .5;を追加 2020/07/18 .thumbnailマウスオーバー時の上に動くのをやめて、ボックスシャドウに戻す 動かすと他のマウスオーバー時の動きとの整合性がとれないので 2020/10/03 .thumbnailマウスオーバー時のシャドウを軽く、複数の影の指定を廃止 モバイル画面時の影の大きさを小さくする ===================*/ .thumbnail:hover { box-shadow: 0 5px 5px #777; border: 2px solid #fff; opacity: .7; /* transform: translateY(-8px); */ transition: 0.3s ease; text-decoration: none; } @media (min-width:768px) { .thumbnail:hover { box-shadow: 0 5px 10px #777; } } /*=================== 2019/12/08 クラスthumbnail_no_hoverを追加 thumbnailマウスオーバー時の効果を無効にする。 colsのマウスオーバー時の効果クラスcols-link-expantionの逆バージョン thumbnailを通常のサムネイルとして使いたい場合など、 マウス反応で余分な動きをさせたくない場合に使う。 見た目の違い .thumbnailのボックスシャドウ・影が出ない マウスオーバー時の動きも影もない 枠内のリンクは今まで通り枠一杯に反応する。 【例】 #html2(
) #thumbnails(++++){{ 本文が入ります ++++ 本文が入ります }} #html2(
) 2019/12/25 thumbnail_no_hover時のサムネイルの枠線が細いので太くする 2019/12/28 thumbnail_no_hover時のサムネイルの枠線を細くして色を濃くする 2019/12/28 thumbnail_no_hover時のサムネイルの枠線角の丸めを0にする 2019/12/31 thumbnail_no_hover時のサムネイルの透明度を 1;へ 2020/09/10 引数でno_hoverクラスを付与できるように新しくno_hoverクラスを追加 .thumbnail.no_hover .thumbnail.no_hover:hover .thumbnail.no_hover: a:hover::after #html2関数だと閉じ忘れなど多いので不便 2020/09/29 no_hoverクラスを使えるようにcols.inc.php関数に新たな引数no_hoverを追加 引数を判断してrowクラスにno_hoverを付与するように修正した 2020/09/29 no_hoverクラスを使う際、サムネイルのマウスオーバー範囲を文字のみに戻す ボタンと複数リンク文字の配置で混乱したため （まだうまく動作しない） 2020/09/30 .thumbnail.no_hover時、リンク文字はマウスオーバー時、下線を出すが、ボタンには出さないようにする （まだうまく動作しない） 2020/10/01 thumbnail_no_hoverクラスを使う際、クラス指定がないリンク文字列のみ文字色を青にする not([class])で判別する マウスオーバー範囲がリンク文字列のみになる ===================*/ .thumbnail_no_hover .thumbnail { border: 1px solid #999; border-radius: 0; box-shadow: none; } .thumbnail_no_hover .thumbnail:hover { box-shadow: none; transform: none; opacity: 1; } .thumbnail_no_hover .thumbnail a:hover { text-decoration: underline; } .thumbnail_no_hover .thumbnail a:hover::after { transition: none; background-color: transparent; } .thumbnail_no_hover .thumbnail a.btn:hover { text-decoration: none; } /* 2020/10/01 thumbnail_no_hoverクラスを使う際、クラス指定がないリンク文字列のみ文字色を青にする not([class])で判別する マウスオーバー範囲がリンク文字列のみになる */ .thumbnail_no_hover .thumbnail a:not([class]) { color: #337ab7; position: relative; z-index: 3; } /*================================== 2019.05.05 .haik-container 用 .thumbnail.qblog-itemスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 2019.05.11 thumbnailの対応が十分ではないので768px未満は対応が十分ではないため高さを固定,768px以上で可変するようにする 2019.05.12 ％率を調整 （追加　thumbnailの対応は無関係だった） 2019.05.16 .thumbnailの高さを全可変にする試験　OK 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019/12/29 .thumbnail.qblog-itemの背景を白にする。 透明だとタイトル表示が中途半端になってしまう 2020/01/06 .haik-container .thumbnail.qblog-itemのマージンを.haik-container .thumbnailと併せる 別々なのは概要入りサムネイルで使っている可能性があるため。 2020/07/11 .haik-container .thumbnail.qblog-itemの背景色を半透明を継承する 2021/09/03 .thumbnail.qblog-itemのキャプションの余白を大きくする ====================================*/ .haik-container .thumbnail.qblog-item .caption { padding: 4px; /* padding-left: 0px; */ padding-right: 0px; color: #333; } .haik-container .thumbnail.qblog-item { position: relative; margin: 0.1em 0.2em 0.1em; word-break: break-all; text-overflow: ellipsis; overflow: hidden; height: 100%; } /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている */ .haik-container .thumbnail.qblog-item img { /*height: 120px;*/ height: auto; width: 100%; object-fit: cover; } /* @media (min-width: 568px){ .haik-container .thumbnail.qblog-item { height: 245px; } .haik-container .thumbnail.qblog-item img { height: 165px; } } @media (min-width: 768px){ .haik-container .thumbnail.qblog-item { height: 245px; } .haik-container .thumbnail.qblog-item img { height:150px; } } @media (min-width: 992px){ .haik-container .thumbnail.qblog-item { height: 265px; } .haik-container .thumbnail.qblog-item img { height:170px; } } @media (min-width: 1200px){ .haik-container .thumbnail.qblog-item { height: 275px; } .haik-container .thumbnail.qblog-item img { height:190px; } } */ /*=================== 2019.05.02 .haik-menu と.haik-article-menu 内の thumnailスタイル 2019.05.11 thumbnailの対応が十分ではないので768px未満は対応が十分ではないため高さを固定,768px以上で可変するようにする （追加　thumbnailの対応は無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 2019.05.16 thumbnail高さが可変するように設定 （カスタマイズ時に変えやすいようにしておく） 2019.05.16 .thumbnailの高さを全可変にする試験　OK 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019.05.19 qblogのthumbnailの上下に余白ができるよう調整 margin-top: 0.3→0.5em; height:100%→99% 高さを100%にしない方がよい 2019.03.30 box-sizing: border-box;を追加 2021/09/02 【試作中】メニューの左右余白をiphone7,8,SE2で余白を減らし、文字を大きくして内容を読みやすくする ===================*/ .haik-menu .thumbnail .caption, .haik-article-menu .thumbnail .caption { padding: 2px; padding-left: 0px; padding-right: 0px; color: #333; } .haik-menu .thumbnail, .haik-article-menu .thumbnail { position: relative; margin: 0.5em 0.2em; word-break: break-all; text-overflow: ellipsis; overflow: hidden; /* height: 215px; */ height: 99%; box-sizing: border-box; } /*モバイル画面時*/ @media (min-width: 320px) { .haik-menu .thumbnail, .haik-article-menu .thumbnail { margin: 0.5em 0.1em 0.5em 0.1em; } } /*モバイル横にした時*/ @media (min-width: 568px) { .haik-menu .thumbnail, .haik-article-menu .thumbnail { margin: 0.5em 0.2em; } } .haik-menu .thumbnail p, .haik-article-menu .thumbnail p { margin: 0.1em; } /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019/09/23 メニュー内での.thumbnail内のimgの高さを130pxに固定する（autoは予備コメント化） 大きさを固定しないと縦長の写真だとメニューそのものが長くなってしまうため。 */ .haik-menu .thumbnail img, .haik-article-menu .thumbnail img { height: 130px; /*height: auto;*/ width: 100%; object-fit: cover; } /* @media (min-width: 568px){ .haik-menu .thumbnail, .haik-article-menu .thumbnail { height: 245px; } .haik-menu .thumbnail img, .haik-article-menu .thumbnail img { height: 150px; } } @media (min-width: 768px){ .haik-menu .thumbnail, .haik-article-menu .thumbnail { height: 245px; } .haik-menu .thumbnail img, .haik-article-menu .thumbnail img { height: 155px; } } @media (min-width: 992px){ .haik-menu .thumbnail, .haik-article-menu .thumbnail { height: 260px; } } @media (min-width: 1200px){ .haik-menu .thumbnail, .haik-article-menu .thumbnail { height: 265px; } } */ /*=================== 2019.09.19 haik-menu、haik-article-menu用 .thumbnailマウスオーバー時 2019/10/18 .thumbnailマウスオーバー時の動きを大きく-4px→-8px 2019/12/27 haik-menu、haik-article-menu用 .thumbnailマウスオーバー時　.thumbnailから継承できるため、凍結 ===================*/ /* .haik-menu .thumbnail:hover, .haik-article-menu .thumbnail:hover { box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1); transform: translateY(-8px); transition: 0.3s ease; } */ /*=================== .haik-menu と.haik-article-menu 内の.thumbnail.qblog-itemスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 枠デザインは.haik-menu と.haik-article-menu 内の thumnailスタイルから継承 2019.05.11 row子要素の高さをそろえるflexboxをnagamira_css1に設置したので thumbnailのheight指定をコメント化、100%にする 2019.05.11 thumbnailのimgのheight指定を調整。flexboxの設置に伴うもの。 2019.05.11 thumbnailの対応が十分ではないので768px未満は対応が十分ではないため高さを固定,768px以上で可変するようにする （追加　thumbnailの対応は無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 2019.05.16 thumbnail高さが可変するように設定 （カスタマイズ時に変えやすいようにしておく） 2019.05.16 .thumbnailの高さを全可変にする試験　OK 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019.05.19 qblogのthumbnailの上下に余白ができるよう調整 height: 100%→99% ===================*/ .haik-menu .thumbnail.qblog-item, .haik-article-menu .thumbnail.qblog-item { /*height: 218px;*/ height: 99%; } .haik-menu .thumbnail.qblog-item p, .haik-article-menu .thumbnail.qblog-item p { margin: 0.1em; } /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている */ .haik-menu .thumbnail.qblog-item img, .haik-article-menu .thumbnail.qblog-item img { /*height:130px;*/ height: auto; width: 99%; object-fit: cover; } /* @media (min-width: 568px){ .haik-menu .thumbnail.qblog-item, .haik-article-menu .thumbnail.qblog-item { height: 245px; } .haik-menu .thumbnail.qblog-item img, .haik-article-menu .thumbnail.qblog-item img { height:150px; } } @media (min-width: 768px){ .haik-menu .thumbnail.qblog-item, .haik-article-menu .thumbnail.qblog-item { height: 245px; } .haik-menu .thumbnail.qblog-item img, .haik-article-menu .thumbnail.qblog-item img { height: 160px; } } @media (min-width: 992px){ .haik-menu .thumbnail.qblog-item, .haik-article-menu .thumbnail.qblog-item { height: 260px; } } @media (min-width: 1200px){ .haik-menu .thumbnail.qblog-item, .haik-article-menu .thumbnail.qblog-item { height: 265px; } } */ /*=================== 2019.05.02 .haik-footer 内の thumnailスタイル 2019.05.11 row子要素の高さをそろえるflexboxをnagamira_css1に設置したので thumbnailのheight指定をコメント化、100%にする 2019.05.11 thumbnailのimgのheight指定を調整。flexboxの設置に伴うもの。 2019.05.11 thumbnailの対応が十分ではないので768px未満は対応が十分ではないため高さを固定,768px以上で可変するようにする （追加　thumbnailの対応は無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 2019.05.16 thumbnail高さが可変するように設定（ブログカードは固定） 2019.05.16 .thumbnailの高さを全可変にする試験　OK 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019.05.19 qblogのthumbnailの上下に余白ができるよう調整 margin-top: 0.3→0.5em; 左右マージン合計で0.7になるようにする height:100%→98% 高さを100%にしない方がよい 2020/01/16 フッターのサムネイルの段落pのマージン上を0に調整 2020/07/21 フッターのサムネイルのマージンの記述で冗長なところを統合 ===================*/ .haik-footer .thumbnail .caption { padding: 2px 0; color: #333; } .haik-footer .thumbnail { position: relative; margin: 0.5em 0.2em 0.4em; word-break: break-all; text-overflow: ellipsis; border: 2px solid #aaa; overflow: hidden; /*height: 235px;*/ height: 98%; } .haik-footer .thumbnail p { line-height: 1.7em; margin-top: 0em; } /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている 2019/10/05 フッターの.thumbnail内のimgの高さをレスポンシブ対応にして、ブレークポイント毎に固定サイズにする サイズによっては見出しが隠れてしまうため。 また列数によって見やすい高さが変わるので調整する。 メニューは高さを固定していたので問題なし。 2020/01/17 フッターの.thumbnail内のimgの667px時の画像高さを170pxに調整 */ .haik-footer .thumbnail img { height: 140px; width: 100%; object-fit: cover; } @media (min-width: 360px) { .haik-footer .thumbnail img { height: 100px; } } @media (min-width: 568px) { .haik-footer .thumbnail img { height: 150px; } } @media (min-width: 667px) { .haik-footer .thumbnail img { height: 170px; } } @media (min-width: 768px) { .haik-footer .thumbnail img { height: 140px; } } @media (min-width: 992px) { .haik-footer .thumbnail img { height: 130px; } } @media (min-width: 1200px) { .haik-footer .thumbnail img { height: 150px; } } /* @media (min-width: 568px){ .haik-footer .thumbnail { height: 265px; } .haik-footer .thumbnail img { height: 150px; } } @media (min-width: 768px){ .haik-footer .thumbnail { height: 245px; } .haik-footer .thumbnail img { height: 160px; } } @media (min-width: 992px){ .haik-footer .thumbnail { height: 255px; } } @media (min-width: 1200px){ .haik-footer .thumbnail { height: 265px; } } */ /*=================== 2019.09.29 haik-footer用 .thumbnailマウスオーバー時 2019/10/18 .thumbnailマウスオーバー時の動きを大きく-4px→-8px 2019/12/28 haik-footer用 .thumbnailマウスオーバー時　ボックスシャドウ廃止 暗色の部分なのでメリットがない。枠線を明るくする形で代用 2020/07/18 haik-footer用 .thumbnailマウスオーバー時の動作をメインの方とあわせる ===================*/ .haik-footer .thumbnail:hover { box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 1), 0 0 5px rgba(255, 255, 255, 1); opacity: 0.8; } /*=================== 2019.05.03 haik-footer用 .thumbnail　背景色を透明にする事 ページ移動ボタンは出さない ===================*/ .haik-footer .thumbnail { background-color: transparent; } .haik-footer .pagination { display: none; } /*=================== 2019.05.05 .haik-footer 内の .qblog-item thumnailスタイル ブログ用を独立させることで大きさをそれぞれ変えて使える 枠デザインは.haik-footer 内の thumnailスタイルから継承 2019.05.11 row子要素の高さをそろえるflexboxをnagamira_css1に設置したのでheight指定をコメント化、100%にする ただし、768px未満は枠の大きさが揃わないのでthumbnail自体の高さを固定する （追加　thumbnailの対応は無関係だった） 2019.05.12 正式に768px未満は高さを固定,768px以上で可変するように設定 2019.05.16 thumbnail高さが可変するように設定 （カスタマイズ時に変えやすいようにしておく） 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている ===================*/ .haik-footer .thumbnail.qblog-item { /*height: 220px;*/ } .haik-footer .thumbnail.qblog-item p { line-height: 1.7em; } /* 2019.05.17 .thumbnail内のimgの高さを全てautoにする （画像サイズを固定したいなどカスタマイズ時に変えやすいようにしておく） メディアクエリにおけるサイズ固定時の大きさはコメントにしている */ .haik-footer .thumbnail.qblog-item img { /*height: 120px;*/ height: auto; width: 100%; object-fit: cover; } /* @media (min-width: 568px){ .haik-footer .thumbnail.qblog-item { height: 245px; } .haik-footer .thumbnail.qblog-item img { height:130px; } } @media (min-width: 768px){ .haik-footer .thumbnail.qblog-item { height: 245px; } .haik-footer .thumbnail.qblog-item img { height: 130px; } } @media (min-width: 992px){ .haik-footer .thumbnail.qblog-item { height: 260px; } } @media (min-width: 1200px){ .haik-footer .thumbnail.qblog-item { height: 275px; } } */ /*=================== 2019.03.18 .col-sm-6＝cols,thumnailに割り当てられた桁 cols,thumnail内の段落の余白の属性をスマホ時768px以上で切り替える形で調整して、見栄えをよくしている。 本体コンテンツ（.col-sm-3）の幅を変えているのでここで段落を調整している ===================*/ .col-sm-6 p { margin-left: 10px; margin-right: 10px; } @media (min-width: 768px) { .col-sm-6 p { margin-left: 5px; margin-right: 5px; } } /* =================== 2019.03.19 メニューの基本構成 上下マージンを30px→24pxへ減らして画面が小さいときの空間を確保 書体サイズを最低の14pxから18pxへ メニューの注釈で使われるがスマホでは見づらいため大きくする 必要ならパレット毎に記述する 2019.05.03 メニューの基本構成がもう1つあったので統合 2019.05.04 条件セレクタで冗長性を廃止 2019.08.29 文字の大きさは最低限で、p,aは別途指定 2019/12/23 メニューの左右線を消す。 ===================*/ .haik-menu, .haik-article-menu { margin: 0; margin-top: 1em; margin-bottom: 1em; /* padding-bottom: 15px; */ font-size: 18px; border-left: none; border-right: none; } /*=================== メニューの区切り線 文字の色を濃く #333に 必要ならパレット毎に記述する 2019.05.04 条件セレクタで冗長性を廃止 ===================*/ .haik-menu .list1, .haik-article-menu .list1 { list-style: none; border-bottom: 1px solid #e9e9e9; color: #333; border: none; } /*=================== サイドメニューの見出し1 文字を大きくして、左右の余白を詰める パレット毎に設定が必要 文字のコントラストを上げる 見出し毎に異なる場合、パレット毎に記述する haik_coolではサイドメニュー見出し1左側にボーダーラインがあり、パレット毎に異なるのでパレット毎に対応すること。他のテーマも見出し毎に違いを確認すること 2019.04.03 見出しのボーダー飾りの色の彩度を落として見やすくする 2019.05.04 色毎に共通している記述を条件セレクタにして冗長性を廃止 2019.05.10 色毎に共通している記述を統合 2019.05.10 色毎に異なる見出し横のボーダーの記述を独立 2019.08.30 メニューの書体の大きさに整合性があるように調整 2019.09.05 メニューの見出し書体の大きさ調整(h2,h3,h4) 2019/09/13 メニューの見出しの書体を統一 768px以上はコンテナ（メイン）の見出し1,2,3より小さい 767px未満はコンテナ（メイン）の見出し1,2,3と同じ大きさ 2019/09/17 メニューの見出し(h2,h3,h4)の大きさを調整 1200px以上の大きさ(h2:28px,h3:26px,h4:24px) 1500px以上の大きさを追加(h2:30px,h3:28px,h4:26px) バランスがよくなった 2019/09/27 解像度が小さいメディアクエリの書体サイズが大きいのは画面下に表示されるため 2021/10/17 メニューの見出しh2文字の文字色を #333;から　#111;に修正して強調。 iphoneで表示させると若干おかしな色になるのでこの措置 ===================*/ .haik-menu h2, .haik-article-menu h2 { color: #111; font-size: 26px; font-weight: 700; padding: 12px 10px 12px 10px; margin: 0; background-color: inherit; } @media (min-width: 568px) { .haik-menu h2, .haik-article-menu h2 { font-size: 28px; } } @media (min-width: 768px) { .haik-menu h2, .haik-article-menu h2 { font-size: 22px; padding: 0.5em; } } @media (min-width: 992px) { .haik-menu h2, .haik-article-menu h2 { font-size: 26px; } } @media (min-width: 1200px) { .haik-menu h2, .haik-article-menu h2 { font-size: 28px; } } @media (min-width: 1500px) { .haik-menu h2, .haik-article-menu h2 { font-size: 30px; } } /*=================== サイドメニューの見出し2 文字を大きくして、左右の余白を詰める パレット毎に設定が必要 文字のコントラストを上げる 768px時は幅が一番小さいので書体をできるだけ減らしている パレット毎に色を変える場合は文字の大きさのみ共通で指定して、色はパレット毎に記述するとよい 2019.05.04 条件セレクタで冗長性を廃止 2019.08.30 メニューの書体の大きさに整合性があるように調整 2019.09.05 メニューの見出し書体の大きさ調整(h2,h3,h4) 2019/09/13 メニューの見出しの書体を統一 768px以上はコンテナ（メイン）の見出し1,2,3より小さい 767px未満はコンテナ（メイン）の見出し1,2,3と同じ大きさ 2019/09/14 メニューの見出し1，2に画像アイコンを出さないようにする メンテナンスが面倒 2019/09/17 メニューの見出し(h2,h3,h4)の大きさを調整 1200px以上の大きさ(h2:28px,h3:26px,h4:24px) 1500px以上の大きさを追加(h2:30px,h3:28px,h4:26px) バランスがよくなった 2020/01/04 メニューの見出し(h2,h3,h4)他CSSファイルと重複していた部分の調整 2021/10/17 メニューの見出しh3文字の文字色を #333;から　#111;に修正して強調。 iphoneで表示させると若干おかしな色になるのでこの措置 ===================*/ .haik-menu h3, .haik-article-menu h3 { font-size: 24px; color: #111; } @media (min-width: 568px) { .haik-menu h3, .haik-article-menu h3 { font-size: 26px; } } @media (min-width: 768px) { .haik-menu h3, .haik-article-menu h3 { font-size: 22px; } } @media (min-width: 992px) { .haik-menu h3, .haik-article-menu h3 { font-size: 24px; } } @media (min-width: 1200px) { .haik-menu h3, .haik-article-menu h3 { font-size: 26px; } } @media (min-width: 1500px) { .haik-menu h3, .haik-article-menu h3 { font-size: 28px; } } /*=================== サイドメニューの見出し3 文字を大きくして、左右の余白を詰める パレット毎に設定が必要 文字のコントラストを上げる パレット毎に色を変える場合は文字の大きさのみ共通で指定して、色はパレット毎に記述するとよい 背景色を指定する 2019.08.30 メニューの書体の大きさに整合性があるように調整 2019.09.05 メニューの見出し書体の大きさ調整(h2,h3,h4) 2019/09/13 メニューの見出しの書体を統一 768px以上はコンテナ（メイン）の見出し1,2,3より小さい 767px未満はコンテナ（メイン）の見出し1,2,3と同じ大きさ 2019/09/14 メニューの見出し1，2に画像アイコンを出さないようにする 2019/09/17 メニューの見出し(h2,h3,h4)の大きさを調整 1200px以上の大きさ(h2:28px,h3:26px,h4:24px) 1500px以上の大きさを追加(h2:30px,h3:28px,h4:26px) バランスがよくなった 2021/10/17 メニューの見出しh4文字の文字色を #333;から　#111;に修正して強調。 iphoneで表示させると若干おかしな色になるのでこの措置 ===================*/ .haik-menu h4, .haik-article-menu h4 { font-size: 22px; color: #111; } @media (min-width: 568px) { .haik-menu h4, .haik-article-menu h4 { font-size: 24px; } } @media (min-width: 768px) { .haik-menu h4, .haik-article-menu h4 { font-size: 20px; } } @media (min-width: 992px) { .haik-menu h4, .haik-article-menu h4 { font-size: 22px; } } @media (min-width: 1200px) { .haik-menu h4, .haik-article-menu h4 { font-size: 24px; } } @media (min-width: 1500px) { .haik-menu h4, .haik-article-menu h4 { font-size: 26px; } } @media (min-width: 1700px) { .haik-menu h4, .haik-article-menu h4 { font-size: 28px; } } @media (min-width: 2000px) { .haik-menu h4, .haik-article-menu h4 { font-size: 30px; } } /* =================== サイドメニューの文字 文字を大きくして、余白を詰める パレット毎に設定が必要 要素の色を濃くする！太字にする パレット・テーマ毎に書く事（31色分）。 パレット毎に色を変える場合は文字の大きさのみ共通で指定して、色はパレット毎に記述するとよい 2019.05.04 条件セレクタで冗長性を廃止 2019.08.30 メニューの書体の大きさに整合性があるように調整 ===================*/ /*　親メニューの書式　*/ .haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a { font-size: 20px; font-weight: 700; margin-bottom: 0; color: #5a5a5a; display: block; position: relative; padding-right: 5px; } @media (min-width: 568px) { .haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a { font-size: 22px; } } @media (min-width: 768px) { .haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a { font-size: 20px; line-height: 1.6em; } } @media (min-width: 992px) { .haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a { font-size: 22px; } } @media (min-width: 1200px) { .haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a { font-size: 24px; } } /*　子メニューの書式　*/ .haik-menu .list2 a, .haik-article-menu .list2 a { display: block; font-size: 20px; color: #5a5a5a; font-weight: 700; position: relative; padding-right: 5px; margin: 0.5em 0; } @media (min-width: 568px) { .haik-menu .list2 a, .haik-article-menu .list2 a { font-size: 22px; } } @media (min-width: 768px) { .haik-menu .list2 a, .haik-article-menu .list2 a { font-size: 20px; line-height: 1.5em; } } @media (min-width: 992px) { .haik-menu .list2 a, .haik-article-menu .list2 a { font-size: 22px; } } @media (min-width: 1200px) { .haik-menu .list2 a, .haik-article-menu .list2 a { font-size: 24px; } } /*　子メニューの書式　*/ .haik-menu .list1 .list2>li a, .haik-article-menu .list1 .list2>li a { font-size: 20px; color: #5a5a5a; position: relative; padding-right: 5px; } @media (min-width: 568px) { .haik-menu .list1 .list2>li a, .haik-article-menu .list1 .list2>li a { font-size: 22px; } } @media (min-width: 768px) { .haik-menu .list1 .list2>li a, .haik-article-menu .list1 .list2>li a { font-size: 20px; line-height: 1.5em; } } @media (min-width: 992px) { .haik-menu .list1 .list2>li a, .haik-article-menu .list1 .list2>li a { font-size: 22px; } } @media (min-width: 1200px) { .haik-menu .list1 .list2>li a, .haik-article-menu .list1 .list2>li a { font-size: 24px; } } /* =================== メニュー内の段落記述 2019.05.04 条件セレクタで冗長性を廃止 2019.08.29 メニュー内の段落記述の書体属性にタグリストを追加 こちらは[class^="haik-palette-"]をつけなくてもよい 2019/09/12 メニュー内の段落の余白マージンを広げる デフォルト　margin: 0.3em; 568px以上　margin: 0.5em; 768px以上　margin: 0.1em; 992px以上　margin: 0.5em; 段落がよみやすくなった 2020/07/16 ipad向けメニュー内の段落の余白マージンが大きすぎたので修正 768px以上　margin: 0.1em; 2021/09/02 【試作中】メニューの左右余白をiphone7,8,SE2モバイルサイズで余白を減らし、内容を読みやすくする 2021/09/02 【試作中】メニューの左右余白をiphone7,8,SE2モバイルサイズで余白を減らし、内容を読みやすくする 2021/09/20 メニュー内の段落記述 サイド メニューでの書式でタブレット画面と高解像度画面での表示を変えて行あたりの字数を増やす。 2021/10/17 メニュー内の段落記述 サイド メニューでの書式でタブレット画面と高解像度画面2000px以上の表示を追加 ===================*/ .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { padding: 0px; font-size: 20px; margin-bottom: 0; margin: 0.3em 0.3em; background-color: inherit; } @media (min-width: 320px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 22px; } } @media (min-width: 360px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 20px; } } @media (min-width: 375px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 24px; } } @media (min-width: 568px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 26px; margin: 0.5em; } } @media (min-width: 768px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 18px; margin: 0.3em; } } @media (min-width: 992px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 20px; margin: 0.5em; } } @media (min-width: 1200px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 22px; } } @media (min-width: 1500px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 24px; } } /* 2021/10/17 変則的だがブラウザの拡大操作に対応するため1700PX対応をここで入れている */ @media (min-width: 1700px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 26px; } } @media (min-width: 2000px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 28px; } } @media (min-width: 2500px) { .haik-menu, .haik-article-menu, .haik-menu p, .haik-article-menu p, .haik-menu ul.taglist.pages, .haik-article-menu ul.taglist.pages { font-size: 30px; } } /* 2020/07/22 メニュー内のアラートボックスの段落、リストの左右マージンを0にする */ .haik-menu .alert>p, .haik-menu .alert>ul { margin: 0.3em 0.5em; } /*=================== 2019.03.18 子メニューの文字の色の再定義 2019.05.04 条件セレクタで冗長性を廃止 ===================*/ .haik-menu .list1, .haik-article-menu .list1 { color: #777; border: none; } /*================================== 2019.03.29 メニューのマウスオーバー時の色をパレット色毎にバラバラだったのを#337ab7;に標準化するカスタマイズ依頼に応じて色を変える事も可能 最初はhaik_coolの８色から対応。最終的に３１色分対応 2019.05.04 条件セレクタで冗長性を廃止 ====================================*/ .haik-menu .list1>.list-group-item:hover>a, .haik-article-menu .list1>.list-group-item:hover>a { color: #337ab7; text-decoration: none; } /*================================== 2019.03.29 メニューの子メニューのマウスオーバー時の色をパレット色毎にバラバラだったのを#337ab7;に標準化するカスタマイズ依頼に応じて色を変える事も可能 2019.05.04 条件セレクタで冗長性を廃止 ====================================*/ .haik-menu .list1 .list2>li a:hover, .haik-article-menu .list1 .list2>li a:hover { color: #337ab7; text-decoration: none; } /*================================== 2019.05.09 メニューバーのクラス名.barでの罫線類の書式の修正 色毎に変わってしまう問題を解決 ====================================*/ .bar .qblog_recent .list-group-item:first-child, .bar .qblog_categories .list-group-item:first-child, .bar .qblog_recent_comments .list-group-item:first-child, .bar .qblog_archives .list-group-item:first-child, .bar .qblog_recent .list-group-item:last-child, .bar .qblog_categories .list-group-item:last-child, .bar .qblog_recent_comments .list-group-item:last-child, .bar .qblog_archives .list-group-item:last-child { border-bottom: 1px solid #eee; } .haik-menu .list-group-item:first-child, .haik-article-menu .list-group-item:first-child, .haik-menu .list-group-item:last-child, .haik-article-menu .list-group-item:last-child { border-radius: 0; } .qblog_categories>.list-group-item, .qblog_recent_comments>.list-group-item, .qblog_archives>.list-group-item, .qblog_recent>.list-group-item { margin-top: 0; } /* メニュー要素 罫線は上下のみだが、枠を使う場合はコメントの線を使う 2019/09/12 メニュー要素をpadding属性 上下15pxから.6em、 左右15pxから10pxに変えて見やすくした 2019/09/21 メニュー要素padding属性のマージンを0に 2019/09/12の改修後、コンテナー部分との間を空けたので不要。 メニューのブログ投稿日付と画像のレイアウト崩れが起こるので廃止したが、他のメニューが崩れるので撤回。 2019/12/30 箇条書き要素のマージンを増加修正したのに伴い、メニュー要素のマージンを修正する */ .haik-menu .list-group-item, .haik-article-menu .list-group-item { border-left: none; border-right: none; background-color: transparent; border-radius: 0; border-top: none; /* border-left: 1px solid #ddd; */ /* border-right: 1px solid #ddd; */ border-bottom: 1px solid #efefef; padding: .6em 10px; margin: 0; } /* 2019/09/22 メニュー要素のクリック範囲を枠いっぱいに広げるのをクラス指定を変えて、ブログリスト表示（日付、タイトル）での使用のみにする 2019/09/21 メニュー要素のクリック範囲を枠いっぱいに広げる ブログリスト表示（日付、タイトル）での使用が前提 ブログリスト表示をわかりやすくするため。 a::afterがサブメニューがある要素のアイコン表示で既に使われているのでa::beforeで代用した 2019/09/22 メニュー要素のクリック範囲を枠いっぱいに広げるのをクラス指定を変えて、ブログリスト表示（日付、タイトル）での使用のみにする 巻き添えでメニュー要素の色が変わるため、クラス名を改修して対象範囲を限定した。 */ .haik-menu .list-group-item>h2.qblog_title.no-toc a::before, .haik-article-menu .list-group-item>h2.qblog_title.no-toc a::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); z-index: 2; } /* 2019/09/21 メニュー要素のマウスオーバー時の反応をふわっとさせる ブログリスト画像日付概要入りでの使用が前提 2020/07/19 メニュー要素が他のマウスオーバーと実行されるため色が重なって出るのでコメント化 今見ると、記述が別のクラスを指しているので変 */ /* .haik-menu .list-group-item>h2.qblog_title.no-toc a:hover::before, .haik-article-menu .list-group-item a:hover::before { background-color: rgba(119, 119, 119, .1); outline: 0; transition: 0.3s ease; z-index: 3; } */ /* ================= 20190821 ブログリスト時概要 メニュー用 20190821 .qblog_abstractから継承 メニュー用に調整した概要を出す。 タイトルの長さによってはレイアウト崩れが発生することがある 768px~ 2020/01/11 ブログリスト時概要の文字サイズのレスポンシブ対応強化と調整 概要と表示が小さかったのを修正 2020/07/19 メニューにおけるブログ概要の背景を色の重なりを防ぐため透明にする。 =================*/ .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { height: 120px; line-height: 1.8em; padding: 5px; margin-right: 0em; margin-top: 0em; background-color:transparent; } @media (min-width: 568px) { .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { height: 165px; font-size: 22px; } } /*この画面では概要は出さない（場所を取り過ぎるため）*/ @media (min-width: 768px) { .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { display: none; /* height: 165px; */ /* font-size: 20px; */ } } @media (min-width: 992px) { .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { height: 165px; font-size: 22px; } } @media (min-width: 1200px) { .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { display: block; height: 178px; font-size: 24px; } } @media (min-width: 1500px) { .haik-menu .qblog_abstract, .haik-article-menu .qblog_abstract { height: 190px; font-size: 26px; } } /* 2019/09/21 ブログリスト時概要 メニュー用 768px~1199pxのサイドメニュー表示時は概要を表示しない 上下の空間を大幅にとるため。 767px以下はレイアウト崩れが発生するので表示したままにする ブログリスト時概要 メニュー用 768px~1199pxのサイドメニュー表示時は概要を表示しない 試したが、イマイチだった。やはり概要がないと意味がない。 クラス指定が複雑なのでコメント化 */ /* @media (min-width: 768px) { .haik-menu .qblog_thumbnail_box .qblog_abstract, .haik-article-menu .qblog_thumbnail_box .qblog_abstract{ display:none; } } @media (min-width: 992px) { .haik-menu .qblog_thumbnail_box .qblog_abstract, .haik-article-menu .qblog_thumbnail_box .qblog_abstract{ height: 172px; } } @media (min-width: 1200px) { .haik-menu .qblog_thumbnail_box .qblog_abstract, .haik-article-menu .qblog_thumbnail_box .qblog_abstract{ display:contents; height: 182px; font-size: 20px; line-height: 1.7em; } } */ /* ================= 「メニュー用ブログリストの修飾」 メイン領域のブログリストの修飾はnagamira_css3h.cssの「メイン領域のブログリストの修飾」を参照 20190821　メニュー用　ブログリストのキャプション画像余白 .qblog-list-table .qblog_thumbnail_boxから継承 floatによる回り込み、書体の大きさ、マージンを調整 2019.08.28 メニュー用 ブログリスト日付と見出しがずれるので上部余白をゼロに 2019.08.29 ブログリスト日付と見出しを縦に並べて表示する。視認性と操作性が改善される。 2019.09.01 メニュー用ブログリストタイトル　マウスオーバー時に下線を引く方式に変更 2019/09/21 メニュー用ブログリストタイトル　768px時　右マージン　0.5emに 2019/09/21 メニュー用ブログリスト タイトルと概要、768px～1499px時は左回り込みなし float: none;にすることでブロック毎に折り返す。 グリッドの採用を検討したが、今後の課題とする。 2019/09/21 メニュー用ブログリスト 768px～1199px時は画像サムネイルの右マージンは0にする 768px～1199px時は概要を出さないようにしたのに伴う措置 2019/09/22 Qブログアイテム枠内サムネイル画像を余白なしで表示する 余白がない方が視覚的にもよい。 クラスの範囲が変わって継承できていない所があったので直書き 画像の下にマージン0.5emを付ける。 これによって見出しが一段と読みやすくなった。 2020/07/15 メニュー用　ブログリストのキャプション画像余白調整 2020/09/03 メニュー用　ブログリストの文字の大きさをiphoneとAndroidの画面で読みやすいように調整 =================*/ .haik-menu .qblog-list-table .qblog_thumbnail_box, .haik-article-menu .qblog-list-table .qblog_thumbnail_box { margin-right: 0.5em; margin-bottom: 0.2em; } @media (min-width: 568px) { .haik-menu .qblog-list-table .qblog_thumbnail_box, .haik-article-menu .qblog-list-table .qblog_thumbnail_box { margin-right: 1em; } } @media (min-width: 768px) { .haik-menu .qblog-list-table .qblog_thumbnail_box, .haik-article-menu .qblog-list-table .qblog_thumbnail_box { margin-right: 0em; float: none; } } @media (min-width: 1200px) { .haik-menu .qblog-list-table .qblog_thumbnail_box, .haik-article-menu .qblog-list-table .qblog_thumbnail_box { margin-right: 0.5em; float: none; } } @media (min-width: 1500px) { .haik-menu .qblog-list-table .qblog_thumbnail_box, .haik-article-menu .qblog-list-table .qblog_thumbnail_box { float: left; } } /* 2020/09/03 メニュー用　ブログリストの文字の大きさをiphoneとAndroidの画面で読みやすいように調整 */ .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { color: #337ab7; font-weight: 700; font-size: 20px; padding-left: 5px; line-height: 2em; text-decoration: none; } @media (min-width: 320px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 24px; } } @media (min-width: 360px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 20px; } } @media (min-width: 375px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 24px; } } @media (min-width: 568px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 26px; } } @media (min-width: 768px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 20px; } } @media (min-width: 992px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 22px; } } @media (min-width: 1500px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 24px; } } @media (min-width: 1700px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 26px; } } @media (min-width: 2000px) { .haik-menu #qblog h2.qblog_title a, .haik-article-menu #qblog h2.qblog_title a { font-size: 28px; } } /*マウスオーバー時 2020/09/28 ブログタイトルリスト、メニューマウスオーバー時の下線、コメント化 */ /* .haik-menu #qblog h2.qblog_title a:hover, .haik-article-menu #qblog h2.qblog_title a:hover { text-decoration: underline; } */ /* ================= 2019.09.01 メニュー見出しリンク文字色調整 パレット毎に色が異なっていると混乱するので1色に統合する 2019.09.05 メニュー見出しリンク文字をdisplay: blockをinlineにして改行しないようにした =================*/ .haik-menu h2 a, .haik-palette-red .haik-article-menu h2 a, .haik-menu h3 a, .haik-palette-red .haik-article-menu h3 a, .haik-menu h4 a, .haik-palette-red .haik-article-menu h4 a { color: #333; display: inline; text-decoration: underline; } /* ================= 2019.09.01 メニュー見出しリンク文字色調整 パレット毎に色が異なって混乱するので1色に統合する セレクタが複数あるので混乱しないよう分けて記述 =================*/ .haik-menu h2:hover a, .haik-article-menu h2:hover a, .haik-menu h2.focus a, .haik-article-menu h2.focus a { color: #337ab7; text-decoration: none; } .haik-menu h3:hover a, .haik-article-menu h3:hover a, .haik-menu h3.focus a, .haik-article-menu h3.focus a { color: #337ab7; text-decoration: none; } .haik-menu h4:hover a, .haik-article-menu h4:hover a, .haik-menu h4.focus a, .haik-article-menu h4.focus a { color: #337ab7; text-decoration: none; } /* ================= 2019.09.05 メニュー見出しアクティブ時リンク文字のマウス反応を無効にする 1色に統合する 【イベントがfocusになっている説明】 本来ならクラスactiveの属性なのだが、クラスfocusが自動で書き込まれている。 自動リンクプログラムの誤作動かもしれない。 そのため、activeではなくfocus属性で記述してている =================*/ .haik-menu h2.focus a, .haik-article-menu h2.focus a { color: #777; text-decoration: none; pointer-events: none; } .haik-menu h3.focus a, .haik-article-menu h3.focus a { color: #777; text-decoration: none; pointer-events: none; } .haik-menu h4.focus a, .haik-article-menu h4.focus a { color: #777; text-decoration: none; pointer-events: none; } /* ====== コピー防止確認用ダミー ====== */ .nagamira-default-menu h4.focus a, .nagamira-default-menu h4.focus a { color: #777; text-decoration: none; pointer-events: none; } /* ====== 2019/09/12 メニューの検索ではAND検索とOR検索のボタンを出さないようにする AND検索もOR検索も専門的な検索以外は使わないし、スペースがあるなら活用したい 見た目もすっきりした ====== */ .haik-menu #searchmenu>form>div>div:nth-child(2), .haik-article-menu #searchmenu>form>div>div:nth-child(2) { display: none; } /* ====== 2019/09/18 メニューのタブ上下マージンを新たに追加 ====== */ .haik-menu .nav-tabs, .haik-article-menu .nav-tabs { margin: .875em 0em; } /* 2019/09/21（解決） コンテナとフッターのブログリスト画像日付概要が入った要素のクリック範囲を枠いっぱいに広げる 操作性の改善になる 【メモ】 ブログリストとクラスが同じなのでこのままだとブログリストで使えない そこでa要素の中にクラス.qblog_thumbnail_boxがある事を条件としてみたら、使えた。 2019/10/07 重複していた同じ内容の記述を削除 2020/07/14 ブログリスト（リストタイプ）の枠線を追加 */ .haik-container #qblog_list>ul>li a .qblog_thumbnail_box::before, .haik-footer #qblog_list>ul>li a .qblog_thumbnail_box::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); z-index: 2; border: #e5e5e5 solid 2px; border-radius: 4px; } /* 2019/09/21（解決） コンテナとフッターのブログリスト画像日付概要が入った要素マウスオーバー時の反応をふわっとさせる ブログリスト画像日付概要入りでの使用が前提 【メモ】 ブログリストとクラスが同じなのでこのままだとブログリストで使えない そこでa要素の中にクラス.qblog_thumbnail_boxがある事を条件としてみたら、使えた。 */ .haik-container #qblog_list>ul>li a .qblog_thumbnail_box:hover::before, .haik-footer #qblog_list>ul>li a .qblog_thumbnail_box:hover::before { background-color: rgba(119, 119, 119, .1); transition: 0.3s ease; z-index: 3; }