baserCMS admin-third なんちゃってスマホ対応のためのアジャストCSS ほか

-2021/10/20 以下の項目について、追記変更
管理用ツールバーのテキスト表示のアイコン化など。 iOSのSafariで overflow-x:hidden が効かなかったため対応。
  • 完成形イメージの画像差し替え。
  • /theme/インストールテーマ/css/admin/style.cssの内容を一部変更。
  • /theme/インストールテーマ/css/admin/toolbar.cssの内容を一部変更。


-2021/10/18 以下の項目について、追記変更
管理用サイドメニューのトグル表示用アイコンをWindow固定表示（position:fixed）に変更したため。
  • /theme/インストールテーマ/css/admin/style.cssの内容を一部変更。
  • /theme/インストールテーマ/Layouts/admin/default.phpの内容を一部変更。


-2021/10/11 以下の項目について、追記変更
  • 完成形イメージの画像差し替え。ユーザー画面（ログイン後のツールバー表示）の追加、および、ツールバーの「キャッシュクリア」表示、タイトルテキスト表示の扱いを変更したため。
  • /theme/インストールテーマ/css/admin/style.cssの内容を一部変更。
  • /theme/インストールテーマ/css/admin/toolbar.cssの内容を追加。

現行baserCMS ver.4.5.1 の管理画面テーマ「admin-third」のstyle.cssを見ると、タブレット、スマホ用（あるいは、スマホはガン無視なのかも）のブレイクポイントを max-width: 768px で設計されている様子。 max-width: 768pxオンリーのケースの場合、通常は、タブレット、スマホ用と言いながら、実際にはざっくり400px前後のスマホ縦画面を想定しつつ設計された画面を、タブレットで無理やり間延びした感じで引き伸ばして見させられるか、あるいは、ざっくり800px前後のタブレット縦画面を想定しつつ設計された画面を、スマホで窮屈にぎゅっと押し込められた感じで見させられるかのいずれかで、なんとも気持ち悪い。

ちなみに、baserCMSの管理画面テーマでは、以下の画面の通り、そもそもスマホでの表示を意識していない。 画像の説明 ま、でも、ある意味、これはこれで道理というか、設計思想として理解できないことはなく、そもそも、管理画面をスマホでオペレーションできるのか？いやできないでしょ？！なのに、中途半端にスマホ対応画面に手をつけるのは、どうなのよ。。。という話かと。 管理画面という性質上、どうしても横長の表組みレイアウトになっているリストをスマホ表示幅に合わせて無理やりタイル風にするというのも違うと思うし、そういう意味で管理画面を抜本的にレスポンシブ化するというのは、至難の技だと思う。

とはいえ、やっぱり、上図のような画面は、ちょっと気持ち悪い。。。

と言うことで、

  • できない部分（横長に表組みレイアウトになっているリスト）は、素直に横スクロールで見る方が無難なのでそこは触らない。
  • でも、スマホレイアウトとして工夫できるところは是非やってみよう。

という発想でこの暫定（なんちゃって）スマホ対応という訳です。

完成形のイメージは、以下。 画像の説明 画像の説明 画像の説明 画像の説明

条件整備

まず、現状のメディアクエリー @media screen and (max-width: 768px) は、そのままタブレット用レイアウトとするとして、新たにスマホ対応のための @media screen and (max-width: 499px) ブレイクポイントを追加。 そもそも 499px が最適かどうかは、なんの根拠もありません（キッパリ）。どなたかに怒られるかもしれませんが、500px以上の表示幅は、スマホ縦とちゃうでしょ！？というあくまで感覚値のみ（笑）。 で実際には、375px 幅くらいを標準的なイメージにして、最小幅を 350px と勝手に決めつけて、アジャスト用のCSSを設計してみることにしました。 スマホ対応のための改修（アジャスト）は、全て利用しているテーマファイル内にあらかじめコピーしたCSSファイル（/admin/style.css）などで行うため、改修後にbaserCMSをアップデートしても上書きされることはありません。ですが、当然、コアのアップデートを積んでいけば、いずれは機能落ちする可能性は出てきますので、その点はご承知おきを。

