/* */
@charset "UTF-8";@import"https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700";@import"https://fonts.googleapis.com/css?family=Cabin:400,600";/*! normalize.css v2.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"“" "”" "‘" "’"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.clearfix{display:block;*zoom: 1}.clearfix:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.inline-block{display:inline-block;*display: inline;*zoom: 1}.border-box{-ms-box-sizing:border-box;box-sizing:border-box}.ellipsis{white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}html,body{font-family:Cabin,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif;color:#463e13;background:#f6f5dd url(https://cdn.blog.st-hatena.com/css/theme/venetia/bg.jpg?version=f5154c74e6e38109ce2f0c7b9afd51)}a{color:#6c9865;text-decoration:none}a:hover{color:#5a8353;border-bottom:1px dotted}a:visited{color:#6d8669}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{color:#463e13;text-decoration:none}a.keyword{text-decoration:none;border-bottom:1px dotted #817b56;color:#463e13}.btn{display:inline-block;*display: inline;*zoom: 1;padding:4px 10px;margin-bottom:0;line-height:18px;color:#463e13;background-color:#f25d7f;text-align:center;vertical-align:middle;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:400;text-decoration:none!important;color:#f6f5dd}.btn:hover{color:#f6f5dd;background-color:#ef496f;text-decoration:none!important;border:0 none}.btn-small{padding:2px 10px!important;font-size:11px!important}.btn-large{padding:13px 19px;font-size:17px;line-height:normal;font-weight:700}#globalheader-container{background:#f5f27d;color:#463e13;position:sticky;top:0;box-shadow:0 0 3px #0003}#container{margin-left:auto;margin-right:auto;margin-bottom:30px}#container #content{display:block;*zoom: 1;width:960px;margin:0 auto}#container #content:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}#main{width:620px;float:left;margin-top:40px}#box2{width:280px;float:right}#blog-title{font-family:Cabin Sketch;background-image:url(https://cdn.blog.st-hatena.com/css/theme/venetia/header.jpg?version=f5154c74e6e38109ce2f0c7b9afd51);background-position:bottom center;background-size:cover;height:300px;width:100%;border-bottom:3px solid #fff;box-shadow:0 0 3px #0003}#blog-title #blog-title-inner{width:960px;margin:0 auto;max-height:200px;overflow:hidden;padding:100px 0 0;background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/powered-by.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat right bottom}#title{margin:0;font-size:42px;-moz-text-shadow:0 0 10px #000000;-webkit-text-shadow:0 0 10px #000000;text-shadow:0 0 10px #000000;padding-right:300px}#title a{color:#fff}#title a:hover{border-bottom:0 none}#blog-description{padding-right:300px;font-weight:700;font-size:100%;margin:5px 0 0;color:#fff;-moz-text-shadow:0 0 10px #000000;-webkit-text-shadow:0 0 10px #000000;text-shadow:0 0 10px #000000}.header-image-enable #globalheader-container{color:#463e13}.header-image-enable #blog-title{margin-top:42px;border:0 none;box-shadow:0 0 #0000}.header-image-enable #blog-title-inner{padding-left:20px!important;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;margin-top:50px!important}#top-box{font-size:90%;width:960px;margin:0 auto}#top-box .breadcrumb{margin-top:1em;border:1px dotted #817b56;padding:10px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.entry{position:relative;margin-bottom:100px}.entry .entry-inner{background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/flower1.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat top right}.entry-header{margin-bottom:20px;position:relative}.entry-title{margin:0;line-height:1.3;font-size:160%;-moz-text-shadow:1px 1px 0 #fff;-webkit-text-shadow:1px 1px 0 #fff;text-shadow:1px 1px 0 #fff}.entry-title a:hover{border-bottom:0 none}.date{font-weight:700;margin-bottom:20px;font-family:Cabin Sketch;border-bottom:1px dashed #817b56;margin-right:170px}.date a{color:#6c9865;text-decoration:none;font-size:34px}.date a:hover{border-bottom:0 none}.date .date-year{display:block;font-size:24px}.date .hyphen:nth-child(2){display:none}.date-last-updated{color:#6c9865;font-size:24px}.date-last-updated .date-year{display:inline;font-size:24px}.date-last-updated .hyphen:nth-child(2){display:inline}.date-last-updated .blogicon{width:16px;height:16px}.categories{background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/category.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat center left;padding-left:20px;margin-top:10px;font-size:75%;font-weight:700;-moz-text-shadow:1px 1px 0 #fff;-webkit-text-shadow:1px 1px 0 #fff;text-shadow:1px 1px 0 #fff}.categories.no-categories{margin:0}.entry-header-menu{position:absolute;bottom:0;left:-60px}.entry-header-menu a{display:inline-block;*display: inline;*zoom: 1;padding:4px 10px;margin-bottom:0;line-height:18px;color:#463e13;background-color:#f25d7f;text-align:center;vertical-align:middle;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:400;text-decoration:none!important;color:#f6f5dd}.entry-header-menu a:hover{color:#f6f5dd;background-color:#ef496f;text-decoration:none!important;border:0 none}.entry-content{font-size:95%;line-height:1.8;padding-bottom:10px;border-bottom:1px dashed #817b56}.entry-content p{margin:0 0 1em}.entry-content img{max-width:100%}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1.3em 0 .8em;line-height:1.5}.entry-content h1{font-size:160%}.entry-content h2{font-size:150%}.entry-content h3{font-size:140%}.entry-content h4{font-size:130%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-content .footnote-number{scroll-margin-top:56px}.entry-content table{border-collapse:collapse;border-spacing:0;margin-bottom:1em}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 10px}.entry-content table th{background:#f5f5f5}.entry-content blockquote{border:1px solid #817b56;margin:0 0 10px;padding:20px}.entry-content blockquote p{margin-top:0;margin-bottom:0}.entry-content pre{border:1px solid #817b56;margin:0 0 10px;padding:20px;white-space:pre}.entry-content pre>code{margin:0;padding:0;white-space:pre;border:0;background:transparent;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content code{font-size:90%;margin:0 2px;padding:0 5px;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content .hatena-asin-detail li{line-height:1.4}.entry-footer{min-height:130px;margin-top:10px;background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/flower2.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat top left;padding-left:150px}.entry-footer-section{font-size:80%;color:#807b5c}.entry-footer-section a{color:#807b5c}.social-buttons,.entry-footer-html{margin:10px 0}.comment-box ul{list-style:none;margin:0 0 15px;padding:0;font-size:90%;line-height:1.7}.comment-box li{padding:10px 0 10px 60px;border-bottom:1px dotted #817b56;position:relative}.comment-box li:first-child{border-top:1px dotted #817b56}.comment-box .read-more-comments{padding:10px 0}.comment-box .hatena-id-icon{position:absolute;top:10px;left:0;width:50px!important;height:50px!important;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.comment-user-name{margin:0 0 10px;font-weight:700}.comment-content{font-size:90%;margin:0 0 10px;word-wrap:break-word}.comment-content p{margin:0 0 10px}.comment-metadata{font-size:80%;color:#807b5c;margin:0}.comment-metadata a{color:#807b5c}.leave-comment-title{display:inline-block;*display: inline;*zoom: 1;padding:4px 10px;margin-bottom:0;line-height:18px;color:#463e13;background-color:#f25d7f;text-align:center;vertical-align:middle;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;cursor:pointer;font-size:12px;text-decoration:none;font-weight:400;text-decoration:none!important;color:#f6f5dd}.leave-comment-title:hover{color:#f6f5dd;background-color:#ef496f;text-decoration:none!important;border:0 none}#box2{font-size:85%;line-height:1.5;background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/butterfly.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat top right;margin-top:40px}#box2 #box2-inner{margin-top:45px;background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/bee.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat bottom left;padding-bottom:10px}.hatena-module{margin-bottom:40px}.hatena-module-title{font-weight:700;margin-bottom:15px;font-size:120%;border-bottom:1px dotted #817b56}.hatena-module-title a{color:#463e13;text-decoration:none}.hatena-module-title a:hover{text-decoration:underline}.hatena-module-profile .profile-icon{float:left;margin:0 10px 10px 0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.hatena-module-profile .id{display:block;font-weight:700;font-size:110%;margin-bottom:5px}.hatena-module-profile .profile-description{font-size:90%}.hatena-module-profile .profile-description p{margin-top:0}.hatena-urllist{list-style:none;margin:0;padding:0}.hatena-urllist li{padding:4px 0;line-height:1.5}.hatena-urllist li a{text-decoration:none}.hatena-module-search-box .search-form{border:1px solid #817b56;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;width:100%;-ms-box-sizing:border-box;box-sizing:border-box;position:relative}.hatena-module-search-box .search-module-input{padding:5px;color:#463e13;background:none;border:none;outline:none;height:20px;width:90%}.hatena-module-search-box .search-module-button{width:20px;height:20px;background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat right center;border:none;outline:none;text-indent:-9999px;position:absolute;top:5px;right:5px;-moz-opacity:.5;-khtml-opacity:.5;-webkit-opacity:.5;opacity:.5;filter:alpha(opacity=50)}.hatena-module-search-box .search-module-button:hover{-moz-opacity:.85;-khtml-opacity:.85;-webkit-opacity:.85;opacity:.85;filter:alpha(opacity=85)}.pager{background:#a9a798;margin:20px 0;font-size:80%;font-weight:700;text-align:center;display:block;*zoom: 1}.pager:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.pager a{color:#f6f5dd;display:block;padding:5px 10px}.pager a:hover{border:0 none;background:#929184}.pager .pager-next{display:block;float:right;text-align:right;width:50%}.pager .pager-prev{display:block;text-align:left;float:left;width:50%}#footer{background:url(https://cdn.blog.st-hatena.com/css/theme/venetia/copy.png?version=f5154c74e6e38109ce2f0c7b9afd51) no-repeat center right;width:960px;margin:0 auto;font-family:Cabin Sketch;border-top:1px dashed #817b56;padding:30px 0;color:#807b5c;line-height:1.5;font-size:18px}#footer p{margin:0}#footer a{color:#807b5c}.page-about .entry-content{border-bottom:0 none}.page-about .entry-inner{background:none}.page-about dt{font-size:16px;font-weight:700;border-bottom:1px dashed #807b5c;margin-bottom:5px}.page-about dd{margin-left:0;margin-bottom:30px}.page-archive-category #content{padding-top:0!important}.page-archive #main section{margin-bottom:20px}.page-archive #main .date{margin-bottom:10px;font-weight:700;font-family:Cabin Sketch;border-bottom:1px dashed #817b56;margin-right:0}.page-archive #main .date a{color:#6c9865;font-size:160%}.page-archive #main .categories{margin-bottom:1em}.page-archive #main ul{list-style:none;margin:0;padding:0}.page-archive #main ul li{padding:4px 0;line-height:1.5}.page-archive #main ul li a{text-decoration:none}.page-archive #main ul .entry-title{font-size:120%;font-weight:700}#top-editarea,#bottom-editarea{width:960px;margin:0 auto;padding:10px 0;font-size:90%}
/* */
/* 3分間のゲーム説明（黒文字） */ #game-time-info { text-align: center; font-size: 14px; color: black; margin-bottom: 5px; }
/* スコアボード */ #score-board { text-align: center; background: #222; color: #fff; padding: 10px; margin-bottom: 10px; border-radius: 5px; } #score-board h3 { margin: 0; font-size: 18px; } #high-scores { list-style: none; padding: 0; margin: 5px 0; } #high-scores li { font-size: 16px; padding: 3px; } /* ゲーム全体の中央配置 */ #game-container { text-align: center; margin: auto; display: flex; flex-direction: column; align-items: center; } /* 画面の設定 */ #tetris-container { width: 280px; height: 360px; background-color: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; margin-bottom: 10px; }
/* スタートボタン */ #start-btn { background-color: #ff5722; color: white; font-size: 18px; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 10px; } #start-btn:hover { background-color: #e64a19; } /* 操作ボタンの配置 */ #tetris-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 5px; } /* 上の3つのボタンを横並び */ #top-controls { display: flex; justify-content: center; gap: 8px; } /* 下ボタンを独立して配置 */ #down-btn { margin-top: 5px; width: 70px; /* ボタン幅を調整 */ height: 40px; /* ボタン高さを調整 */ } /* 木目調の操作ボタン */ #tetris-controls button { background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); background-color: #8B5A2B; color: white; font-weight: bold; border: 2px solid #5A3E1B; padding: 12px 16px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.2s; } /* ホバー時のボタンデザイン */ #tetris-controls button:hover { background-color: #5A3E1B; } /* レスポンシブ対応 */ @media (max-width: 400px) { #tetris-container { width: 100%; } #tetris-controls button { padding: 10px 14px; font-size: 16px; } #down-btn { width: 60px; height: 35px; } }
/* はてなブログのサイドバーのカテゴリーを2列にする */ .archive-module ul, .hatena-module-category ul, .category-module ul { display: flex; flex-wrap: wrap; gap: 10px; /* カテゴリーの間隔を調整 */ padding: 0; list-style: none; } .archive-module ul li, .hatena-module-category ul li, .category-module ul li { flex: 1 1 calc(50% - 10px); /* 2列にする */ max-width: 50%; box-sizing: border-box; } /* カテゴリーをボックスデザインに */ .archive-module ul li a, .hatena-module-category ul li a, .category-module ul li a { display: block; background: #f4f4f4; /* 背景色 */ padding: 8px; text-align: center; border-radius: 5px; /* 角を丸く */ transition: 0.3s; text-decoration: none; color: #333; } /* ホバー時のデザイン */ .archive-module ul li a:hover, .hatena-module-category ul li a:hover, .category-module ul li a:hover { background: #ddd; }
/* ✅ カテゴリー欄の木目調デザイン */ .archive-module ul li a, .hatena-module-category ul li a, .category-module ul li a { display: block; background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); /* 木目調テクスチャ */ background-color: #8B5A2B; /* 木の色 */ color: white; /* 文字色 */ font-weight: bold; padding: 8px; text-align: center; border-radius: 5px; /* 角を丸く */ transition: 0.3s; text-decoration: none; border: 2px solid #5A3E1B; } /* ✅ ホバー時のデザイン */ .archive-module ul li a:hover, .hatena-module-category ul li a:hover, .category-module ul li a:hover { background-color: #5A3E1B; /* 濃い木目調 */ }
/* */
/* default */
/* */
#menu { position: relative; width: 100%; padding-left: 0px; height: 40px; background: #343838;/*グローバルメニュー背景色*/ } .menu-inner{ width: 968px; margin: 0 auto; height: 40px; } #menu li { list-style-type: none; float: left; height: 40px; text-align: left; } #menu li a { padding-left: 15px; padding-right: 15px; display: block; color: #ffffff;/*グローバルメニュー文字色*/ font-size: 80%; font-weight: bold; line-height: 40px; } #menu li:hover a { color: #00DFFC; background: #ffffff; transition: all .5s; } .menu-toggle{ display: none; } /*パソコン１カラム*/ @media screen and (max-width:968px){ .menu-inner{ width: 768px; } } /*タブレット*/ @media screen and (max-width:768px){ #top-editarea{ height: initial; background: #343838;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; } .menu-toggle{ color: #ffffff;/*MENUの文字色*/ display: inline-block; padding: 5px; margin: 3px; } #menu { width: 100%; display: none; height: initial; padding: 0; margin: 0; } .menu-inner{ width: 100%; height: initial; position: static; margin: 0; } #menu li{ float: none; height: 35px; width: 100%; list-style-type: none; background: #00DFFC;/*リスト文字の背景色*/ margin: 0 auto; text-align: left;/*リストの文字の位置*/ } #menu li a { height: initial; color: #343838;/*リスト文字色*/ display: block; } #menu li:hover a{ color: initial; background: initial; } }
/* ページ全体の背景を薄い木の質感にする（iPhoneアプリ対応） */ html, body { background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') !important; /* 木目テクスチャ */ background-color: #f5deb3 !important; /* 薄い木目調の補助カラー */ background-size: cover !important; background-attachment: fixed !important; background-repeat: repeat !important; } /* 本文エリア（PC & スマホ & iPhoneアプリ対応） */ .entry-content, .entry, .article, .post, .hatena-body, .hatena-entry, .entry-contents, .blog-article { background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') !important; /* 木目テクスチャ */ background-color: rgba(255, 255, 255, 0.8) !important; /* 半透明の白背景 */ background-size: cover !important; background-repeat: repeat !important; padding: 20px !important; border-radius: 10px !important; /* 角を少し丸める */ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important; /* 軽い影をつけて浮かせる */ } /* スマホ専用の調整（iPhoneアプリ対応） */ @media screen and (max-width: 768px) { html, body { background-attachment: scroll !important; /* iPhoneアプリでは `fixed` を無効に */ } .entry-content, .entry, .article, .post, .hatena-body, .hatena-entry, .entry-contents, .blog-article { padding: 15px !important; /* スマホでは余白を少し減らす */ border-radius: 5px !important; /* 角を少し丸める */ } } /* iPhoneのはてなブログアプリ専用の対策 */ @supports (-webkit-touch-callout: none) { html, body { background-attachment: scroll !important; /* iPhoneアプリでは `fixed` が効かないためスクロール */ background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png') !important; /* 木目テクスチャ */ background-color: #f5deb3 !important; /* 補助カラー */ } }
/* タイトル（h1）のデザイン（木の背景に調和する色） */ h1 { color: #8B4513; /* 落ち着いたブラウン（木の質感に馴染む色） */ font-size: 2em; font-weight: bold; border-bottom: 3px solid #A0522D; /* やや明るめのブラウンでラインを追加 */ padding-bottom: 5px; margin-bottom: 15px; }
#back-to-top { position: fixed; bottom: 20px; /* 画面下から20pxの位置 */ right: 15px; /* 右側の位置を 15px に変更（左に15px移動） */ transform: translateY(-50%); /* ボタンの高さの半分だけ上へ移動 */ z-index: 1000; /* 他の要素の上に表示 */ background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); background-color: #8B5A2B; /* 背景色（茶色） */ color: white; padding: 12px 18px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: bold; display: inline-block; border: 2px solid #5D4037; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); transition: all 0.3s ease-in-out; } /* ホバー時 */ #back-to-top:hover { background-color: #6D4C41; transform: translateY(calc(-50% - 3px)); /* ボタンの高さの半分 + 3px 上に */ box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); } /* クリック時 */ #back-to-top:active { transform: translateY(calc(-50% + 1px)); /* クリック時に 1px 戻す */ box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5); }
/* サイドバー全体のスタイル */ .sidebar { background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); /* 木目テクスチャ */ background-color: #8B5A2B; /* 落ち着いたブラウン */ padding: 15px; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); } /* 各サイドバー項目（掲示板風） */ .sidebar-module { background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); /* 木目テクスチャ */ background-color: #A67B5B; /* さらに明るめの木目色 */ border: 3px solid #5D4037; /* 濃いブラウンの枠 */ padding: 10px; margin-bottom: 15px; border-radius: 5px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), 2px 2px 8px rgba(0, 0, 0, 0.3); } /* サイドバーのタイトル（掲示板の見出し風） */ .sidebar-module h2 { background: #6D4C41; /* 深めの木目調 */ color: #FFFBEA; /* クリーム色で見やすく */ padding: 8px; font-size: 16px; font-weight: bold; text-align: center; border-radius: 3px; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2); } /* サイドバー内のリンク（紙に貼られたメモ風） */ .sidebar-module a { display: block; background: #F5E1A4; /* 黄色っぽいメモ紙の色 */ color: #5D4037; padding: 6px 10px; margin: 5px 0; border-left: 4px solid #B8860B; /* ノートのライン風 */ text-decoration: none; font-weight: bold; transition: all 0.3s; } /* リンクのホバー時（少し暗くする） */ .sidebar-module a:hover { background: #E8D195; color: #3E2723; transform: translateX(3px); } /* クリック時のエフェクト */ .sidebar-module a:active { transform: translateX(1px); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4); }
.header-search { background: #c2a483; /* 木目調に合うベージュ系の背景色 */ border: 2px solid #8b5a2b; /* 木のフレームっぽいボーダー */ border-radius: 8px; /* 角を少し丸める */ padding: 10px; display: flex; justify-content: center; align-items: center; width: fit-content; margin: auto; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); /* 軽く影をつけて立体感を出す */ } .search-input { width: 200px; padding: 8px; border: 1px solid #8b5a2b; border-radius: 5px; background: #f5e1c5; /* 木のナチュラルな質感をイメージ */ color: #4b2e1f; /* ダークブラウン系の文字色 */ font-size: 14px; } .search-input::placeholder { color: #8b5a2b; /* placeholderの色も木目調に合う色に */ } .header-search input[type="submit"] { background: #8b5a2b; /* 木目に合うブラウン系のボタン */ color: white; border: none; border-radius: 5px; padding: 8px 12px; margin-left: 5px; cursor: pointer; font-size: 14px; } .header-search input[type="submit"]:hover { background: #6b3f1f; /* ホバー時に少し濃くする */ }
@media screen and (max-width: 768px) { header { display: block !important; } }
@media screen and (max-width: 768px) { .header-search { display: block !important; } }
@media screen and (max-width: 768px) { header, .header-search { display: block !important; overflow: visible !important; height: auto !important; opacity: 1 !important; } }