@charset "utf-8"; /* Theme: reclamation1 Author: 泉杏 Description: 幅768px以上で下のサイドバーが2段になる、レスポンシブデザインです。 Responsive: yes */ /* Theme URI: https://blog.hatena.ne.jp/-/theme/17391345971652444401.css */ /* And Customized by MaSirakawa [ﾟДﾟ] 白河ま Description: 下サイドバーが2段になる分岐点を幅41em以上に変更 さらに幅68em以上でサイドバーを右に かつて作ったサイトをはてなブログにて復活させるにあたり、 レスポンシブ対応＆ﾁｮｯﾄﾀﾞｹ CUD* Ver.4 を取り入れて諸々作業中。 * CUD: ｶﾗｰﾕﾆﾊﾞｰｻﾙﾃﾞｻﾞｲﾝ | 参照url: https://jfly.uni-koeln.de/colorset/ Update: 2020-11-29T20:56+09:00 */ /* */ body{ background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/h/hoofbeat/20200412/20200412222950.png'); background-repeat: repeat-y; background-color:transparent; background-attachment: fixed; background-position: right top;} /* */ /* 主要部分の背景色と文字など */ html, body { background-color: #c8c8cb; color: #000; line-height: 1.6; letter-spacing: 0.1em; font-family: sans-serif; margin: 0; padding: 0; } #container { background-color: #ffc; color: #000; border-bottom: solid 1px #808080; box-shadow: 0 2px 3px rgba(132,145,158,.50); /* 右 下 ﾎﾞｶｼ #84919eの半透明 */ } /* ------------------------------------ */ /* リンク */ a { text-decoration: underline;} a:link { color: #005aff;} a:visited { color: #804000;} /* 茶色 */ a:hover, a:focus { color: #000; background-color: #c8c8cb;} a:active { color: #fff; background-color: #333;} .entry-content a img { border: none;} a.keyword { text-decoration: none; border-bottom: 1px dotted #84919e; color: inherit; } a.leave-comment-title { text-decoration: none; border: solid 1px #c0c0c0; border-radius: 4px; padding: 0.2em 0.5em; } /* ------------------------------------ */ /* 強調などの inline要素 ＊table 関係ﾊ table ﾃﾞﾏﾄﾒﾃｲﾙ ﾅｵ→､→ﾄ変換ｻﾚﾙ (Proﾀﾞﾄ変換ﾅｼ? ﾜｶﾗﾝ) ｼｶｼﾊ許ｻﾚﾙ。HTML5追加要素ﾉﾓOK */ /* em 茶太字 | strong 黒太字+背景ｵﾚﾝｼﾞ */ em { color: #804000; font-weight: bold; } strong { background-color: #f6aa00; color: #000; font-weight: bold; margin-right: 0.1em; padding-left: 0.1em; } /* 文字の形に注意を促す */ em.look, u.look, .look u, .look em { background-color: #77d9a8; background: linear-gradient(to top, #77d9a8 0% 25%, transparent 25% 100%); color: #000; font-weight: normal; text-decoration: none; margin-right: 0.1em; padding-left: 0.1em; } /* マグ名 */ .magname { color: #990099; font-weight: bold;} /* 【】 */ .point { color: #060; font-weight: bold; background: linear-gradient(45deg, #d8f255 0% 25%, transparent 50% 100%); } span.b { font-weight: bold;} .entry-content small { font-size: 0.9em;} /* 別窓指定→変更ｽﾙ?...使用箇所ﾌｴﾀ */ /* 検索結果のﾊｲﾗｲﾄ　部分変更 */ .page-archive span.highlight { background-color: #ffca80; color: #000; } /* 育成外の許可(permit)・禁止(forbid) ... in about頁 */ .permit, .permit strong, .forbid { background-color: #fff; } .permit strong { color: #005aff; } .forbid strong { letter-spacing: 0.2em; margin-right: 0; padding-left: 0.2em; } /* ==================================================== */ /* * ▼ not customized ▼ */ /* 順序付きリスト・順不同リスト */ ol { list-style: decimal; } ul { list-style: square; } /* 定義リスト */ dt,dt a { font-weight: bold; } /* 引用 */ q { color: #000080; } blockquote { border: dashed 1px #000080; border-radius: 4px; margin: 1em 8px; padding: 0 16px; } /* 画像 */ .entry-thumb { margin: 8px 16px; border-radius: 4px; } .urllist-image { border-radius: 4px; } img.hatena-id-icon { border-radius: 2px; } img.profile-icon { border-radius: 4px; } img.circle-image { border-radius: 4px; } .footer-address img { border-radius: 2px; } /* 広告 */ .google-afc-user-container { text-align: center; margin: 0 auto; } /* ヘッダ(グローバルヘッダ) */ /* グローバルヘッダの中はiframeですが、#globalheader-container に 背景色や文字色を指定することでiframeの中にも色が反映されます。 */ #globalheader-container { width: 100%; color: #ffffff; background-color: #000000; } /* ブログタイトル・説明文 */ #blog-title { margin: 0 0 16px; } h1#title { text-align: center; margin: 16px auto 0; } h1#title a { color: #000000; text-decoration: none; } #blog-description { font-size: 110%; font-weight: normal; text-align: center; margin: 16px auto; } /* 「編集する」リンク */ header.entry-header, .archive-entry-header { position : relative; } .entry-header-menu { position : absolute; top: 4px; right: 4px; font-weight: bold; border: dashed 1px #0000ff; border-radius: 2px; padding: 2px 4px; } /* コメント */ .comment-box ul { list-style: none; border-top: solid 1px #808080; margin: 16px 0; padding: 0; } .comment-box li { border-bottom: dashed 1px #808080; margin: 0; padding: 0 16px; } li.read-more-comments { padding-top: 16px; padding-bottom: 16px; } /* サイドバー */ .hatena-module { border-top: solid 1px #c0c0c0; border-right: solid 1px #808080; border-bottom: solid 1px #808080; border-left: solid 1px #c0c0c0; margin-bottom: 16px; } .hatena-module-title { font-size: 110%; font-weight: bold; border-bottom: solid 1px #c0c0c0; padding: 8px; } .hatena-module-title a { text-decoration: none; } .hatena-module-body { padding: 8px 16px; } /* urllist module */ /* リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます */ .hatena-urllist { list-style: none; margin: 0; padding: 0; } .hatena-urllist li { border-bottom: dashed 1px #808080; padding: 4px 0; } .hatena-urllist li a { text-decoration: none; } /* * not customized ▲ ｺｺﾏﾃﾞ */ /* ==================================================== */ /* margin と padding の部分変更 1）左右「16px」→0 表がﾒｲﾝｺﾝﾃﾝﾂ+幅ｸｳ表ﾓｱﾙ→ﾖﾊｸﾍﾗｼﾀｲ＆ｿﾚﾄ揃ｴﾀｲ､ﾉﾃﾞ｡ 2）記事ﾀｲﾄﾙ下端と(ﾓﾊﾞｲﾙ用?)広告の間を空ける 0→8px */ /* タイトル下(ヘッダ)の文章 */ #top-editarea { margin: 0 0 16px; } /* パンくず(カテゴリーページで表示されます) */ #top-box { margin: 16px 0; } /* 記事部分など */ .entry, .archive-entries { margin-bottom: 16px; } .archive-heading { margin: 0; } header.entry-header, .archive-entry-header { border-top: solid 1px #c0c0c0; border-right: solid 1px #808080; border-bottom: solid 1px #808080; border-left: solid 1px #c0c0c0; margin: 8px 0 0; padding: 8px; position : relative; } header.entry-header { margin-bottom: 8px; } /* ↑2 */ header.entry-header a, .archive-entry-header a { text-decoration: none; } .entry-title { margin: 4px 0 0; } .categories { text-align: right; margin: 4px 16px; } .entry-content { padding: 8px 0;} .entry-footer, .archive-entry-body { padding: 8px 16px; } .entry-thumb { margin: 8px 16px; } /* フッタの文章 */ #bottom-editarea { margin: 16px 0 0; } @media (max-width: 25em) { .categories { text-align: right; margin: 4px 0; } .entry-footer, .archive-entry-body { padding: 8px 0; } .entry-thumb { margin-left: 0; } } /* margin padding のみ変更 * ｺｺﾏﾃﾞ 他のｶｽﾀﾏｲｽﾞ分にも泉様のｺｰﾃﾞｨﾝｸﾞが混在 */ /* ==================================================== */ /* 白-透明ｸﾞﾗﾃﾞ背景画像 */ header.entry-header, .archive-entry-header, .hatena-module-title, #footer-inner { background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hoofbeat/20200328/20200328025719_original.png); background-repeat: repeat-y; background-position: left top; } .hatena-module-title, #footer-inner { background-position: right top; } /* ------------------------------------ */ /* 幅とｶﾗﾑ */ /* 画面幅41em以上で下ｻｲﾄﾞﾊﾞｰが1→2ｶﾗﾑに */ @media (min-width: 41em) { #box2 .hatena-module { margin: 0 8px 16px; float: left; width: 47%; } #box2 .hatena-module:nth-child(3) { clear: both; } #box2 .hatena-module:nth-child(5) { clear: both; } #box2 .hatena-module:nth-child(7) { clear: both; } #box2 .hatena-module:nth-child(9) { clear: both; } #box2 .hatena-module:nth-child(11) { clear: both; } #box2 .hatena-module:nth-child(13) { clear: both; } #box2 .hatena-module:nth-child(15) { clear: both; } #box2-inner:after { content: ""; display: block; clear: both; } } /* 幅上限50em ＊paddingｦ含ﾏﾅｲ要素ﾉ幅 */ #container { max-width: 50em; margin: 32px auto 0; padding: 0.6em; } @media (max-width: 25em) { #container { padding: 0.6em 2px;} } /* 1.2em ← padding 0.6 対 0 ﾉ差分 */ #footer { max-width: 51.2em; margin: 0 auto; padding: 0.6em 0; } /* 画面幅68em以上で幅上限50→68em＆ｻｲﾄﾞﾊﾞｰを右に */ /* ・h4左ﾈｶﾞﾃｨﾌﾞｶﾞ #wrapper左margin ﾆ影響ｦｳｹﾙ ・box2-inner の 8px は header.entry-header ﾄ上端ｦ揃ｴﾙﾀﾒ(広告無ｼﾉ場合) ※box2 の子要素ﾄｯﾌﾟが広告ﾆﾅﾙｺﾄｶﾞｱﾙﾉﾃﾞ box2-inner で。 */ @media (min-width: 68em) { #container { max-width: 68em;} #footer { max-width: 69.2em;} #wrapper { float: left; width: 50em; margin-left: 1em; margin-right: 0.8em;} #box2 { float: left; width: 13.5em;} #box2-inner { margin-top: 8px;} #box2 .hatena-module { margin: 0 0 16px; float: none; width: 100%;} #content:after { content: ""; display: block; clear: both; } } @media (min-width: 69.5em) { #box2 { width: 15em;} } /* ------------------------------------ */ /* フッター ｸﾞﾗﾃﾞ背景は他のと一括指定↑ */ #footer { background-color: transparent; color: #000; } #footer-inner { max-width: 40em; /* .guest-footer-content p を1行で納めている */ /* はてなidの長さによって+αか逆に2行で自然になるよう短くｽﾙﾄﾖｻｹﾞ */ margin: 0 auto 0 0; padding: 1px 0.6em; } #footer .guest-footer { margin: 0 auto;} .guest-footer-content { border-bottom: solid 1px #84919e; } #footer .guest-footer .guest-footer-content h3, #footer .guest-footer .guest-footer-content p, #footer .guest-footer .guest-footer-btn-container, .footer-address, p.services { font-size: 0.9em; letter-spacing: normal; line-height: 1.4; margin: 0.5em 0; } #footer .guest-footer .guest-footer-btn-container .guest-footer-btn { font-size: 0.8em; margin: 0; } @media (max-width: 25em) { #footer-inner { padding: 1px 2px;} .footer-address, p.services { background-color: rgba(255,255,255,.75);} /* #fff & 透過25% */ } /* ------------------------------------ */ /* Pager */ .pager{ text-align: center; margin: 16px auto; padding-top: 16px; display: table; max-width: 100%; } .pager .pager-prev { display: table-cell; text-align: left; padding-right: 0.5em;} .pager .pager-next { display: table-cell; text-align: right; padding-left: 0.5em;} @media (max-width: 25em) { .pager:after { content: ""; display: block; clear: both;} .pager .pager-prev { display: block; float: left; margin-bottom: 0.5em; padding: 0;} .pager .pager-next { display: block; float: right;} } /* ==================================================== */ /* ----------------------------- [ﾟДﾟ] ----------------------------- この後は基本的に .entry-content：記事本体 .customized-header, .entry-header-html, .customized-footer, .entry-footer-html：(ｶｽﾀﾏｲｽﾞ>記事>)記事上下のｶｽﾀﾏｲｽﾞ #top-editarea, #bottom-editarea：(ｶｽﾀﾏｲｽﾞ>)ﾍｯﾀﾞ･ﾌｯﾀ ……これらの内部用 ＊ｿﾉ頁(entry)特有ﾉ設定ｱﾘ↓→ index index2 intro renew what p-du-d2,p-du-m2(ﾄﾞｩﾙｶﾞｰ中編) food1-6 about ＊table 関係ﾊｷﾎﾝﾃｷﾆ table ﾃﾞﾏﾄﾒﾃｲﾙ | ＊一部ﾉ dl ﾓﾏﾄﾒﾃｲﾙ */ /* 隠す */ .hide { display: none; } /* ------------------------------------ */ /* h2-h6 見出し */ .entry-content h2 { background-color: #060; background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hoofbeat/20200325/20200325054420.gif); background-repeat: no-repeat; color: #fff; font-size: 1.2em; margin: 1.6em 0 0.8em; padding: 0.1em 0.2em 0 30px; } #UpdateInfo-h2, /* index頁 更新情報 → inline要素 */ .MagToC h2 { /* 記事内目次 */ background-color: transparent; background-image: none; color: #060; font-size: 1.1em; /* 0.9x1.1=0.99em? */ margin: 0; padding: 0; } h3 { color: #060; font-size: 1.2em; border-style: solid; border-width: 1px; border-color: #060 #ffc #ffc #060; margin: 1em 0 0.5em; padding: 0.1em 0 0 0.3em; } #MagColumn h3 { /* index頁 */ border-style: none; border-bottom: 1px #060 dashed; margin: 0.1em 0; padding: 0; } #index2-main h3 { /* index2頁｢行｣ */ margin-top: 1.4em; } h4 { color: #060; font-size: 1.2em; border-left: solid 1.2em #060; margin: 1em 0 0.5em -0.6em; /* 左ﾈｶﾞﾃｨﾌﾞ */ padding: 0.1em 0 0 0.4em; } @media (min-width: 68em) { h4 { margin-left: -1.6em;} } #index2-main h4 { /* index2頁マグ名 */ color: #990099; /* 色ｦ .magname ﾄｱﾜｾﾙ */ letter-spacing: normal; margin-top: 0.5em; } div.sup-ex h4 { /* intro頁｢例｣ */ margin: 0 0 0.2em 0; } /* ------------------------------------ */ /* 段落・リスト .para …段落ﾄｼﾃ特ﾆ扱ｳﾄｲｳｶﾅﾝﾄｲｳｶ ＊.para ｾｯﾃｲﾁｭｳｲ ∵div.para ﾆ h2-6 他ｶﾞ入ﾙｺﾄﾓｱﾙ. .branch …分岐 | .proc …手順(tableﾃﾞ.proﾂｺﾃﾙ) dl entryではないabout頁に､編集,class付与等不可の｢素 dl ｣がある → body.page-about でﾅﾝﾄｶｽﾙｼｶ? div.contents-guide dl → ◆ index頁column ◆ dl.dt-float, div.dt-float0 dl, dl.dl-inline → ■ dt-float, dl-inline ■ */ .entry-content p, .entry-content ul, .entry-content ol, .entry-content li, .entry-content dl, .entry-content dt, .entry-content dd { margin: 0; padding: 0; } .entry-content ul { margin-left: 1.6em;} .entry-content ol { margin-left: 2em;} dt small, dt small a { font-weight: normal; } .para p, p.para, .para dl, body.page-about dl { margin: 0.8em 1em 0.5em;} .para ul { margin: 0.8em 1em 0.5em 2.6em;} .para ol { margin: 0.8em 1em 0.5em 3em;} #index2-main ul, ul.branch, ol.branch, ul.proc, ol.proc { margin: 0.5em 0 0.5em 2.6em;} dl.branch { margin: 0.5em 0;} .para li ul, .para li ol { margin: 0.4em 0 0.4em 2em;} #index2-main li ul, .para dd, body.page-about dd, dl.branch dd { margin: 0 0 0 2em;} /* 25em以下 */ @media (max-width: 25em) { p, ul, ol, dl { letter-spacing: normal;} .entry-content ul, .entry-content ol { margin: 0; list-style-position: inside;} .para p, p.para, .para dl, body.page-about dl, .para ul, .para ol { margin: 0.8em 0 0.5em;} #index2-main ul { margin: 0.8em 0 0 0;} ul.branch, ol.branch, ul.proc, ol.proc, dl.branch { margin: 0.5em 0;} .entry-content li ul, .entry-content li ol, .para li ul, .para li ol, #index2-main li ul, .para dd, body.page-about dd, dl.branch dd { margin: 0 0 0 1em;} } .digression { font-size: 0.8em;} /* 余談 in about頁 */ /* horizon 水平線ﾀﾞｯﾀﾓﾉ */ #MagColumn hr, /* index頁 */ .para hr { border: solid 3px #c0c0c0; background-color: transparent; height: 10px; width: 10px; margin: 0.5em auto; } /* ----- ↓なんかの塊ﾀﾁ↓ ------------------------------- */ /* ------------------------------------ */ /* 記事編集最上部
*EC: entry-content */ /* 導入部・告知 div.intro / p.info */ div.intro { background-color: #fff; border: solid 1px #808080; border-top: none; border-left: solid 10px #996; margin: 1em 0; padding: 1px 0.5em; } .intro p { margin: 0.2em 0;} .intro p.info { font-size: 0.9em; letter-spacing: normal; line-height: 1.5; margin: 0.5em 0 0.2em; } .intro .info:before { content: "i"; display: inline-block; width: 1.4em; height: 1.4em; background-color: #84919e; border-radius: 0.7em; color: #fff; font-style: italic; font-weight: bold; text-align: center; vertical-align: middle; margin-right: 0.2em; } @media (min-width: 16em) { .intro .info { position: relative; padding-left: 1.6em;} .intro .info:before { position: absolute; left: 0; margin-right: 0;} } /* 記事内目次

記事内目次

& ul *ToC: table of contents: 目次 */ div.MagToC { font-size: 0.9em; letter-spacing: normal; line-height: 1.5; margin: 1em 0; } @media (max-width: 16em) { span.index2-h3toc { display: none;} } @media (max-width: 25em) { .MagToC ul { margin: 0;} } @media (min-width: 25em) { div.MagToC { margin-left: 2.5em;} } /* ------------------------------------ */ /* 記事内目次などに跳ぶ */ p.jump { font-size: 0.9em; letter-spacing: normal; line-height: 1.4; text-align: right; margin: 0.3em 0; } #index2-main .jump { margin-top: -1em; /* 直上ﾉ h3 ﾆ少ｼﾒﾘｺﾏｾﾙ */ } /* ------------------------------------ */ /* 補足(supplement) p.sup, div.sup, div.sup-ex (,foodPage-sup) 上付き文字の sup要素と紛らわしいがﾄﾞｰｼﾖ＼(^o^)／
index2頁 .MabEC-header内
→ food頁 ﾌﾛｰﾄtable関連 */ p.sup, .sup { font-size: 0.9em; letter-spacing: normal; line-height: 1.5; border: 1px #333 dotted; margin: 0.5em 0; padding: 0.4em 1em; } /* 例(example) intro頁 *//* h4ｱﾙﾖ */ .sup-ex { border: 1px #333 dotted; margin: 1em 0; padding: 0 1em 0.4em 1em; } @media (max-width: 25em) { p.sup, .sup { padding: 0.4em;} .sup-ex { padding: 0 0.4em 0.4em 0.4em;} } /* ------------------------------------ */ /* 記事編集最下部 *EC: entry-content */ div.MagEC-footer { clear: both; margin: 0.8em 0 0; padding-top: 1px; } /* localnavi ﾅｼﾉ頁ﾃﾞﾊ本文ﾄ ul ｦ1.6emﾎﾄﾞｱｹﾀｲ∴padding1px */ div.localnavi p { background-color: #fff; color: #000; text-align: center; border-top: solid 1px #808080; border-bottom: solid 1px #808080; } .MagEC-footer ul { list-style-type: none; background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/h/hoofbeat/20200326/20200326182356.gif); background-repeat: repeat-y; background-color: #060; color: #fff; margin: 0.8em 0 0; padding: 1px 3px 1px 84px; } .MagEC-footer li { font-size: 0.9em; letter-spacing: normal; line-height: 1.4; text-align: right; margin: 0; padding: 1px 2px 0 2px; } .MagEC-footer li.long { text-align: left; } .ECEnd { background-color: #060; color: #fff; } .release-revise, .CbelowAD { background-color: #ffc; color: #000; } @media (max-width: 20em) { .MagEC-footer ul { text-align: right; padding: 15px 2px 2px;} .MagEC-footer li { display: inline; padding: 1px 0.4em 0;} } /* ----------------------------- [ﾟДﾟ] ----------------------------- 記事上・記事下 ＜記事上下のｶｽﾀﾏｲｽﾞ＜ｶｽﾀﾏｲｽﾞ＜ﾃﾞｻﾞｲﾝ .customized-header > .entry-header-html ... 記事ﾀｲﾄﾙ下 .customized-footer > .entry-footer-html ... ｺﾒﾝﾄ欄の上 */ /* 上

'

下

.

…目的は id 付与 ……これ失敗してるっけ？忘れた； */ .entry-header-html p, .entry-footer-html p { color: transparent; font-size: 0; line-height: 0; height: 0; margin: 0; padding: 0; } /* ----------------------------- [ﾟДﾟ] ----------------------------- ヘッダ・フッタ ＜ｶｽﾀﾏｲｽﾞ＜ﾃﾞｻﾞｲﾝ ﾍｯﾀﾞ... #top-editarea ... ｢header#blog-titleブログﾀｲﾄﾙ部分｣の下 ﾌｯﾀ... #bottom-editarea ... #container最下部, footer#footerの上 */ /*