適用手順

まずは、admin-third用のstyle.cssおよびtoolbar.cssファイルを使用しているテーマ内にコピー。

/theme/admin-third/css/admin/style.css
↓
/theme/インストールテーマ/css/admin/style.css
/theme/admin-third/css/admin/toolbar.css
↓
/theme/インストールテーマ/css/admin/toolbar.css

コピーしたstyle.cssおよびtoolbar.cssファイルの最後尾にアジャスト用のスタイルを追記。その他、微細な修正。詳細は、後述。 元に戻すときは、ざっくり、コピーしたフォルダごと削除すればいいので。

次に、admin-third用のレイアウトファイルを使用しているテーマ内にコピー。

/theme/admin-third/Layouts/admin/default.php
↓
/theme/インストールテーマ/Layouts/admin/default.php

コピーしたdefault.phpファイルにメニューをスライドインさせるためのボタンとスクリプトを記述。詳細は後述。 元に戻すときは、ざっくり、コピーしたフォルダごと削除すればいいので。

こちらのハンバーガーメニューサンプルを拝借して実装してみました。 https://125naroom.com/

コピーしたcssファイルの修正項目の詳細

まずは、「なんちゃってスマホ対応」のアジャスト用スタイルを admin-thirdフォルダからコピーしたstyle.cssファイルの最後尾に追記。以下の記述を まんまCSSの最後尾に追記します。

/**
 * - スマホ対応のための追記スタイルは、変更箇所を明確にするため、基本的にこれ以降に記述。
 *   やむを得ず本文中を変更する場合、「adj4smp」とコメントアウト。
 * - 基本カラーを変更したい場合は、デフォルトの「#6fa83d」をエディターなどで検索し、適宜変更したいカラーコードに置換、変更してください。
 *   尚、「#639536」は、変更したいカラーコード（16進数コード）をRGB変換後α値を指定して適宜透明化し、置換、変更してください。
 *   例：「#6fa83d」を「#0000ff」に置換するする場合、「#639536」は、「rgba(0, 0, 255, .6)」に置換する。
 *   　　「#0000ff」→「rgb(0, 0, 255)」→「rgba(0, 0, 255, .6)」
 * - スマホ対応 499px以下を追記。
 */

 /* スマホ対応のためのレイアウト調整 */
body {
  min-width: initial;
  -webkit-text-size-adjust: 100%;
}
.bca-footer__inner {
  min-width: initial;
}
.bca-panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
}
.bca-panel > * {
  width: 100%;
  max-width: 450px;
  min-width: calc(100% / 3 - 20px);
}
.bca-panel-box {
  margin: 0;
}

/* 基本カラーの変更に備えてログインボタンのボーダーをキャンセル */
.bca-btn-icon[data-bca-btn-type=login],
.bca-btn-icon-text[data-bca-btn-type=login],
.bca-btn[data-bca-btn-type=login] {
  border: none;
}
.bca-btn-icon[data-bca-btn-type=login]:hover,
.bca-btn-icon[data-bca-btn-type=login]:focus,
.bca-btn-icon-text[data-bca-btn-type=login]:hover,
.bca-btn-icon-text[data-bca-btn-type=login]:focus,
.bca-btn[data-bca-btn-type=login]:hover,
.bca-btn[data-bca-btn-type=login]:focus {
  transition: none;
}

/* アップローダーパネルのレイアウト崩れ修正 */
#DivPanelList .file-list-body .selectable-file {
  height: auto !important; 
}

