/* */
@charset "UTF-8";
/*
Theme: Color Book
Author: haruto
Responsive: yes
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
html,
body {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
color: #454545;
line-height: 1.6;
}
a {
color: #1487bd;
}
a:hover {
color: #0f668f;
}
a.keyword {
text-decoration: none;
border-bottom: 1px dotted #ddd;
color: #454545;
}
h1, h2, h3, h4, h5, h6 {
color: #333;
line-height: 1.3;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #333;
text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #0f668f;
}
/* ヘッダ（グローバルヘッダ）
グローバルヘッダの中はiframeですが、
#globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
background-color: #454545;
color: #fff;
}
/* container */
#container {
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 768px) {
#container,
#footer {
width: 720px;
margin: auto;
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 992px) {
#container,
#footer {
width: 992px;
}
}
/* 2カラムレイアウト */
#content-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (min-width: 768px) {
#content-inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
@media (min-width: 768px) {
#wrapper {
width: 480px;
}
}
@media (min-width: 992px) {
#wrapper {
width: 640px;
}
}
@media (min-width: 768px) {
#box2 {
width: 200px;
}
}
@media (min-width: 992px) {
#box2 {
width: 300px;
}
}
/* ヘッダ */
#blog-title {
text-align: center;
}
#title {
margin: 0;
font-size: 1.5rem;
}
@media (min-width: 992px) {
#title {
font-size: 1.7rem;
}
}
#title a {
color: #454545;
}
#blog-description {
font-weight: normal;
font-size: .8rem;
margin: 1em 0 0;
}
/* ヘッダ画像を設定したとき */
.header-image-enable #blog-title {
margin: 0;
}
.header-image-enable #blog-title-content {
padding-top:60px;
}
/* タイトル下HTML */
#top-editarea {
margin-bottom: 30px;
}
/* パンくず（カテゴリー、記事ページで表示されます） */
.breadcrumb {
font-size: .9rem;
margin-top:20px;
}
/* entry */
.entry {
position: relative;
margin-bottom: 40px;
}
.entry-header {
padding-bottom: 40px;
margin-bottom: 2em;
border-bottom: 1px solid #ddd;
position: relative;
}
.date {
margin-bottom: .5em;
font-size: .9rem;
}
.date a {
color: #999;
text-decoration: none;
}
.date a:hover {
text-decoration: underline;
}
.entry-title {
margin: 0 0 .3em;
font-size: 21px;
}
.categories {
margin: 3px 0;
font-size: 13px;
}
.categories a {
margin-right: .5em;
color:#fff;
font-weight:bold;
text-decoration:none;
display:inline-block;
background:#ccc;
padding:5px;
border-radius:6px;
}
/* 「編集する」ボタン */
.entry-header-menu {
position: absolute;
top: 0;
right: 0;
}
/* 記事内の書式 */
.entry-inner{
background:#fff;
padding:25px;
border-radius:5px;
}
.entry-content{
background:#fff;
}
.entry-content img,
.entry-content video {
max-width: 100%;
height: auto;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
margin: 1em 0 0.8em 0;
}
.entry-content h1 {
font-size: 1.5rem;
}
@media (min-width: 992px) {
.entry-content h1 {
font-size: 1.7rem;
}
}
.entry-content h2 {
font-size: 1.4rem;
}
@media (min-width: 992px) {
.entry-content h2 {
font-size: 1.5rem;
}
}
.entry-content h3 {
font-size: 1.2rem;
}
@media (min-width: 992px) {
.entry-content h3 {
font-size: 1.3rem;
}
}
.entry-content h4 {
font-size: 1.1rem;
}
.entry-content h5 {
font-size: 1rem;
}
.entry-content h6 {
font-size: .9rem;
}
.entry-content ul,
.entry-content ol,
.entry-content dd {
margin: 0 0 1em 1.5em;
padding: 0;
}
.entry-content ul li ul, .entry-content ul li ol,
.entry-content ol li ul,
.entry-content ol li ol,
.entry-content dd li ul,
.entry-content dd li ol {
margin-bottom: 0;
}
.entry-content table {
border-collapse: collapse;
border-spacing: 0;
border-bottom: 1em;
margin-bottom: 1em;
width: 100%;
overflow: auto;
display: block;
font-size: .8rem;
}
@media (min-width: 992px) {
.entry-content table {
font-size: .9rem;
}
}
.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 #ddd;
margin: 0 0 10px;
padding: 20px;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content pre,
.entry-content code {
font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content pre {
background: #f5f5f5;
border: none;
white-space: pre-wrap;
text-overflow: ellipsis;
font-size: 100%;
line-height: 1.3;
font-size: .8rem;
padding: 10px;
}
.entry-content pre > code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
background-color: transparent;
font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}
.entry-content code {
font-size: 90%;
margin: 0 2px;
padding: 0px 5px;
background-color: #f5f5f5;
border-radius: 3px;
}
.entry-content hr {
width: 50%;
border: 0;
border: none;
border-top: 1px solid #ddd;
margin: 2em auto;
}
.entry-content .table-of-contents {
padding: 1em 1em 1em 2em;
margin: 1em 0;
border: 1px solid #ddd;
}
/* 記事下 */
.entry-footer .social-buttons {
margin-bottom: 1em;
}
.entry-footer-section {
color: #999;
font-size: .9rem;
}
.entry-footer-section a {
color: #999;
}
/* コメント */
.comment-box {
margin: 1em 0;
}
.comment-box .comment {
list-style: none;
margin: 0 0 15px 0;
padding: 0;
line-height: 1.7;
font-size: .85rem;
}
@media (min-width: 768px) {
.comment-box .comment {
font-size: .9rem;
}
}
.comment-box .entry-comment {
padding: 10px 0 10px 60px;
border-bottom: 1px solid #ddd;
position: relative;
}
.comment-box .entry-comment:first-child {
border-top: 1px solid #ddd;
}
.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;
border-radius: 3px;
}
.comment-user-name {
margin: 0 0 .4em 0;
font-weight: bold;
}
.comment-content {
margin: 0 0 .4em 0;
word-wrap: break-word;
color: #454545;
font-size: .85rem;
}
.comment-content p {
margin: 0 0 .6em 0;
}
.comment-metadata {
color: #999;
margin: 0;
font-size: .8rem;
}
.comment-metadata a {
color: #999;
}
.leave-comment-title {
padding: .6em 1em;
font-size: .85rem;
border: 1px solid #ddd;
}
/* Pager */
.pager {
margin: 2em 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* サイドバーモジュール */
.hatena-module {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 3em;
font-size: .85rem;
}
@media (min-width: 768px) {
.hatena-module {
font-size: .9rem;
}
}
.hatena-module-title {
margin-bottom: .6em;
padding-bottom: .2em;
font-size: 1rem;
font-weight: bold;
}
.hatena-module-title a {
color: #454545;
text-decoration: none;
}
.hatena-module-title a:hover {
text-decoration: underline;
}
/* Profile module */
.hatena-module-profile .profile-icon {
float: left;
margin: 0 10px 10px 0;
}
.hatena-module-profile .id {
display: block;
font-weight: bold;
margin-bottom: .5em;
}
.hatena-module-profile .profile-description p {
margin-top: 0;
}
/* urllist module */
.hatena-urllist {
list-style: none;
margin: 0;
padding: 0;
}
.hatena-urllist li {
padding: .5em 0;
}
.hatena-urllist li:last-child {
padding-bottom: 0;
}
.hatena-urllist li a {
text-decoration: none;
color:#333;
}
.hatena-urllist li a:hover {
text-decoration: underline;
}
.hatena-urllist .urllist-category-link {
font-size: .7rem;
padding: .1em .3em;
}
.hatena-urllist .urllist-date-link a {
color: #999;
}
.hatena-urllist .urllist-entry-body {
margin-top: .3em;
}
/* Search module */
.hatena-module-search-box .search-form {
border: 1px solid #ddd;
border-radius: 3px;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.hatena-module-search-box .search-module-input {
-webkit-box-flex: 1;
-ms-flex: 1 0;
flex: 1 0;
padding: 5px;
color: #454545;
background: none;
border: none;
outline: none;
height: 20px;
}
.hatena-module-search-box .search-module-button {
width: 24px;
height: 24px;
margin-right: 5px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
border: none;
outline: none;
color: transparent;
overflow: hidden;
opacity: .5;
cursor: pointer;
}
.hatena-module-search-box .search-module-button:hover {
opacity: .85;
}
/* About ページ */
.page-about .entry-content dt {
font-weight: bold;
border-bottom: 1px solid #ddd;
margin-bottom: .5em;
}
.page-about .entry-content dd {
margin-left: 0;
margin-bottom: 2em;
}
/* Archive */
.archive-header-category {
text-align: center;
}
.page-archive .archive-entry {
margin-left: auto;
margin-right: auto;
margin-bottom:15px;
line-height: 1.3;
background:#fff;
display:flex;
position:relative;
height:120px;
border-radius:5px;
border:1px solid #ddd;
}
.page-archive .entry-title {
margin: .3em auto;
}
.page-archive .entry-thumb {
width: 130px;
height: 120px;
background-size: cover;
border-radius:5px 0 0 5px;
}
.page-archive .entry-description {
margin: 0;
font-size: .85rem;
}
.page-archive .social-buttons {
display: block;
margin-top: .3em;
}
@media (min-width: 768px) {
.page-archive .archive-entry{
height:150px;
margin-bottom:30px;
}
.page-archive .entry-thumb {
width: 225px;
height: 150px;
}
.page-archive .entry-description {
font-size: .9rem;
}
}
/* footer */
#footer {
margin-top: 2em;
padding-bottom: 2rem;
text-align: center;
font-size: .8rem;
color: #999;
background:#fff;
width:100%;
padding-top:15px;
}
#footer a {
color: #999;
}
#footer p {
margin: .5em auto;
}
/*----------------------ここから追記---------------------------------*/
/*ヘッダー画像がない時は上下に余白*/
#blog-title-inner{
padding:30px 0;
}
/*ヘッダー画像がある時は上下に余白なし*/
.header-image-only #blog-title #blog-title-inner{
padding:0;
}
.header-image-enable #blog-title #blog-title-inner{
padding:0;
}
/*ヘッダーとコンテンツの間に余白*/
#content{
margin-top:30px;
}
/*日付とタイトルを画像の右側へ*/
.archive-entry-header{
order:1;
padding:10px;
}
/*サイドバーの背景を白く*/
.hatena-module{
background:#fff;
padding:25px;
border-radius: 5px;
border:1px solid #ddd;
}
/*トップページの記事本文非表示*/
.archive-entry-body{
display:none;
}
.categories{
position:absolute;
bottom:5px;
right:10px;
}
/*--------タブレット画面-----------*/
@media(max-width:991px){
.header-image-only #blog-title #blog-title-inner{
height:144px;
background-size:cover;
}
.header-image-enable #blog-title #blog-title-inner{
height:144px;
background-size:cover;
}
.header-image-enable #blog-title-content{
padding-top:50px;
}
#container{
padding-right:0;
padding-left:0;
}
#content{
padding-right:10px;
padding-left:10px;
}
.page-archive .entry-title{
font-size: 17px;
}
.categories a:not(:first-child){
display:none;
}
.breadcrumb{
padding:0 10px;
}
}
@media (max-width:767px) {
#blog-description{
margin-top:0;
}
}
@media (max-width:640px) {
.header-image-only #blog-title #blog-title-inner{
height:120px;
}
}
@media (max-width:500px) {
.header-image-only #blog-title #blog-title-inner{
height:100px;
}
}
/*----------スマホ画面-------------*/
@media (max-width:479px) {
.header-image-enable #blog-title #blog-title-inner{
height:100px;
}
.header-image-enable #blog-title-content{
padding-top:25px;
}
#title{
font-size:18px;
}
#blog-description{
font-size:12px;
}
#content{
margin-top:25px;
}
.archive-entry-header{
padding:8px 5px 8px 0;
}
.entry-inner{
padding:10px;
}
.page-archive .entry-title{
font-size: 15px;
}
.categories{
bottom:0px;
right:5px;
}
.categories a{
font-size:12px;
padding:4px;
}
}
@media (max-width:450px) {
.header-image-only #blog-title #blog-title-inner{
height:90px;
}
}
@media (max-width:400px) {
.header-image-only #blog-title #blog-title-inner{
height:80px;
}
}
@media(max-width:359px){
.header-image-only #blog-title #blog-title-inner{
height:70px;
}
.page-archive .entry-title{
font-size:13px;
}
.categories a{
font-size:11px;
}
.date{
font-size:12px;
}
}
/*----------------------グローバルナビ------------------------------*/
/* はてなブログにデフォルトで付いてる余白消す */
#colorbook-gnav ul{
padding-left:0;
}
#colorbook-gnav{
background:#fff;/*グローバルナビの背景色*/
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}
#menu-btn{
color:#454545;/*スマホ画面の、「メニュー」ボタンの文字色*/
display:none;
}
#colorbook-gnav-list{
display:flex;
flex-wrap: wrap;/*文字を改行してナビを1行にするにはこれ消す*/
margin:0 auto;
max-width:1200px;
justify-content: center; /*ナビ中央寄せ*/
}
#colorbook-gnav-list li{
list-style: none;
}
#colorbook-gnav a{
color:#454545;/*グローバルナビの文字色*/
text-decoration: none;
display:block;
padding:15px 18px;
font-size:14px;/*文字の大きさ*/
font-weight:bold;
}
#colorbook-gnav a:hover{
background:#eee;/*マウスを乗せた時の色*/
}
/* --------グローバルナビ タブレット・スマホ画面--------- */
@media(max-width:960px){
#menu-btn{
display:block;
padding-left:10%;
padding-top:10px;
padding-bottom:10px;
text-align:left;
}
#colorbook-gnav-list{
display:none;
}
#colorbook-gnav a{
text-align:left;
}
}
/*----------目次----------*/
.entry-content .table-of-contents{
padding:30px;
}
.entry-content .table-of-contents::before{
content:"目次";
display:block;
text-align:center;
margin-bottom:15px;
}
/* */
/* */
/* default */
/* */
/* blog 本文文字色及び文字サイズ */
.entry-content {
color: #222222; /* 色コードを指定 */
font-size:16px;
}
/*---- 文字色及び文字サイズ ここまで-----*/
/* 記事本文の段落の余白を調整 */
.entry-content p {
margin: 20px 0px 20px 0px;/*上,右,下,左*/
}
/* 記事本文の段落の余白を調整 ここまで */
/* blog 日付のカスタマイズ */
/* 日付に時計アイコン */
.date a::before {
font-family: "blogicon";
content: "\f043";
margin-right: 2px;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* 投稿日時の文字に影 */
.date a {
text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
}
/** blog 日付のカスタマイズ ここまで **/
/** コメントの箱 カスタマイズ **/
/* アイコン追加 */
.leave-comment-title::before {
font-family: "blogicon";
content: "\f01d";
padding-right: 5px;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/* アイコンに影 */
color: #606060;
}
/* ボックス全体に影 */
.comment-box {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important; /* テキストに影 */
padding: 15px; /* 影が文字に被らないよう内側に余白を作る */
margin-top: 20px; /* 上の記事との間隔を調整 */
background: #fff; /* 背景を白にし影を綺麗に見せる */
border:1px solid #d0d0d0; /*ボタンの縁取り*/
border-radius: 5px; /* 角を丸く */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.1), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 「コメントを書く」枠を文字サイズに固定し、余白を排除 */
a.leave-comment-title {
display: inline-flex !important; /* 文字にフィット */
align-items: center; /* 文字を上下中央に */
justify-content: center; /* 文字を左右中央に */
width: auto !important; /* 右側に広がらないよう固定 */
height: auto !important; /* 高さが勝手に膨らむのを防ぐ */
padding: 2px 10px !important; /* 文字の周り余白 */
margin: 0 !important; /* 外側の余計な余白をカット */
vertical-align: middle; /* 前後の要素との垂直方向のズレを補正 */
border-radius: 3px; /* 角を少し丸く */
color: #222222 !important; /* 文字色を指定 */
background:#f7f7f7; /*ボタンの背景色 */
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.1), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
transition: all 0.3s ease;
text-decoration: none !important;
}
/* マウスホバー時に沈ませる */
a.leave-comment-title:hover {
background-color: #f5f5f5 !important;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;/*影を少し残す*/
transform: translateY(2px) !important;
}
/** コメントの箱 カスタマイズ ここまで **/
/** blog タイトル カスタマイズ **/
/*blog title 写真の挿入*/
#blog-title-inner {
height: 140px;
background-size: cover;
background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/s/sora191004/20240625/20240625094614.jpg");/*写真の指定*/
background-position: 50% 50%;
margin-bottom: -1em;
}
/*blog title フォント*/
#title{
font-size:50px;/* 文字サイズ*/
}
#title a,
#blog-title #blog-description {
color: #ffffff;/* 文字色*/
}
/** blog タイトル カスタマイズ ここまで **/
/* プロフィールボックスのカスタマイズ */
/* 1. ボックス全体の調整 */
.hatena-module-profile {
padding-top: 5px !important;
padding-bottom: 15px !important;
box-shadow:
0 1px 2px rgba(0,0,0,0.01),
0 2px 4px rgba(0,0,0,0.01),
0 4px 8px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.15),
0 16px 32px rgba(0,0,0,0.15),
0 32px 64px rgba(0,0,0,0.03);
}
/* 2. タイトルと文字の隙間を詰める */
.hatena-module-profile .hatena-module-title {
margin-bottom: 5px !important;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
}
.hatena-module-profile .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\f508 ";
font-weight: 900;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;
}
/* 3. レイアウト構造（絶対配置で位置を固定） */
.hatena-module-profile .hatena-module-body {
position: relative !important;
padding-left: 75px !important; /* 左側に画像用のスペースを空ける */
padding-top: 0 !important;
min-height: 65px; /* 画像の高さ分を確保 */
}
/* 画像を左上に固定 */
.hatena-module-profile .profile-description {
position: absolute !important;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 名前の位置と間隔の調整 */
.hatena-module-profile .user-name {
margin: 0 0 2px 0 !important; /* 下の更新日との隙間を2pxに */
padding-top: 5px !important; /* 画像の頭と揃えるための微調整 */
display: block !important;
line-height: 1.2 !important;
}
/* 更新日の位置と間隔の調整 */
.hatena-module-profile .profile-update {
margin: 0 !important;
padding: 0 !important;
display: block !important;
line-height: 1.2 !important;
font-size: 0.85em;
}
/* 4. 写真のサイズと影の設定 */
.hatena-module-profile .profile-icon {
width: 60px !important;
height: 60px !important;
object-fit: cover;
border-radius: 40px;
display: block;
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* ：輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 2px 8px rgba(0,0,0,0.2), /* 少し広がる影 */
0 4px 16px rgba(0,0,0,0.2), /* 背面へ広がる影 */
0 8px 24px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 16px 38px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 5. 名前のリンク色と影 */
.user-name a,
.user-name a span,
.hatena-id-link {
color: #454545 !important;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;
text-decoration: none;
font-weight: bold;
}
/* プロフィールボックスのカスタマイズ ここまで **/
/* 検索ボックスのカスタマイズ */
/* ボックスに影*/
.hatena-module-search-box {
padding-top: 12px !important; /* 上の余白を詰め */
padding-bottom: 26px !important; /* 下の余白を空ける */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.15), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.03); /* 超広域の影 */
}
/* ボックスにアイコン*/
.hatena-module-search-box .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\e521 ";
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* ボックスのタイトル文字に影 */
.hatena-module-search-box .hatena-module-title {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5) !important;
}
/* 文字入力時に枠線を強調 */
.search-form:focus-within,
.search-result-form:focus-within {
border-width: 2px;
border-color: #b2b2ff;
}
/* 入力ボックスの角を丸く */
.hatena-module-search-box .search-form {
background: #f7f7f7;
border-radius: 6px;
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.05), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 検索結果ボックスの角を丸く */
.search-result-form {
border-radius: 6px;
}
/* 文字入力時に検索ボックステキストを消す*/
input::placeholder {
color: #a9a9a9;
}
input:focus::placeholder {
color: rgba(0, 0, 0, 0);
}
/* 検索ボックスのカスタマイズ ここまで */
/* 最新記事のボックスのカスタマイズ */
/*ボックスの縮小とボックスに影*/
.hatena-module-recent-entries {
padding-top: 12px !important; /* 上の余白を詰め */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* ボックスの輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.15), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.03); /* 超広域の影 */
}
/*ボックスにアイコン*/
.hatena-module-recent-entries .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\f017 ";
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* タイトル文字に影を付ける */
.hatena-module-recent-entries .hatena-module-title {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5) !important;
}
/* 最新記事タイトル（通常時） */
.hatena-module-recent-entries .urllist-title-link {
color: #222222 !important;
text-decoration: none; /* 最初は下線を消しておく（お好みで） */
transition: all 0.3s ease; /* 色と下線の変化を滑らかにする */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5) !important;/*影*/
}
/* 最新記事タイトル（マウスホバー時） */
.hatena-module-recent-entries .urllist-title-link:hover {
color: #000000 !important; /* 文字色 */
text-decoration: underline !important; /* 下線を表示 */
text-decoration-color: #000000 !important; /* 下線の色指定 */
font-weight:600; /*文字の太さ（400で標準）*/
}
/* ボックス内 行間を詰める */
.urllist-item-inner {
line-height: 0.7;
font-size:13px; /*文字の大きさ*/
font-weight:500; /*文字の太さ（400で標準）*/
}
/* 最新記事もっと見るボタン */
.urllist-see-more a {
display:block;
width:50%; /*ボタン横幅*/
margin: 0 auto; /*ボタン中央に配置*/
text-align:center; /*文字を中央に*/
font-size:13px; /*文字の大きさ*/
font-weight:500; /*文字の太さ*/
/* --- 文字の太さの微調整 --- */
-webkit-text-stroke: 0.2px #202020;
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) ;
text-decoration:none; /*下線なし*/
padding:2px 10px; /*文字周り余白*/
border-radius:4px; /*ボタン角の丸み*/
color:#202020; /*ボタンの文字色 */
background:#f7f7f7; /*ボタンの背景色 */
transition:all 0.3s; /*色が変わる時間（秒）*/
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.05), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
.urllist-see-more a:hover {
background-color: #f5f5f5 ; /*マウスオーバー時のボタンの背景色 */
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
border:1px solid #777777; /*ボタンの縁取り*/
transform: translateY(2px);/*ボタンをへこませる*/
}
/** 最新記事のボックスのカスタマイズ ここまで **/
/****** 月別アーカイブのボックス ******/
/*ボックスの上部詰めとボックスに影*/
.hatena-module-archive {
padding-top: 12px !important; /* 上の余白を詰め */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* ：ボックスの輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.15), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.03); /* 超広域の影 */
}
/*ボックスにアイコン*/
.hatena-module-archive .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\f073 ";
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* タイトル文字に影を付ける */
.hatena-module-archive .hatena-module-title {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5) !important;
}
/* 日付に関連する全てのリンクの色 */
.hatena-module-archive a,
.hatena-module-calendar a {
color: #303030 !important;
font-weight: 900;
}
/* カレンダー上部の「2026 02」セレクタボックスに影を付ける */
.archive-module-calendar-selector {
display: block !important; /* 影を出すブロック化 */
background: #f7f7f7 !important; /* 背景 */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.05), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
/* 見栄えの調整 */
margin: 5px auto 10px !important; /* ボックス外側の余白 */
padding: 4px !important; /* ボックス内側の余白 */
border-radius: 4px !important; /* 角の丸み */
border: 1px solid #d0d0d0 !important; /* 境界線 */
text-align: center !important; /* 文字を中央に */
}
/* セレクタ内の文字（年・月）の微調整 */
.archive-module-calendar-selector select {
border: none !important;
background: transparent !important; /* 背景を透過 */
font-weight: 700 !important; /* 文字を太く */
color: #303030 !important;
}
/* 「2026 02」の文字に影 */
.archive-module-calendar-selector,
.archive-module-calendar-selector select,
.archive-module-calendar-selector option {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) !important;
font-weight: 400 !important;
color: #303030 !important;
}
/* カレンダー文字影 */
.js-archive-module-calendar-container table,
.js-archive-module-calendar-container table th,
.js-archive-module-calendar-container table td {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
color: #303030 !important;
font-weight: 500 !important; /* 全体を少し細め */
}
/* リンクがある日に円のデザイン */
.js-archive-module-calendar-container table td a {
display: inline-block !important;
width: 24px !important;
height: 24px !important;
line-height: 24px !important;
text-align: center !important;
border-radius: 50% !important;
text-decoration: none !important;
/* 円の色を薄く/ 文字の色を濃く*/
background-color: #a0a0a0 !important;
color: #404040 !important;
font-weight: 700 !important;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5) !important;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) !important;
}
/* 3. ホバー時の設定（文字を太く、色を薄く） */
.js-archive-module-calendar-container table td a:hover {
background-color: #606060 !important; /* 円の色を濃く */
color: #e0e0e0 !important; /* 文字の色を薄く */
font-weight: 700 !important; /* 文字を太く */
transform: scale(1.1);
transition: 0.2s;
}
/****** 月別アーカイブのボックス ここまで ******/
/****** 関連記事のボックスのカスタマイズ ******/
/*ボックスに影*/
.hatena-module-related-entries {
padding:5px;
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.15), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.03); /* 超広域の影 */
}
/*ボックスにアイコン*/
.hatena-module-related-entries .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\f044 ";
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* タイトル文字に影を付ける */
.hatena-module-related-entries .hatena-module-title {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;
}
/*折り返しで文字重なりを防ぐ*/
.related-entries-item-inner {
line-height:1.4em;
}
/** 関連記事のボックスのカスタマイズ ここまで **/
/** 読者になるのボックスのカスタマイズ **/
/*ボックスの上下の縮小とボックスに影*/
.hatena-module-html {
padding-top: 12px !important; /* 上の余白を詰め */
padding-bottom: 0px !important; /* 下の余白を詰め */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); /* 文字に影 */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.15), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.03); /* 超広域の影 */
}
/*ボックスにアイコン*/
.hatena-module-html .hatena-module-title:before {
font-family: 'Font Awesome 6 Free';
content: "\f5da ";
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/* 「なんとなく...」のボックス上の隙間の調整 */
.subscribe-buttonb {
margin-top: 2px !important; /* 上に引き寄せる */
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 読者になるボタンのカスタマイズ */
.subscribe-buttonb {
margin: 2em;
}
.subscribe-buttonb a {
display: block;
margin: 0 auto; /*ボタン中央に配置*/
width: 100%;
max-width: 180px;/* ボックス幅 */
line-height: 30px;/* ボックス高さ */
text-decoration: none;/*文字下線なし*/
text-align: center;
font-size: 13px;/* フォントサイズ */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important;
font-weight: 500; /*文字の太さ*/
/* --- 文字の太さの微調整 --- */
/* 0.1px〜0.3pxの間で調整してみてください */
-webkit-text-stroke: 0.2px #202020;
color: #202020;/* 文字の色 */
background-color: #f7f7f7; /* ボタンの色 */
border-radius: 4px; /*ボタン角の丸み*/
border:1px solid #d0d0d0; /*ボタンの縁取り*/
transition: all 0.3s;/*色が変わる時間（秒）*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.05), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
.subscribe-buttonb a:hover {
background-color: #f5f5f5; /*マウスオーバー時の背景色 */
opacity: 0.8; /*透明度*/
border: 1px solid #777777; /*マウスオーバー時の縁取り色 */
transform: translateY(2px); /*ボタンを沈ませる*/
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; /*影を少し残す*/
}
/** 読者になるのボックスのカスタマイズ ここまで **/
/** 記事タイトルのカスタマイズ **/
.entry-title {
position: relative;
/* 外側の上の余白：アイコンの飛び出しの調整 */
margin-top: 12px !important;
margin-left: 12px !important;
margin-bottom: 20px !important; /* タイトルとグローバルナビ名称の空間の調整 */
/* 背景・枠線などは変更なし */
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 2px, transparent 2px, transparent 4px),
linear-gradient(to right, #e8e8e8, #c0c0c0);
color: #545454;
font-size: 28px !important;
font-weight: bold;
padding: 15px 12px 10px 40px !important;
border-bottom: 4px solid #6a6a6a;
border-left: solid 10px #202020;
text-shadow: 3px 5px 6px rgba(0, 0, 0, 0.3);
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.2), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.2), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 左上の四角形（アイコンの土台） */
.entry-title::after {
content: "";
position: absolute; /* 親要素(.entry-title)を基準に配置 */
/* 飛び出し位置の調整 */
top: -12px; /* マイナス値で上に */
left: -16px; /* マイナス値で左 */
width: 30px; /* 四角の横幅 */
height: 30px; /* 四角の縦幅 */
/* 背景を白に(不透明)にし後ろの「左線」を隠す */
background: #f8f8f8;
border: 2px solid #202020; /* 四角の枠線 */
box-shadow: 3px 3px 10px rgba(0,0,0,0.2); /* 四角単体にかける影 */
z-index: 1; /* 1番下のレイヤー（枠線より上、アイコンより下） */
}
/* FontAwesomeアイコンの設定 */
.entry-title::before {
content: "\f044"; /* アイコンの種類(Unicode)を指定 */
font-family: "Font Awesome 6 Free"; /* フォント */
font-weight: 400; /* regular（白抜き）を指定 */
position: absolute;
/* 土台の四角(::after)と全く同じ位置に配置 */
top: -18px;
left: -20px;
width: 46px;
height: 46px;
/* アイコンを四角のど真ん中に配置*/
display: flex;
align-items: center;
justify-content: center;
font-size: 18px; /* アイコン自体の大きさ */
color: #202020; /* アイコンの色 */
z-index: 2; /* 土台の四角(::after)より上のレイヤーに表示 */
}
/** 記事タイトルのカスタマイズ ここまで **/
/** 見出し装飾のカスタマイズ **/
/*** 大見出し装飾 ***/
h3 {
position: relative;
font-size: 24px !important;
color: #494949;
text-shadow: 2px 4px 7px rgba(0, 0, 0, 0.4) !important;
/* padding: 上 右 下 左; の順 */
padding: 0.4em 0.8em 0.2em 1.5em !important;
/* 行の高さを指定、文字自体の上下幅をタイトにします */
line-height: 1.4 !important;
background: #dadada;
border-left: solid 5px #555555;
border-bottom: solid 2px #999999;
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.2), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.2), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 左上の透明な四角（位置はそのまま維持） */
h3::before {
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 20px;
height: 20px;
border: 2px solid #494949;
background: transparent;
z-index: 1;
}
/*** 中見出し装飾 ***/
h4 {
position: relative;
font-size: 21px !important;
color: #494949;
text-shadow: 2px 4px 7px rgba(0, 0, 0, 0.6) !important;
padding: 0.4em 0.4em 0.3em 1em !important; /* パディングを調整 */
background: #e8e8e8;
border-left: solid 5px #808080;
border-bottom: solid 2px #999999;
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.2), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.2), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 角に配置する四角形 */
h4::before {
content: "";
position: absolute;
top: -8px; /* 上に少しはみ出させる */
left: -8px; /* 左に少しはみ出させる */
width: 18px;
height: 18px;
background: #494949;
z-index: 1; /* 枠線より上に表示 */
}
/*** 小見出し装飾 ***/
h5 {
position: relative; /* 三角形の位置指定の基準 */
font-size: 18px !important;
color: #494949;
text-shadow: 2px 4px 7px rgba(0, 0, 0, 0.6) !important;
padding: 0.3em 0.4em 0.1em 0.8em;
background: #f8f8f8;
/* 左の線を細く（2px） */
border-left: solid 2px #c0c0c0;
border-bottom: solid 2px #999999;
/* ボックスの影 */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* ボックスの輪郭を保護 */
0 2px 4px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 8px rgba(0,0,0,0.2), /* 少し広がる影 */
0 8px 16px rgba(0,0,0,0.2), /* 背面へ広がる影 */
0 16px 32px rgba(0,0,0,0.15), /* 全体を浮かせる大きな影 */
0 32px 64px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 左上の三角形マーク */
h5::before {
content: "";
position: absolute;
top: 0; /* 上端に配置 */
left: 0; /* 左端に配置 */
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 0;
border-color: #999999 transparent transparent transparent;
}
/*** 小見出し装飾 ここまで***/
/** 見出し装飾のカスタマイズ ここまで **/
/** 写真表示のカスタマイズ **/
.hatena-fotolife {
display: block;
margin: 30px auto 25px !important; /* 写真上下の間隔 margin: [上] [左右] [下] */
border-radius: 4px; /* 角を丸く */
/* 多層レイヤードシャドウ */
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
0 1px 4px rgba(0,0,0,0.1),
0 3px 8px rgba(0,0,0,0.15),
0 5px 16px rgba(0,0,0,0.2),
0 10px 32px rgba(0,0,0,0.2),
0 15px 50px rgba(0,0,0,0.1);
}
/** 写真表示のカスタマイズ ここまで **/
/** 過去記事引用・外部リンク（ブログカード）のカスタマイズ **/
/* ブログカードに影と枠線 */
iframe.embed-card,
iframe.embed-blogcard,
.embed-wrapper {
display: block !important;
width: 100% !important;
max-width: 98% !important;
margin: 20px auto !important; /* 上下の隙間を調整 */
border: 1px solid #d0d0d0 !important; /* 枠線 */
border-radius: 8px !important; /* 角を丸く */
background: #ffffff !important;
box-shadow:
0 1px 2px rgba(0,0,0,0.01),
0 2px 8px rgba(0,0,0,0.01),
0 4px 16px rgba(0,0,0,0.03),
0 8px 32px rgba(0,0,0,0.08),
0 16px 64px rgba(0,0,0,0.08),
0 32px 100px rgba(0,0,0,0.01) !important;
transition: all 0.3s ease; /* 動きを滑らかに */
}
/* マウスホバー時 */
iframe.embed-card:hover,
iframe.embed-blogcard:hover {
transform: translateY(2px);
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
/* 引用下のURL表示を削除 */
cite.hatena-citation {
display: none !important;
}
/** ブログカードのカスタマイズ ここまで **/
/** カテゴリボタンのカスタマイズ **/
/* 通常時のボタン設定 */
.categories a {
display: inline-block; /* サイズ指定を反映 */
background: #f7f7f7; /* 背景色 */
color: #000000; /* 文字色 */
font-size: 13px; /* 大きさ */
font-weight: 500 !important; /* 太さ */
padding: 6px 12px; /* ボタン内の余白 */
margin: 0 12px 5px 0; /* ボタン同士の隙間 */
line-height: 1.4; /* 行間 */
text-decoration: none; /* 下線なし */
border: 1px solid #d0d0d0; /* ボタンの縁取り */
border-radius: 4px; /* 角の丸み */
/* 文字の影と太さの微調整 */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important;
-webkit-text-stroke: 0.1px #606060;
box-shadow:
0 1px 2px rgba(0,0,0,0.01),
0 2px 8px rgba(0,0,0,0.01),
0 4px 16px rgba(0,0,0,0.03),
0 8px 32px rgba(0,0,0,0.08),
0 16px 64px rgba(0,0,0,0.08),
0 32px 100px rgba(0,0,0,0.01);
transition: all 0.3s ease; /* 変化を滑らかにする */
}
/* 2. マウスホバー（乗せた時）の設定 */
.categories a:hover {
background-color: #f5f5f5;
transform: translateY(2px); /* へこませる */
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; /* 影を薄く */
text-decoration: none !important;
}
/** カテゴリボタンのカスタマイズ ここまで **/
/** トップに戻るの設置 **/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:50px;
margin: 0;
padding: 0;
text-align:center;
float:right; /* 右寄せ */
}
#move-page-top{
color:#a0a0a0;/* アイコンの色 */
text-decoration:none;
display:block;
cursor:pointer;
opacity: 0.5;/* アイコンの透明度 */
}
#move-page-top:hover{
color:#333333;/* カーソルが当たった時の色 */
}
/** トップに戻るの設置 ここまで **/
/** 斜体を蛍光ペンにする **/
.entry-content em {
font-style: normal;
background: linear-gradient(transparent 80%, #89aeed 80%);
}
/** 斜体を蛍光ペンにする ここまで **/
/** グローバルナビのカスタマイズ **/
#colorbook-gnav {
background: #e0e0e0;
border-top: none;
width: 100%; /* 全体の幅 */
}
/* メニューのリスト部分 */
#colorbook-gnav-list {
display: flex; /* Flexboxを有効化 */
justify-content: center; /* 項目が少ない場合も中央に寄せる */
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
/* リスト内の各項目（li） */
#colorbook-gnav-list li {
flex: 1; /* すべての項目を均等幅に */
text-align: center; /* 文字を中央寄せ */
min-width: 0; /* はみ出し防止 */
}
/* リンクボタン（a） */
#colorbook-gnav a {
display: block; /* クリック範囲 */
padding: 10px 5px; /* 上下は10px、左右は5px */
text-decoration: none;
color: #333; /* 文字色（お好みで） */
font-size: 0.85rem;
white-space: nowrap; /* 文字が枠内で改行されないようにする */
overflow: hidden; /* 万が一はみ出た場合に隠す */
text-overflow: ellipsis; /* 文字が入り切らない場合に「...」にする設定（任意） */
/* 影とアニメーションの設定 */
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
transition: all 0.3s;
}
#colorbook-gnav a:hover {
background: #a8a8a8;
color: #ffffff;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
/* スマホ表示（メニューボタンを使う場合）の調整 */
@media screen and (max-width: 768px) {
#colorbook-gnav-list {
display: none; /* 初期状態は非表示（jQueryでスライドさせるため） */
flex-direction: column; /* 縦並びにする */
}
#colorbook-gnav-list li {
width: 100%;
}
#colorbook-gnav a {
padding: 12px;
border-bottom: 1px solid #ccc;
}
}
/* グローバルナビのカスタマイズ ここまで */
/****** 色々な表示の削除 ******/
/** 埋め込み下のURL **/
.hatena-citation{
display:none;
}
/** 記事下のhatenaID **/
.fn {
display: none;
}
/** 記事下の読者になるボタン **/
.entry-footer-subscribe {
display: none;
}
/** 右上読者になるボタン **/
.blog-controlls {
display: none;
}
/** プロフィールボックスから このブログについてボタン **/
.hatena-module-profile .profile-about{
display: none;
}
/** 色々な表示の削除 ここまで **/
/** アーカイブページのカスタマイズ **/
/* タイトル周辺の設定（帯を横幅いっぱいに伸ばす） */
.page-archive .archive-entry-header,
.page-archive .archive-entry .entry-title {
display: block !important; /* 帯を文字数に関わらず右端まで伸ばす */
width: 100% !important; /* 幅をカード内いっぱいに固定 */
box-sizing: border-box !important; /* padding（内余白）を含めた幅計算にする */
margin: 0 0 15px 12px !important; /* 左に少し隙間（12px）を作り、下に余白（15px）を作る */
}
/* タイトルの文字設定 */
.page-archive .archive-entry .entry-title {
padding: 10px 10px 8px 25px !important; /* padding: 上 右 下 左; の順 */
font-size: 24px !important; /* アーカイブページ用の文字サイズ */
line-height: 1.3 !important; /* 行の高さ（上下の厚み） */
}
/* 左上の四角い土台（アイコンの背景）を小さく */
.page-archive .entry-title::after {
width: 24px !important; /* 四角の横幅 */
height: 24px !important; /* 四角の縦幅 */
top: -8px !important; /* 上の位置（マイナスで上に） */
left: -12px !important; /* 左の位置（マイナスで左に） */
background: #f8f8f8 !important; /* 土台の色 */
}
/* ペンアイコン自体の大きさと位置を調整 */
.page-archive .entry-title::before {
font-size: 14px !important; /* アイコンサイズ */
width: 32px !important; /* アイコンを囲む透明枠の幅 */
height: 32px !important; /* アイコンを囲む透明枠の高さ */
top: -11px !important; /* 位置調整 */
left: -14px !important; /* 位置調整 */
}
/* 記事カード（1つの記事の枠）の設定 */
.page-archive .archive-entry {
margin-bottom: 20px; /* 記事同士の上下間隔 */
padding: 15px; /* 記事枠内余白 */
border: 1px solid #e0e0e0; /* 記事を囲む薄いグレーの枠線 */
min-height: 120px; /* 記事カードの最低限の高さ */
background: #ffffff; /* 記事カードの背景色 */
}
/* サムネイル画像（アイキャッチ）の調整 */
.page-archive .entry-thumb {
width: 150px; /* 画像の横幅 */
height: 130px; /* 画像の高さ */
object-fit: cover; /* 画像を歪ませずに枠に合わせる */
border-radius: 6px; /* 画像の角を丸くする */
box-shadow:
0 1px 2px rgba(0,0,0,0.01),
0 2px 8px rgba(0,0,0,0.01),
0 4px 16px rgba(0,0,0,0.03),
0 8px 32px rgba(0,0,0,0.2),
0 16px 64px rgba(0,0,0,0.2),
0 32px 100px rgba(0,0,0,0.03);
}
/** アーカイブページのカスタマイズ ここまで **/
/** 編集ボタンのカスタマイズ **/
/* URLに "edit" を含むリンク（＝編集ボタン）をすべて対象にする */
a[href*="edit"] {
color: #808080 !important;
font-weight: 500 !important;
text-decoration: none !important;
}
/* マウスホバー時 */
a[href*="edit"]:hover {
color: #202020 !important; /* 色 */
font-weight: 500 !important;
text-decoration: none !important;
font-size: 1.1em !important; /* 文字を大き */
}
/** 編集ボタンのカスタマイズ ここまで **/
/** Amazon商品紹介ボックスのカスタマイズ **/
/* Amazon商品紹介の上下の隙間を詰め、枠を小さく */
.hatena-asin-detail {
padding-top: 5px !important; /* 上側の隙間 */
padding-bottom: 5px !important; /* 下側の隙間 */
}
/* Amazon商品紹介ボックスに影 */
.hatena-asin-detail {
border: 1px solid #888888; /* 枠線の色 */
border-radius: 8px; /* 角を少し丸く */
transition: box-shadow 0.3s ease; /* マウスを乗せた時の変化 */
margin-bottom: 2em; /* 下の要素との間隔 */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.03), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.08), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.08), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* 商品タイトルの色 */
.hatena-asin-detail-title a {
color: #808080 !important; /* 文字色 */
text-decoration: none; /* 下線を消す */
font-weight: bold; /* 太字にする */
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3) !important;/*影*/
transition:all 0.3s; /*色が変わる時間（秒）*/
}
/* 商品タイトルにマウスホバー時 */
.hatena-asin-detail-title a:hover {
color: #404040 !important; /* 色 */
transform: translateY(4px);/*ボタンをへこませる*/
text-shadow: 0 0 0 rgba(0,0,0,0) !important; /*影を消す*/
}
/* 商品タイトル：装飾をリセットして干渉を防ぐ */
.hatena-asin-detail-title a {
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
}
.hatena-asin-detail-info > a[href*="amazon"] {
display: inline-block;
padding: 6px 12px;
margin-top: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
color: #666 !important;
text-decoration: none !important;
font-weight: bold;
/* --- ここで影と角丸を付ける --- */
border-radius: 8px !important;
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.05), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.1), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.1), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.04), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
transition: all 0.3s ease !important;
}
/* Amazonボタンにマウスを乗せた時（ホバー時）の影を制御 */
.hatena-asin-detail-info > a[href*="amazon"]:hover {
background-color: #c0c0c0 !important;
color: #ff9900 !important;
border-color: #777777 !important;
text-shadow: none !important; /* 影を消す */
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
transform: translateY(2px) !important; /* 沈ませる動き */
}
/** Amazon商品紹介ボックスのカスタマイズ ここまで **/
/** 目次のカスタマイズ **/
/* 目次ボックス全体の枠組み */
.table-of-contents {
background: #fdfdfd !important; /* ボックスの背景色 */
padding: 25px 25px 20px 25px !important; /* 内側の余白 中央寄せの基準 */
border: 1px solid #eee !important; /* ボックスを囲む枠線 */
border-radius: 8px !important; /* 角を丸く */
margin: 1.5em auto !important; /* ボックス自体の上下の余白（他要素との距離） */
box-sizing: border-box !important; /* 余白を幅に含めて計算し、サイズ崩れを防止する */
text-align: left !important; /* リスト内の文字位置は基本左寄せに設定 */
box-shadow:
0 2px 3px rgba(0,0,0,0.08),
0 6px 12px rgba(0,0,0,0.1),
0 12px 24px -2px rgba(0,0,0,0.12),
0 20px 40px -5px rgba(0,0,0,0.08),
0 30px 60px -10px rgba(0,0,0,0.05),
0 40px 80px -15px rgba(0,0,0,0.02) !important;
}
/* 目次のタイトル CONTENTS（センター配置） */
.table-of-contents::before {
content: "CONTENTS" !important; /* 文字指定 */
display: block !important; /* 独立したブロックとし、中央寄せを可能に */
text-align: center !important; /* 文字中央寄せ */
width: 100% !important; /* ボックス幅いっぱいに広げ中央を確定 */
margin: 0 auto !important; /* 左右の余白を自動にして中央配置を確実にする */
font-size: 1.25rem !important; /* タイトルの文字サイズ */
font-weight: bold !important; /* タイトルを太字 */
color: #333 !important; /* 文字の色を濃いグレー */
letter-spacing: 0.15em !important; /* 文字同士の間隔 高級感を出す */
margin-bottom: 0px !important; /* 下の余白をゼロにしサブタイトルと密着させる */
padding-bottom: 0 !important; /* 内側のパディングをゼロ */
border-bottom: none !important; /* 下線を無効化 */
text-shadow: 2px 4px 7px rgba(0, 0, 0, 0.4) !important; /* タイトル文字に影 */
}
/* サブタイトル ジャンプできます（ラインのセンター固定） */
.toc-subtitle {
display: block !important; /* 独立したブロックとして表示 */
text-align: center !important; /* 文字を完全中央寄せに */
width: 100% !important; /* 幅を100%確保し、下線がセンターからのズレを防ぐ */
margin: 0 auto 15px auto !important; /* 中央配置し、下のリストとの間に15pxの余白 */
padding: 0 0 10px 0 !important; /* 文字から下線までの距離 */
box-sizing: border-box !important; /* 幅の計算を固定し、線のはみ出しを防止 */
font-size: 0.75rem !important; /* 文字のサイズを小さく */
color: #404040 !important; /* 文字色 */
font-weight: 400 !important; /* 文字の太さ */
-webkit-text-stroke: 0.1px #888888; /* 文字に極細の縁取り */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4) !important; /* 文字に影 */
border-bottom: 2px solid #606060 !important; /* 中央寄せされたボックス幅の下線（区切り線） */
}
/* リスト構造のリセット（テーマ干渉の防止） */
.table-of-contents ul,
.table-of-contents ol {
list-style: none !important; /* 標準の点(・)を完全に消去する */
margin: 0 !important; /* テーマ側の不要なマージンをリセット */
padding: 0 !important; /* テーマ側の不要なパディングをリセット */
text-indent: 0 !important; /* はてなブログ特有の字下げをリセットする */
}
/* 見出しの左右位置調整（マスター設定） */
/* 大見出しを含め、リスト全体を右にずらす設定 */
.table-of-contents li {
margin-left: 18px !important; /* ★全体の左からの距離 */
position: relative !important; /* アイコンを配置する際の基準点に */
line-height: 1.7 !important; /* 行の高さ */
margin-bottom: 6px !important; /* ★項目間の余白（H4-H4、H5-H5等の間隔） */
text-align: left !important; /* 見出し文字は左寄せにする */
}
/* 子階層（中・小見出し）が右にズレすぎないよう、マージンを一旦ゼロにする */
.table-of-contents li li {
margin-left: 0 !important; /* 親のマージンを二重に引き継がない設定 */
}
/* ★中見出し・小見出しの「親からの下げ幅」と「親子間の垂直余白」の調整 */
.table-of-contents li ul,
.table-of-contents li ol {
padding-left: 0.4em !important; /* ★インデント幅（左へのずらし量） */
margin-left: 0 !important;
/* ★親子間の垂直間隔を、項目間の間隔(6px)と一致させる設定 */
margin-top: 6px !important;
}
/* --- 6. アイコンと文字の間隔調整 --- */
.table-of-contents li { padding-left: 1.5em !important; } /* 大見出しのアイコンと文字の間隔 */
.table-of-contents li li { padding-left: 1.4em !important; } /* 中見出しのアイコンと文字の間隔 */
.table-of-contents li li li { padding-left: 1.4em !important; } /* 小見出しのアイコンと文字の間隔 */
/* --- 7. 自作アイコンのデザイン（全階層・上下中央配置） --- */
.table-of-contents li::before {
content: "" !important; /* 擬似的な要素としてアイコンを作成 */
position: absolute !important; /* 見出し行の左端に絶対位置で固定する */
left: 0 !important; /* 基準点(left:0)に配置 */
top: 0.85em !important; /* 1行目の高さの中央付近に配置 */
transform: translateY(-50%) !important; /* アイコンの高さ半分上にズラして完全中央よせ */
display: block !important; /* アイコンを確実に表示させる */
}
/* 大見出しアイコン：透明な四角 */
.table-of-contents li::before {
width: 10px !important;
height: 10px !important;
border: 1.5px solid #333 !important;
background: transparent !important;
}
/* 中見出しアイコン：黒い塗りつぶし四角 */
.table-of-contents li li::before {
width: 8px !important;
height: 8px !important;
background: #444 !important;
border: none !important;
}
/* 小見出しアイコン：斜めに半分塗りつぶし */
.table-of-contents li li li::before {
width: 8px !important;
height: 8px !important;
border: 1px solid #444 !important;
background: linear-gradient(135deg, #444 50%, transparent 50%) !important;
}
/* リンク文字の設定と、確実な太字(700)ホバー --- */
.table-of-contents li a {
color: #222222 !important; /* 通常時の文字の色（濃いグレー） */
text-decoration: none !important; /* 最初は下線を消しておく */
font-weight: 500 !important; /* 通常時も少し太め(500)に設定 */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4) !important; /* 文字に薄い影をつける */
transition: all 0.4s !important; /* マウスを乗せた時の変化を滑らかにする */
}
/* マウスホバー時 */
.table-of-contents li a:hover {
color: #000000 !important; /* ホバー時の文字色 */
text-decoration: underline !important; /* 下線を表示 */
text-decoration-color: #000000 !important; /* 下線の色指定 */
font-weight: 700 !important; /* ★ホバー時にさらに太字(700)にする */
}
/* 標準の点を強制的に消去する */
.table-of-contents li::marker { content: none !important; }
/** 目次全体のカスタマイズ ここまで **/
/** 記事の下のフッターセクションにある xx日前の文字に影 **/
.entry-footer-section a {
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3) !important;/*影*/
}
/** タグボックスのカスタマイズ **/
/* タグ（#～）をボックス化して影を付ける */
.entry-tag-link {
display: inline-block !important;
background-color: #ffffff !important;
color: #222222 !important;
padding: 4px 12px !important;
margin: 5px 10px 10px 0 !important;
border-radius: 4px !important;
text-decoration: none !important;
/* 通常時：文字の影とボックスの影の両方を表示 */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important;
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.03), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.08), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.08), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
transition: all 0.3s ease !important;
}
/* マウスホバー時 */
.entry-tag-link:hover {
background-color: #f5f5f5 !important;
/* ボックスの影を少し残す */
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
/* 文字の影は維持 */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important;
/* 2px下に沈ませる */
transform: translateY(2px) !important;
}
/** タグボックスのカスタマイズ ここまで **/
/** グループタグのカスタマイズ **/
/* ボックス（embed-group）に影を付ける */
.embed-group {
border: 1px solid #f7f7f7 !important; /* 枠線 */
border-radius: 12px !important; /* 角を丸く */
transition: transform 0.3s; /* ホバー時の動き */
margin: 20px 0 !important;
background:#f7f7f7; /*ボタンの背景色 */
border:1px solid #d0d0d0; /*ボタンの縁取り*/
box-shadow:
0 1px 2px rgba(0,0,0,0.01), /* 輪郭を保護 */
0 2px 8px rgba(0,0,0,0.01), /* 密着した影 */
0 4px 16px rgba(0,0,0,0.03), /* 少し広がる影 */
0 8px 32px rgba(0,0,0,0.08), /* 背面へ広がる影 */
0 16px 64px rgba(0,0,0,0.08), /* 全体を浮かせる大きな影 */
0 32px 100px rgba(0,0,0,0.01); /* 超広域の影 */
}
/* マウスを乗せた時に少し浮かせる */
.embed-group:hover {
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;/*影を少し残す*/
transform: translateY(2px);
}
/** グループタグのカスタマイズ ここまで **/
/* == スマートフォン用カスタマイズ (画面幅 480px以下)
「ヘッダー」と「アーカイブページ」の設定をここに集約 == */
@media screen and (max-width: 480px) {
/* 1. ブログヘッダー外枠の設定 */
#blog-title-inner {
height: 100px !important; /* スマホでの背景画像の高さ */
display: flex !important; /* 中の文字を中央に寄せる設定 */
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. ブログタイトル文字の調整 */
#title {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
font-size: 22px !important; /* タイトル全体のベースサイズ */
}
#title a {
display: block !important;
height: auto !important;
width: auto !important;
font-size: 28px !important; /* リンク文字のサイズ（視認性重視） */
text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important; /* 影を付けて読みやすく */
}
/* 3. ブログ説明文の調整 */
#blog-description {
margin: 5px 0 0 0 !important;
font-size: 11px !important;
text-align: center !important;
}
/* 4. アーカイブページ（記事一覧）の文字サイズ微調整 */
/* 記事一覧のタイトルが大きすぎるのを防ぐ設定 */
.page-archive .archive-entry .entry-title {
font-size: 18px !important;
line-height: 1.4 !important;
margin-top: 0.1em !important;
padding-top: 0.1em !important;
}
.page-archive .archive-entry .date,
.page-archive .archive-entry .categories {
font-size: 12px !important;
}
}
/* --- スマートフォン用カスタマイズ ここまで --- */
/* --- にほんブログ村 BMWアイコン の専用設定 --- */
/* 通常時の見た目（上下左右に影） */
.mura-icon img {
box-shadow: 0 0 8px 2px rgba(0,0,0,0.1) !important; /* 四方に均等な影 */
border-radius: 5px; /* 角を少し丸く */
transition: all 0.3s ease; /* 動きを滑らかに */
}
/* マウスホバー */
.mura-icon img:hover {
box-shadow: none !important; /* 影を消す */
transform: translateY(2px); /* 2px下に押し込む */
filter: brightness(1.0); /* 少しだけ暗くすることも可能 */
}
/* にほんブログ村 BMWアイコン の専用設定 ここまで */
/* == シェアボタン ＆ 続きを読む カスタマイズ == */
/* 土台：影を保護し、回り込みをリセット */
article.entry { position: static !important; }
.entry-content { overflow: visible !important; }
.entry-content::after { content: ""; display: block; clear: both; }
/* シェアボタンのデザイン（枠と影を強力に復元） */
.custom-share-buttons {
display: flex !important;
gap: 12px !important;
padding: 0 !important;
list-style: none !important;
text-decoration: none !important;
}
.custom-share-buttons a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
background: #ffffff !important;
border: 1px solid #d0d0d0 !important;
border-radius: 4px !important;
text-decoration: none !important; /* 青い下線を消す */
box-shadow:
0 1px 2px rgba(0,0,0,0.01), 0 2px 8px rgba(0,0,0,0.01), 0 4px 16px rgba(0,0,0,0.03),
0 8px 32px rgba(0,0,0,0.08), 0 16px 64px rgba(0,0,0,0.08), 0 32px 100px rgba(0,0,0,0.01) !important;
transition: all 0.3s ease !important;
}
.custom-share-buttons a i {
color: #666666 !important;
font-size: 20px !important;
border: none !important;
background: none !important;
}
.custom-share-buttons a:hover {
background-color: #f5f5f5 !important;
transform: translateY(2px) !important;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
/* 続きを読むボタンのデザイン（枠と影を強力に復元） */
article.entry a.entry-see-more {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 38px !important;
padding: 0 17px !important;
border: solid 1px #929292 !important;
font-size: 14px !important;
color: #222222 !important;
background: white !important;
border-radius: 4px !important;
font-weight: 500 !important;
text-decoration: none !important; /* 青い下線を消す */
text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.6) !important;
-webkit-text-stroke: 0.2px #202020;
box-shadow: 0 1px 2px rgba(0,0,0,0.01), 0 2px 8px rgba(0,0,0,0.01), 0 4px 16px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.08), 0 16px 64px rgba(0,0,0,0.08), 0 32px 100px rgba(0,0,0,0.01) !important;
transition: transform 0.2s ease, background 0.2s ease !important;
position: relative;
}
/* 点滅防止用の透明土台 */
article.entry a.entry-see-more::before {
content: ""; position: absolute; top: -10px; bottom: -10px; left: 0; right: 0;
background: transparent; z-index: -1;
}
article.entry a.entry-see-more:hover {
background: #f5f5f5 !important;
transform: translateY(4px) !important;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
}
/* 【ページ別】位置の切り替え */
/* トップページ・アーカイブ（横並びにする） */
.page-index .custom-share-buttons,
.page-archive .custom-share-buttons {
float: left !important;
margin-top: -48px !important; /* 続きを読むの高さに吸い寄せる */
margin-left: 5px !important;
clear: none !important;
}
.page-index a.entry-see-more,
.page-archive a.entry-see-more {
float: right !important;
margin: 30px 5px 10px 0 !important;
}
/* 記事詳細ページ（広告の下に配置・左寄せ） */
.page-entry .custom-share-buttons {
float: none !important;
clear: both !important;
margin-top: 60px !important; /* 広告リンクから十分に離す */
margin-bottom: 20px !important;
justify-content: flex-start !important;
}
/* フッター（コメント・タグなど）の回り込みを完全に解除 */
.entry-footer, .entry-tags-wrapper {
clear: both !important;
display: block;
}