デザインテーマ Ten Days

このテーマは［てんで］だめじゃないか、［10日］もしないうちに飽きるんじゃないか、と言われそうな シンプルなテーマ［Ten Days］です。レスポンシブデザインに対応しています。

特徴

• 背景画像は 固定［透過］＆ トップページの最初（上部）と最後（下部）は 全画面表示 です

• パソコン等のシステム（ブラウザ）の設定で 外観（テーマ、画面の配色）を黒基調（ダークモード）にすれば このテーマもダークに切り替わります

テーマのインストールは背景画像を外した 初期設定状態 で行ってください

10日間で飽きないために カスタマイズ

"デザイン／カスタマイズ／デザインCSS" へ追記します

背景画像の固定

（デザイン／カスタマイズ／背景画像で設定しただけでは、パソコンで背景画像の固定ができても スマホ・タブレットでは固定されません　2021/03現在 <system>設定）（これを以下の記述で固定可能にします）

スマホ・タブレットでも背景画像固定・全画面表示を可能にするためには、背景とする画像をアップロード後　デザインCSS へ追記する
その際　url( ) は アップロードした背景画像の保存先に書き換える
　　<system section="background" selected="custom"> background-image の url('https … .jpg')　（通常 Hatena fotolifeのHatena Blogフォルダ）

body.customized-background-image::before {
    background-image: url();
}

背景画像の非透過

背景画像透過をせずにコンテンツを表示する

#container,#footer {
    background-color: var(--base);
}

背景画像の全画面表示オフ

トップページの最初（上部）と最後（下部）の背景画像全画面表示の、そのどちらか、あるいは両方を オフにする

（上部）
.page-index.customized-background-image #container {
    margin-top: 0;
}

（下部）
.page-index.customized-background-image #footer {
    margin-top: 0;
}

ブログ全体の配色（雰囲気）変更

以下のCSS変数を書き換える

/* ライト(通常)テーマ */
:root {
    --text: #454545;
    --base: #f5f5f5;                    /* body-background */
    --anchor: #1487bd;                  /* a */
    --hover: #0f668f; 
    --kword-border: #999; 
    --h1-6: #333;                       /* h1～h6 */
    --h1-6-a: #333;
    --h1-6-hover: #0f668f;
    --container: rgba(245,245,245,0.9); /* #container, #footer */
    --border: #c0c0c0;
    --shadow: #c0c0c0; 
    --block-pre: rgba(237,237,237,0.8); /* blockquote, pre */
}
/* ダークテーマ */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #ccc;
    --base: #272822;
    --anchor: #ccc;
    --hover: #ffe295;
    --kword-border: #999;
    --h1-6: #f2f2f2;
    --h1-6-a: #f2f2f2;
    --h1-6-hover: #fff;
    --container: rgba(39,40,34,0.9);
    --border: #aaa;
    --shadow: #aaa;
    --block-pre: rgba(0,0,0,0.25);
  }
}

テーマ ストア - Ten Days