@media screen and (max-width: 768px) {
  /* ツールバーのサーバーキャッシュクリアをアイコン化 */
  .bca-toolbar__users > ul > li:nth-child(2) a {
    font-size:0;
    background: #2a332c !important;
    transition: none !important;
  }
  .bca-toolbar__users > ul > li:nth-child(2) a:hover {
    background-color: #444 !important;
  }
  .bca-toolbar__users > ul > li:nth-child(2) a::before {
    content: "\f021";
    font-family: 'Font Awesome 5 Free';
    font-size:12px;
    font-weight: 900;
    color: #fff;
  }
  /* ツールバーの確認する表示のアイコン化 */
  .bca-toolbar__tools-button a {
    font-size: 0;
    background: none !important;
    transition: none;
  }
  .bca-toolbar__tools-button a:hover {
    background: none !important;
  }
  .bca-toolbar__tools-button-publish a::before {
    padding: 4px;
    font-size: 10px !important;
    color: #333;
    background-color: #fff !important;
    border-radius: 50%;
  }
  .bca-toolbar__tools-button-publish a:hover::before {
    background-color: #ccc !important;
    transition: all 0.5s ease;
  }
  /* サイドメニュー表示、非表示 */
  .bca-nav {
    left: -175px;
    width: 175px;
    height: 100%;
    display: block;
    position: absolute;
    transition: all .5s;
  }
  .open .bca-nav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 175px;
    height: 100%;
    display: block;
    opacity: 1;
    font-size: 1.4rem;
    background: #eeeeea;
    transition: all .5s;
    z-index: 3;
  }
  /* サイドメニュー表示時の横スクロール禁止 */
  html {
    overflow:auto;
  }
  body.open {
    overflow-x: hidden;
  }
  /* サイドメニューの幅固定 */
  .bca-nav__sub-list {
    max-width: 175px;
    min-width: 175px;
  }
  .bca-nav__system-sub-list {
    max-width: 175px;
    min-width: 175px;
  }
  /* サイドメニューの折り返し許可 */
  .bca-nav__system-sub-list-item a{
    white-space: normal;
  }
  /* サイドメニューのコンテンツリスト整形 */
  .bca-nav__sub-list-item a {
    padding: 7px 10px 5px 35px;
  }
  .bca-nav__sub[data-content-is-expanded="true"] .bca-nav__sub-list-item a {
    padding: 6px 10px 5px 35px;
  }
  .bca-nav__sub[data-content-is-expanded="true"] .bca-nav__sub-list-item[data-sub-content-is-current="true"] a {
    padding: 13px 10px 11px 35px;
  }
  /* ダッシュボードパネルの調整 */
  .bca-panel {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  .bca-panel > * {
    width: 100%;
    max-width: 100%; 
  }
  /* ダッシュボード内タイトルの調整 */
  .bca-main__header-title {
    margin: 0 1em 0 40px;
  }
  #AdminSiteConfigsForm .bca-main__contents {
    min-width: 767px;
  }
  #AdminBlogBlogPostsIndex1 .bca-main__contents {
    min-width: 1067px;
  }
  #AdminUsersLogin .toggle_btn {
    display: none;
  }
  .bca-list-head {
    flex-direction: column;
  }
  .bca-login {
    margin: 20px auto;
    padding: 30px 25px;
  }
  /* サイドメニュー表示、非表示用のトグルボタン */
  .toggle_btn {
    display: block;
    position: fixed;
    left: 20px;
    width: 22px;
    height: 26px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
  }
  .toggle_btn span {
    display: block;
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
  }
  .toggle_btn span:nth-child(1) {
    top: -7px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    left: -12px;
    border-radius: 20px;
  }
  .toggle_btn span:nth-child(2) {
    top: 4px;
    transform: translate(3px,3px) rotate(45deg);
  }
  .toggle_btn span:nth-child(3) {
    top: 12px;
  }
  .toggle_btn span:nth-child(4) {
    bottom: 4px;
    transform: translate(3px,-3px) rotate(135deg);
  }
  .open .toggle_btn {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    left: 195px;
  }
  .open .toggle_btn span:nth-child(2), .open .toggle_btn span:nth-child(4) {
    width: 16px;
  }
  .open .toggle_btn span:nth-child(2) {
    -webkit-transform: translate(-3px,3px) rotate(-45deg);
    transform: translate(-3px,3px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(4) {
    -webkit-transform: translate(-3px,-3px) rotate(45deg);
    transform: translate(-3px,-3px) rotate(45deg);
  }
  /* サイドメニュー表示時の本文マスク処理 */
  #mask {
    display: none;
    transition: all .5s;
  }
  .open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .8;
    z-index: 2;
    cursor: pointer;
  }
}

