ベーステンプレートを更新しました (C-23.0823)


目次[非表示]

  1. 1.コピー元のページ構成の変更
    1. 1.1.ブログ詳細の仕様変更
    2. 1.2.全てのページ
    3. 1.3.ダミーロゴのファイル名を変更
  2. 2.管理Vr - C-23.0821
    1. 2.1.アンカーテキストにベースデザイン設定を適用
    2. 2.2.スムーススクロールを解放
    3. 2.3.編集画面崩れ対策

コピー元のページ構成の変更

ブログ詳細の仕様変更

  • アイキャッチ使用時の上下余白調整
  • アンカーリンクの仕様をベースデザイン設定に変更
  • 目次はそのままテキストカラー&hover時透過固定


全てのページ

scroll-behaviorを解放(スムーススクロール)


ダミーロゴのファイル名を変更

sample_logo.png

logo.png



管理Vr - C-23.0821

アイキャッチの余白調整

記述追加

//詳細ページ設定
.article-eyecatch {
  @include breakpoint-pc {
    margin-bottom: 30px;
  }
  @include breakpoint-sp {
    margin: 30px 0;
  }
}


アンカーテキストにベースデザイン設定を適用

目次にも影響が出てしまうので打ち消しを行なってます。

//ブログ詳細の本文
.component {
〜〜〜〜〜〜〜〜〜〜〜〜〜〜
      a {
        color: var(--fo-text-link-color);
        &:hover {
          opacity: var(--fo-text-link-hover-opacity,1);
          text-decoration: var(--fo-text-link-hover-text-decoration,none);
          font-weight: var(--fo-text-link-hover-font-weight,inherit);
          color: var(--fo-text-link-color);
          filter: unquote('invert(var(--fo-text-link-hover-invert,0))');
        }
        &.show-area {
          &:hover {
            opacity: $hover_opacity;
            text-decoration: none;
            font-weight: inherit;
            color: var(--fo-text-link-color);
            filter: none;
          }
        }
      }
    }
    //ブログ詳細の表
    table {
      .table-content {
        a {
          color: var(--fo-text-link-color);
          &:hover {
            opacity: var(--fo-text-link-hover-opacity,1);
            text-decoration: var(--fo-text-link-hover-text-decoration,none);
            font-weight: var(--fo-text-link-hover-font-weight,inherit);
            color: var(--fo-text-link-color);
            filter: unquote('invert(var(--fo-text-link-hover-invert,0))');
          }
        }
      }
    }


スムーススクロールを解放

ブログは「ブログの基本設定」で変更
(二重に付与されます)


//スムーススクロール(IE,EGE、safariなどは未対応)
html {
  scroll-behavior: auto !important;
}

↓↓開放後↓↓

//スムーススクロール(IE,EGE、safariなどは未対応)
html {
  scroll-behavior: smooth !important;
}


編集画面崩れ対策

CSSでフォントサイズをダイレクトに変更すると編集画面のアイコンに影響が出る場合があるので事前に対策。

追加記述

  //フォントサイズによりメニュー崩れ対策
  [class^="styles_ctrl-head"] {
    font-size: 16px;
    line-height: normal;
  }
  .name-global {
    line-height: normal;
  }
  //フォントサイズによりメニュー崩れ対策 end

追記:
サイト全体でスムーススクロールを解放したことにより、ブログ設定のフローが一部変更になりました。
こちらの記事もご確認ください。


pagetop