Connect-CMSで本体コードをいじらずにCSSだけで対応できる3選

Last updated at 2026-02-12Posted at 2026-02-11

それCSSでできます。

メニュープラグイン＋タブ系テンプレートを使用時に、スマホでも表示する方法

下記は「タブフラット」テンプレートのCSSで、スマホでも表示する方法です。
タブ系テンプレートは、スマホ表示時に消えるように作られているため、スマホ表示時に消すCSS d-none を表示するCSSに上書きして、対応しています。

/* タブフラットのメニューはスマホでも表示する */
.plugin-menus.menus-tab_flat .nav-tabs.d-none {
  display: flex !important;
}

※ 他のタブ系テンプレートで対応する場合は、ブラウザの開発者ツール等を使って、各テンプレートのclassを調べれて、cssを書けば対応できるかと思います。

/* メニュープラグイン＋ディレクトリ展開式テンプレートの2階層目のみ、少し左に余白をとる */
.plugin-menus.menus-opencurrenttree .depth-1 {
  padding-left: 1.6rem !important;
}

Connect-CMSではbootstrapを使っており、bootstrapは、一度開いたリンク（訪問済みリンク）の色が変わらないようになっています。
新着情報を使って、お知らせ等を配信する場合、1度見たものは色が変わっていれば、既にみたものと利用者が判別がつくため、利便性が少しあがります。

/* 新着のみ訪問済みリンクの色を変更 */
.plugin-whatsnews .card-body a:visited {
  color: #6f42c1;
}