@media screen and (max-width: 499px) {
  .toggle_btn {
    top: 56px;
  }
  /* ダッシュボードパネルのヘッダーレイアウト調整 */
  .bca-main__header {
    flex-direction: column;
    align-items: normal;
  }
  .bca-main__header-actions {
    margin-left: 40px;
  }
  .bca-content-menu ul {
    padding-inline-start: 0px;
    margin-left: calc(40px - 1em);
  }
  /* ログイン画面、状態保存チェックボックス周りレイアウト調整 */
  .bca-login .bca-login-form-ctrl {
    align-items: normal;
    flex-direction: column;
  }
  /* ログイン画面のタイトル調整 */
  .bca-login__title {
    margin-top: 0;
    margin-bottom: 10px;
  }
  /* ログイン画面のロゴ幅変更 */
  .bca-login__logo {
    max-width: 230px;
    width: 100%;
  }
  /* ツールバーのユーザーリスト、サーバーキャッシュクリア表示のレイアウト調整 */
  .bca-toolbar__users > ul > li > a {
    padding: 2px 12px !important;
  }
  /* ツールバーのロゴテキストを非表示 */
  .bca-toolbar .bca-toolbar__logo-text {
    display: none !important;
  }
  .bca-toolbar .bca-toolbar__logo-symbol {
    border: none !important;
  }
  /* ツールバーの開発モード表示の簡素化 */
  .bca-toolbar__tools-mode span {
    padding: 0 !important;
    font-size: 0;
    background: none !important;
  }
  .bca-toolbar__tools-mode span::before {
    content: "開発モード";
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background-color: red;
    padding: 3px 8px;
    border-radius: 11px;
  }
  /* ツールバーのシンボルロゴのマージン調整 */
  .bca-toolbar .bca-toolbar__logo-symbol {
    border: none !important;
    padding: 0 !important;
    margin-right: 0 !important;
  }
}

続いて、同様にadmin-thirdフォルダからコピーしたtoolbar.cssファイルの最後尾にも、以下のアジャスト用スタイルを まんまCSSの最後尾に追記します。

/**
 * - スマホ対応のための追記スタイルは、変更箇所を明確にするため、基本的にこれ以降に記述。
 *   やむを得ず本文中を変更する場合、「adj4smp」とコメントアウト。
 * - 基本カラーを変更したい場合は、デフォルトの「#6fa83d」をエディターなどで検索し、適宜変更したいカラーコードに置換、変更してください。
 */

 .bca-toolbar .bca-toolbar__logo {
    align-items: center !important;
  }
 .bca-toolbar .bca-toolbar__logo a {
    color: #fff !important;
  }

