SWELLのウィジェットタイトルカスタマイズ

2023年12月13日2023年12月24日

URLをコピーしました！

アンダーラインの右端に2本線

下記の内容を追加cssに追記します。

/* Widgetメニュータイトル */
.c-widget__title {
　background:none;
　font-size:2em;
　color:#333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  padding: 0em .2em;
  position: relative;
　overflow: visible;
}
.c-widget__title::before, .c-widget__title::after {
  content: '';
  background-color: #333;
  width: 2px;
  height: 25px;
  transform: rotate(30deg);
  position: absolute;
  bottom: -10px;
}
.c-widget__title::before {
  right: 1.5em;
}
.c-widget__title {
  right: 1em;
}

こうなります

ウィジェットタイトル

応用

反映させたい記事内もしくは固定ページ内の文字を選択し、【高度な設定＞ HTMLアンカー】に任意の文字列（例：title01など）を入力し、cssの.c-widget__titleをHTMLアンカーで入力した文字列（前述の例の場合だと.title01）に変更すればどこにでも設置できるようになります。

/* HTMLアンカーで任意の場所に使用 */
.title01 {
　background:none;
　font-size:18px;
　color:#333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  padding: 0em .2em;
  position: relative;
　overflow: visible;
}
.title01::before, .title01::after {
  content: '';
  background-color: #333;
  width: 2px;
  height: 25px;
  transform: rotate(30deg);
  position: absolute;
  bottom: -10px;
}
.title01::before {
  right: 1.5em;
}
.title01 {
  right: 1em;
}