ブログの外観をカスタマイズする方法

このガイドでは、CNBlog（博客园）プラットフォームでのブログ外観のカスタマイズ方法を詳しく説明します。以下の手順に従って、ブログのデザインと機能を向上させることができます。

ステップ1：ブログスキンの変更

まず、ブログの基本スキンを「Custom」に設定する必要があります。これにより、カスタムCSSとHTMLコードを適用するための基盤が整います。

ステップ2：カスタムCSSの追加

管理画面の「ページ設定」セクションで、「ページカスタムCSSコード」オプションを見つけます。ここで「デフォルトCSSを無効にする」オプションにチェックを入れ、以下のCSSコードを追加します：

#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}
.cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
    color:#d83b64!important;
    background-color: #f9f2f4!important;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace!important;
    font-size: 100%!important;
}
.cnblogs-markdown mark {
    border-radius:100px!important;
    background-color:yellow!important;
}
.cnblogs-markdown .hljs {
    white-space: pre;
    word-break: normal;
    font-family: "Consolas",sans-serif!important;
    font-size:14px!important;
}

このCSSコードは、読み込みアニメーション、コードブロックのスタイル、ハイライト表示を定義しています。

ステップ3：ヘッダーHTMLの追加

次に、「ページヘッダーHTMLコード」セクションに以下のコードを追加します：

<div id="loading"><div class="loader-inner"></div></div>

このHTML要素は、ステップ2で定義したCSSアニメーションを表示するために必要です。

ステップ4：サイドバーコンテンツの設定