@media screen and (max-width: 768px) {
  /* ツールバーのサーバーキャッシュクリアをアイコン化 */
  .bca-toolbar__users > ul > li:nth-child(2) a {
    font-size:0;
    background: #2a332c !important;
    transition: none !important;
  }
  .bca-toolbar__users > ul > li:nth-child(2) a:hover {
    background-color: #444 !important;
  }
  .bca-toolbar__users > ul > li:nth-child(2) a::before {
    content: "\f021";
    font-family: 'Font Awesome 5 Free';
    font-size:12px;
    font-weight: 900;
    color: #fff;
  }
  .bca-toolbar__tools-mode span {
    padding: 3px 8px !important;
  }
  /* ツールバーの編集する表示のアイコン化 */
  .bca-toolbar__tools-button a {
    font-size: 0;
    background: none !important;
    transition: none;
  }
  .bca-toolbar__tools-button a:hover {
    background: none !important;
  }
  .bca-toolbar__tools-button-edit a::before {
    padding: 4px;
    font-size: 10px !important;
    color: #333;
    background-color: #fff !important;
    border-radius: 50%;
  }
  .bca-toolbar__tools-button-edit a:hover::before {
    background-color: #ccc !important;
    transition: all 0.5s ease;
  }
  /* ツールバーのロゴテキストを非表示 */
  .bca-toolbar .bca-toolbar__logo-text {
    display: none !important;
  }
  /* ツールバーのシンボルロゴのマージン調整 */
  .bca-toolbar .bca-toolbar__logo-symbol {
    border: none !important;
    padding: 0 !important;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 499px) {
  /* ツールバーのユーザーリスト、サーバーキャッシュクリア表示のレイアウト調整 */
  .bca-toolbar__users > ul > li > a {
    padding: 2px 12px !important;
  }
  /* ツールバーの開発モード表示の簡素化 */
  .bca-toolbar__tools-mode span {
    padding: 0 !important;
    font-size: 0;
    background: none !important;
  }
  .bca-toolbar__tools-mode span::before {
    content: "開発モード";
    font-size: 12px;
    font-weight: 900;
    color: #fff;
    background-color: red;
    padding: 3px 8px;
    border-radius: 11px;
  }
}

次に上記の内容が反映された時点で、以下のようなFontAwesomeを含むimgファイルなどがほとんどリンク切れになってしまいます。

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../../fonts/admin/fa-solid-900.eot");
  src: url("../../fonts/admin/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/admin/fa-solid-900.woff2") format("woff2"), url("../../fonts/admin/fa-solid-900.woff") format("woff"), url("../../fonts/admin/fa-solid-900.ttf") format("truetype"), url("../../fonts/admin/fa-solid-900.svg#fontawesome") format("svg"); }
.cke_dialog select.bca-select__select,
.cke_dialog select.cke_dialog_ui_input_select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url(../../img/admin/icn_select.svg) no-repeat center right 0.5em/10px auto, #FFFFFF !important;
/* 以下省略 */
}
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../../fonts/admin/fa-solid-900.eot");
  src: url("../../fonts/admin/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/admin/fa-solid-900.woff2") format("woff2"), url("../../fonts/admin/fa-solid-900.woff") format("woff"), url("../../fonts/admin/fa-solid-900.ttf") format("truetype"), url("../../fonts/admin/fa-solid-900.svg#fontawesome") format("svg"); }

これらのリンク切れになるパスをエディターなどで検索し、以下のように置換、修正します。

../../fonts
↓
../../../admin-third/fonts
../../img
↓
../../../admin-third/img

これで、FontAwesomeのアイコンやimgファイルが表示されるようになります。

次に以下の内容のように/theme/インストールテーマ/css/admin/style.cssを修正。 直接的には、「なんちゃってスマホ対応」の改修というコンセプトからちょっと外れていますが、併せて気になる項目やついでにモディファイしてみたい項目などを記載してみました。

  • 気になったところ①：管理⽤ツールバー下にコンテンツ画⾯が潜り込まないようにmargin-top:40pxがページに設定されているため、コンテンツの中⾝の⾼さが⼩さい場合でも、最⼤⾼さより40px⾼さがオーバーしてしまう。 対策：5710行目辺り、40pxのマージン分をvhから減じることで調整した。
.bca-app {
  display: grid;
  min-height: calc(100vh - 40px); /* adj4smp */
  grid-template-rows: auto 1fr auto; }
  • 気になったところ②：768px以下でフッター領域高さが妙に広がってしまう。
  • 768px以下でコンテンツがオーバーフローしてしまう。 対策：5712行目辺り、bca-appクラスの768px以下メディアスクリーンをコメントアウトした。
