★カスタムCSS(標準スタイル上書き)機能

最終更新日時2020年3月19日

機能

すべてのページの<head>タグ内に出力されるCSSを定義できる機能です。

用途

システム標準のスタイルを上書きして雰囲気を変えたり、独自性を持たせることができます。

操作方法

管理サイト > コンテンツ管理 > カスタムCSS

「顧客サイト用」「管理サイト用」それぞれに定義が可能です。変更後、更新を行うと即時適用されます。

表示例

ナビゲーションリンクの色を変更して、ボーダを四角に

カスタムCSS定義

.top-header-btn1 a {
  background-color: #EF8E23;
  border: none;
  border-radius: 0;
}

標準

カスタムCSSで上書き後

見出し(h3)のスタイルを変更

カスタムCSS定義

CSSによる見出しスタイルのカスタマイズは様々な方法があります。ネット上でも多数紹介されているので、「見出し CSS カスタマイズ」というキーワードで検索して気に入ったスタイルを探してみてください。

h3 {
  background-color: transparent;
  position: relative;
  color: #333;
  text-shadow: 0 0 2px white;
}
h3:before {
  content: "";
  position: absolute;
  background: #9de5ff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  /* border: dashed 1px white; */
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

標準

カスタムCSSで上書き後