最後に、「ブログサイドバーアナウンス」セクションでHTML形式を選択し、以下のコードを追加します：

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const config = {
    // 基本設定
    theme: {
      name: 'geek',
      color: '#69b6e4',
      title: '',
      avatar: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/me.jpg',
      favicon: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/me2.png',
      headerBackground: 'https://fastly.jsdelivr.net/gh/Angelia-Wang/blogImage/img/20221122142928.png',
    },
    // コードハイライト
    highLight: {
      enable: true,
    },
    // コード行番号
    lineNumbers: {
      enable: false,
    },
    // GitHubアイコン
    github: {
      enable: true,
      url: 'https://github.com/Angelia-Wang',
    },
    // Giteeアイコン
    gitee: {
      enable: false,
      url: '',
    },
    // 画像ライトボックス
    imagebox: {
      enable: true,
    },
    // 目次
    catalog: {
      enable: true,
      position: 'right',
    },
    // 右下ツールバー
    tools: {
      enable: true,
       initialOpen: false,
    },
    // live2dモデル
    live2d: {
      enable: false,
      model: 'haru-01',
    },
    // クリックエフェクト
    click: {
      enable: true,
      auto: false,
      colors: ['#ffb3be', '#66ccff', '#cc99ff',],
      size: 30,
      maxCount: 50,
    },
    // ダークモード
    darkMode: {
      enable: true,
      autoDark: false,
      autoLight: false,
    },
    // 音楽プレイヤー
    musicPlayer: {
      enable: false,
      page: 'all',
      agent: 'pc',
      autoplay: false,
      volume: 0.4,
      lrc: {
        enable: false,
        type: 1,
        color: '',
      },
      audio: [
        {
          name: '404 not found',
          artist: 'REOL',
          url: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo4.mp3',
          cover: 'https://guangzan.gitee.io/imagehost/awescnb/music/demo.jpg',
          lrc: ``,
        },
      ],
    },
    // 記事ヘッダー画像
    postTopimage: {
      enable: false,
    },
    // 記事フッター画像
    postBottomimage: {
      enable: false,
    },
    // 寄付QRコード
    donation: {
      enable: false,
      qrcodes: [],
    },
    // 個人署名
    signature: {
      enable: true,
      contents: [
        "<b style='color:#ff6b81;text-shadow:0 0 0px #151728'>曾经沧海难为水，除却巫山不是云。</b>",
        "<b style='color:#ff6b81;text-shadow:0 0 0px #151728'>路漫漫其修远兮，吾将上下而求索。</b>"
      ],
    },
    // サイドバーコード
    qrcode: {
      enable: false,
      img: '',
      desc: '',
    },
    // ポップアップ通知
    notice: {
      enable: true,
      text:['双击导航条锁屏🔐','欢迎访问我的博客🍺','点个赞再走吧👍','欢迎评论🙌'],
    },
    // ホームリスト画像
    indexListImg: {
      enable: false,
    },
    // トッププログレスバー
    topProgress: {
      enable: true,
      page: 'all',
      agent: 'pc',
      background: '#ff6b81',
      height: '5px',
    },
    // 記事フッター署名
    postSignature: {
      enable: true,
      content: [],
      licenseName: '',
      licenseLink: '',
    },
    // 背景画像または色
    bodyBackground: {
      enable: false,
      value: '',
      opacity: 0.9,
      repeat: false,
    },
    // 弾幕コメント
    barrage: {
      enable: false,
    },
    // グラフ
    charts: {
      enable: false,
    },
    // ロック画面
    lock: {
      enable: false,
    },
    // カスタムリンク
    links: [
      {
        name: '',
        link: '',
      },
    ],
    // 絵文字
    emoji: {
      enable: true,
      buttonIcon: "🥳",
      emojiList: [
        {
          value: 'https://images.cnblogs.com/cnblogs_com/gshang/1626876/o_2001050555139.png',
          label: '',
        },
        {
            value: '🤣',
            label: '笑哭',
        },
        {
            value: '😃',
            label: '大笑',
        },
        {
            value: '😅',
            label: '苦笑',
        },
        {
            value: '😆',
            label: '斜眼笑',
        },
        {
            value: '😏',
            label: '得意',
        },
        {
            value: '😊',
            label: '微笑',
        },
        {
            value: '😎',
            label: '酷！',
        },
        {
            value: '😍',
            label: '花痴',
        },
        {
            value: '🙂',
            label: '呵呵',
        },
        {
            value: '🤩',
            label: '好崇拜哦',
        },
        {
            value: '🤔',
            label: '思考',
        },
        {
            value: '🙄',
            label: '白眼',
        },
        {
            value: '😜',
            label: '略略略',
        },
        {
            value: '😲',
            label: '呆住',
        },
        {
            value: '😭',
            label: '大哭',
        },
        {
            value: '🤯',
            label: '头炸了',
        },
        {
            value: '😰',
            label: '冷汗',
        },
        {
            value: '😱',
            label: '吓死了',
        },
        {
            value: '🤪',
            label: '略略略',
        },
        {
            value: '😵',
            label: '晕',
        },
        {
            value: '😡',
            label: '愤怒',
        },
        {
            value: '🥳',
            label: '祝贺',
        },
        {
            value: '🤡',
            label: '小丑竟是我',
        },
        {
            value: '🤫',
            label: '嘘~',
        },
        {
            value: '🐒',
            label: '猴',
        },
        {
            value: '🤭',
            label: '笑笑不说话',
        },
        {
            value: '🐂',
            label: '牛',
        },
        {
            value: '🍺',
            label: '啤酒',
        },
        {
            value: '(=・ω・=)',
            label: '',
        },
        {
            value: '(｀・ω・´)',
            label: '',
        },
        {
            value: '(°∀°)ﾉ',
            label: '',
        },
        {
            value: '←_←',
            label: '',
        },
        {
            value: '→_→',
            label: '',
        },
        {
            value: 'Σ(ﾟдﾟ;)',
            label: '',
        },
        {
            value: '(｡･ω･｡)',
            label: '',
        },
         {
             value: '(-_-#)',
             label: '',
         },
      ]
    },
  }
  $.awesCnb(config)
</script>

このJavaScriptコードは、ブログのさまざまな機能を拡張するための設定オブジェクトを定義しています。各設定項目は、ブログの外観や機能をカスタマイズするために使用されます。

設定の調整

上記のコードでは、多くのオプションが提供されています。必要に応じてこれらの値を変更して、ブログの外観や機能を調整してください。特に、テーマの色、アイコン、リンクなどは、ご自身のブログに合わせてカスタマイズすることをお勧めします。

これらの設定を適用すると、ブログはよりプロフェッショナルでユーザーフレンドリーな外観になります。また、読者にとって使いやすいインターフェースも提供されます。