/* adj4smp */
/* @media screen and (max-width: 768px) {
 .bca-app {
 display: block; }
  • 気になったところ③：ログイン画面のボックス領域の横幅が、768px以下で無意味に引き伸ばされる。 対策：7473行目辺り、bca-loginクラスの不要な768px以下メディアスクリーンをコメントアウトした。
/* adj4smp */
/*   @media screen and (max-width: 768px) {
    .bca-login {
      max-width: none !important; } } */
  • モディファイしてみたいところ④：基本カラーを変更したい場合は、デフォルトの「#6fa83d」をエディターなどで検索し、適宜変更したいカラーコードに置換、変更。 また、デフォルトの「#639536」は、変更したいカラーコード（16進数コード）をRGB変換後α値を指定して適宜透明化し、置換、変更してみます。 たとえば、「#6fa83d」を「#0000ff」に置換するする場合は、「#639536」も「rgba(0, 0, 255, .6)」に置換します。 なぜ、「rgba(0, 0, 255, .6)」なのか、というのは以下。
「変更したいカラーコード（16進数コード）をRGB変換後α値を指定して適宜透明化」
つまり、「#6fa83d」の少し明度を落としたものが、「#639536」なので、
変更したいカラーコードを少し透明化したものを「#639536」の代わりにしようという訳で、
「#0000ff」→「rgb(0, 0, 255)」→「rgba(0, 0, 255, .6)」
という手順です。

/theme/インストールテーマ/css/admin/toolbar.cssにも、デフォルトの「#6fa83d」を使った箇所が若干あるので、同様の手順で置換します。

コピーしたレイアウトファイルへの追記項目の詳細

admin-thirdフォルダからコピーした/theme/インストールテーマ/Layouts/admin/default.phpファイルに、サイドメニューをスライドインさせるためのトグルボタンとスクリプトなどをちょこっと追記します。

まずは、サイドメニューの表示/非表示用のトグルボタンを設置するため、/theme/インストールテーマ/Layouts/admin/default.phpファイルの135行目、<div class="bca-main__header">の後辺りに以下の記述を挿入します。

<div class="toggle_btn">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

次に、サイドメニューの表示時に本文をマスクするため、 同ファイルの177行目、<!-- / .bca-main --></main>の後辺りに以下の記述を挿入します。

<div id="mask"></div>

最後に、サイドメニューの表示/非表示用をするため、 同ファイルの190行目、<?php $this->BcBaser->func() ?>の後辺りに以下のスクリプトを記述を挿入します。

<script>
(function($) {
  var $body   = $('body');
  var $btn   = $('.toggle_btn');
  var $mask  = $('#mask');
  var open   = 'open'; // class
  // menu open close
  $btn.on( 'click', function() {
    if ( ! $body.hasClass( open ) ) {
    window.scrollTo(0, 0);
    $body.addClass( open );
    } else {
    window.scrollTo(0, 0);
    $body.removeClass( open );
    }
  });
  // mask close
  $mask.on('click', function() {
    window.scrollTo(0, 0);
    $body.removeClass( open );
  });
} )(jQuery);
</script>

以上で作業終了。改修が反映されない時は、キャッシュ削除（スーパーリロード）してみてください。

おまけ

ロゴファイルを案件ごとに差し替えたい場合。 ロゴファイルを差し替えるプラグインもありますが、以下の方法でサクッとできます。 使用しているテーマのimgフォルダ内に/adminフォルダを作成し、ファイル名logo_large.pngの差し替え用ロゴ画像を設置。 ロゴ差し替え用logo_large.pngファイルは、できれば背景を透明化した600px幅程度のものを用意するとiPhoneなどのRetinaディスプレイでもきれいに見えます。 元に戻すときは、同じくざっくり、コピーしたフォルダごと削除すればよし。

/theme/インストールテーマ/img/admin/logo_large.png

最後に

以上で、最初に提案した baserCMS admin-third管理テーマの「なんちゃってスマホ対応」の完成です。 記事を書いてみると、ずいぶん大そうな感じですが、実際の作業は、大したことはありません。いずれの作業も復旧できない、取り返しのつかないような類のものではないので、是非、興味のある方は、「なんちゃってスマホ対応」チャレンジして見てください。

コメント

コメントする


qQobjq

Related posts