写真をより大きく魅せる（といっても大き過ぎない 最大900px）
シンプルな レスポンシブデザイン対応テーマ
== 特徴 ==
- テーマ"Ten Days"（https://blog.hatena.ne.jp/-/store/theme/26006613687614034）を一部変更
- 背景画像全画面表示（トップページ）及び背景画像固定（スマホ・タブレット）は考慮しない
- ダークモード対応（パソコン・タブレット等のシステム・ブラウザ設定で外観・画面の配色を黒基調にすればこのテーマも自動的にダークに切り替わる）
- トップページ及びアーカイブページ（最新記事、カテゴリー別、月別等の一覧）は2カラム（ただし、閲覧画面横幅768px未満は1カラム）、記事ページは1カラム
- 画面992px以上の場合、表示形式（PC版）が一覧形式のトップページ（Proプラン）及びアーカイブページはカード型1列2枚横並び
- 2カラムのサイドバー横幅は300px固定（広告掲載を考慮、変更可）、記事部分の横幅は閲覧画面の横幅に追従して可変
- 月別アーカイブモジュールは高さ制限をかける（縦長となるリスト形式を考慮）
トップページ（全文形式）（768px以上, 未満）
アーカイブページ（768px以上, 992px以上）
アーカイブページ（ダークモード）（992px以上）
記事ページ
== カスタマイズ ==
:root {
--text: #454545; /* 文字色 */
--base: #f5f5f5; /* 背景色 */
--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 */
--box2-width: 300px; /* サイドバー幅 */
--module-height: 300px; /* モジュール高さ */
}
@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);
}
}
「設定／デザイン／カスタマイズ／デザインCSS」に追記することにより
:root で指定する文字色や背景色、サイドバー幅などを変えられます
（変更する場合には必ず、事前にCSSのバックアップを取ってください）
例えば、
- サイドバー300pxは広すぎるので250pxにする
:root {--box2-width: 250px;} - ダークモードの文字色を#cccからorangeに変える
@media (prefers-color-scheme: dark) {:root {--text: orange;}}
== 暫定公開サンプルブログ ==
