このテーマは[てんで]だめじゃないか、[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 サンプルエントリー - 写真帖・あの日あの時