📝追加装飾の備忘録：本館

この展望台の「cssを追加」現在の内容メモ書き　〔個人的メモ帳〕

・更新：2025年 5月29日
☆★☆……★☆★……☆★☆……★☆★

背景画像：テクスチャ／濃赤に蔦花模様の壁紙
メインカラー：#900007　濃赤

　共通レイアウト：フォントと基本配置
body, .tabs-inner .widget li a, h2, h2.date-header, h3.post-title, .comments h4 {font-family:'Droid Sans', 'メイリオ', Meiryo, 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', sans-serif; }
div.post-body {letter-spacing:0.2px; line-break:strict; }
div.post-footer-line-1, div.feed-links, div.Attribution {font-size:small; }
span.post-timestamp abbr {text-decoration:none; }
span.post-comment-link {padding:0px 0px 0px 160px; }
div.comments h4 {font-size:medium; padding:0px 3em; }
　リンクの下線装飾
div.post-body a:any-link, span.post-labels a:any-link, div.blog-pager a:any-link, div.Text a:any-link, div.TextList a:any-link, div.sidebar div.PageList a:any-link, div.list-label-widget-content a:any-link, ul.posts a:any-link {border-bottom:dotted 2px; padding-bottom:0px; }
div.sidebar div.TextList a:any-link, div.sidebar div.PageList a:any-link, div.sidebar div.list-label-widget-content a:any-link {padding:0px 2px; }

　展望台用の基本配置と装飾
h1.title a:hover {border-bottom:dotted 4px; padding-bottom:0px; }
h1.title::after {content:"🌠"; }
div.post-outer {color:#554433; padding:12px 18px 8px 22px; border-radius:2px; }
　月別アーカイブ下層の位置変更：左に
ul.posts li {width:12em; position:relative; right:1em; }
　背景画像の重複解除と管理用ガジェットタイトルの非表示
div.body-fauxcolumns div.cap-top, div.HTML h2, div.Text h2 {display:none; }

　壁紙上の文字や記号の色替え＆文字影
p.description, div.blog-pager, div.feed-links, div.sidebar, div.sidebar span.zippy, *.kabeue, div#HTML1, div#HTML2 a:any-link {color:#cccccc; text-shadow:0px 0px 5px #555555; }
▲壁上クラス指定→　class="kabeue"
　『迷宮案内』配置＆文字色
div#HTML1 {color:#eeeeee; position:absolute; top:-22px; margin-left:300px; }
　常設ボタンの動き追加装飾
div#HTML2 a:hover {color:#ffffff; text-decoration:underline dotted 6px; text-underline-position:under; padding:2px 0px; }
div#HTML2 a:hover::before {content:attr(title); font-size:16px; padding-right:16px; }
div#HTML2 a:active {padding:6px 0px; }
　△位置の移動はガジェット内で指定▼
　　△ page-Top {position:fixed; bottom:22px; right:14px; font-size:50px; }
　　▼ page-End {position:fixed; top:26px; right:14px; font-size:50px; }
　　≪ blog-Home {position:fixed; bottom:50%; right:14px; font-size:25px; padding:6px 0px; }

　前置きボックス装飾
div#Text1 {margin:-18px 0px; border:dotted 4px #ffffff; }
div#Text1 p.maeoki {color:#fcffe0; padding:6px 22px; margin:0px 10px; border:3px #ffffff; border-style:none dotted; }
div#Text1 span.annai {color:#eeeeee; position:absolute; bottom:2px; right:80px; }

　h2 日付装飾
h2.date-header {background-color:#9d9d9d; padding:6px 16px 0px; margin-right:20%; border-radius:60% 0px/100% 0px; text-shadow:1px 1px 5px #555555; box-shadow:0px 0px 5px #555555; }
　h3 記事タイトル装飾＆インデント
h3.post-title {color:#a90018; border-bottom:dotted 5px #900007; padding-left:20px; text-indent:-14px; }
　記事上のリンク色換え
div.post-outer a:link {color:#a90018; }
div.post-outer a:visited {color:#6c0015; }
h3.post-title a:hover {background-color:#ffda5c; border-radius:8px; }
　記事フッター h4装飾
h4#comment-post-message {font-weight:bolder; text-align:right; color:#8a724d; margin:0px 1.5em; border-right:solid 4px; border-bottom:solid 1px; }

　記事内＆ページ内のテキスト装飾
div.post-body h2, div.post-body h3, div.post-body h4 {color:#554433; font-weight:normal; }
　△ガジェットのタイトルに使われているh2がクラス指定などがされていないため、記事本文の中でも使われてしまうので、文字色をページのテキストに戻す
　　h3とh4には文字色指定は無いみたいだけど、念のため。
p.migi {text-align:right; padding-right:2.5em; }
▲右寄せクラス指定→　class="migi"

div.post-body h2 {font-size:large; padding:5px 2px; margin:1.5em; background-color:#ffda5c; border-radius:8px; }
div.post-body h3 {font-size:120%; text-indent:3em; }
div.post-body h4 {font-size:110%; text-indent:0.6em; margin:6em 1em 0em; border-bottom:solid 2px; }
div.post-body h3+h4 {margin-top:0.6em; }

strike {text-decoration:line-through wavy #f57c00; }
s {text-decoration:line-through double; }
　△　 strike 　　 strike（→ s）

　サイドバーガジェット装飾
div.sidebar h2 {padding:2px 6px 0px; border-left:solid 4px; border-bottom:solid 1px; margin-left:-8px; }
div#TextList1 ul {list-style:"＞ " inside; font-size:90%; }
　テキストリストの行間広く
div.TextList li {line-height:1.4em; }
　フッターに置くリンクの配置
div#Text2 {font-size:20px; text-align:right; padding:1px 50px 8px; }

　背景画像のスクロール指定
body {background:repeat scroll #900007; }

★☆★……☆★☆……★☆★……☆★☆