はてなブログのデザインCSS。今のところ。
/* <system section="theme" selected="8599973812270629022"> */ @import "https://usercss.blog.st-hatena.com/-/theme/8599973812270629022.css?version=6f6ac2e2c5b886ff583d590873c39b20d98c225a"; /* </system> */ /* ---------ふい字------------ */ @font-face { font-family: 'HuiFontP109'; src: url('/fonts/public/HuiFont/HuiFontP109.eot'); src: url('/fonts/public/HuiFont/HuiFontP109.eot?#iefix') format('embedded-opentype'), url('/fonts/public/HuiFont/HuiFontP109.woff') format('woff'), url('/fonts/public/HuiFont/HuiFontP109.ttf') format('truetype'), url('/fonts/public/HuiFont/HuiFontP109.svg#HuiFontP109') format('svg'); font-weight: normal; font-style: normal; } /* ---------タイトルをふい字に------------ */ #title a { font-family: 'HuiFontP109', sans-serif; font-size: 30px; } /* ---------ブログの説明をふい字に------------ */ #blog-description { font-family: 'HuiFontP109', sans-serif; font-size: 20px; } h3 { background: linear-gradient(transparent 70%, #a7d6ff 70%); } h4 { position: relative; padding: 0.25em 0; } h4:after { content: ""; display: block; height: 4px; background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent); background: linear-gradient(to right, rgb(230, 90, 90), transparent); } h5 { padding: 0.25em 0.5em;/*上下 左右の余白*/ color: #494949;/*文字色*/ background: transparent;/*背景透明に*/ border-left: solid 5px #ffaf58;/*左線*/ } /*フォントサイズ*/ .entry-content p {font-size: 16px;} /*行の高さ*/ .entry-content {line-height:2.2em;} /*サイドバータイトル*/ .hatena-module-title { position: relative; margin-bottom: 15px;/* 下余白 */ border-bottom: 4px solid #b0c4de; } /*写真がそのまま*/ img.hatena-fotolife { pointer-events: none; } /*前後のページリンクの消去*/ .page-entry .pager { display: none; } /* カテゴリーをタグ風に */ .hatena-module { clear: both; overflow: hidden; } .hatena-module-category .hatena-module-body ul.hatena-urllist li { float: left; } /* category css */ .hatena-module-category .hatena-module-body ul.hatena-urllist li { float: left; list-style-type: none; margin: 1px 2px 1px 2px; padding: 0px 4px 0px 4px; background-color:#c9e1ff; /* 背景色 */ text-decoration: none; border-radius: 10px 10px 10px 10px } .hatena-module-category .hatena-module-body ul.hatena-urllist li a{ color: #191970; /*文字色*/ font-size:0.85em; /*文字サイズ*/ } article em{ font-weight:bold; font-style: normal; margin:0 0.1em; padding:0.1em 0.2em; background:#fcfc60 !important; background:linear-gradient(to bottom, transparent 60%, #f0e68c 60%) !important; } article i{ font-style:oblique !important; } /* To Top */ .toTop-nav { position: fixed; bottom: 10px; right: 10px; display: -webkit-flex; display: flex; padding: 0; margin: 0; z-index: 999; } .toTop-nav li { list-style-type: none; background: rgba(0, 0, 0, 0.3); border-radius: 50px; text-align: center; } .toTop-nav li:first-child { margin-right: 10px; } .toTop-nav li a { display: block; width: 50px; height: 50px; font-size: 30px; line-height: 50px; } .toTop-nav li a { color: #fff; text-decoration: none; } .toTop-nav li a:visited { color: #fff; } .toTop-nav li a:hover { color: #fff; text-decoration: underline; } .toTop-nav li a:active, .toTop-nav li a:focus { color: #fff; } .toTop-nav li a:hover { text-decoration: none; } /*はてな目次のデザイン*/ ul.table-of-contents { border: 1px solid #ccc; padding: 1.2em 1em 1em 2em; margin: 0.5em 0 2em 0; position: relative; background-color: #fff; border-radius: 3px; } ul.table-of-contents:before { content: "Index"; display: inline-block; position: absolute; top: -0.6em; left: 0.5em; background: #fff; padding: 0 0.5em; font-weight: 700; color: #ccc; } .table-of-contents li, .table-of-contents ul{ list-style-type: none;/*表示一時的に消す*/ } ul.table-of-contents li:before { content: "▶"; /*記号に変更*/ color: #b0d7fd; padding-right: 0.5em; font-size: 80%; vertical-align: text-top; } } .table-of-contents ul{ font-size: 95%;/*h3以降小さく*/ } .table-of-contents a{ color:#444; text-decoration: none; } .table-of-contents a:hover { color: #ccc ;/* リンクにマウスを重ねた時の色 */ text-decoration: underline; } /*隠れる目次のデザイン*/ .table-of-contents{ display: none; } .show-area{ display: inline-block; font-size:0.7em; padding: 10px; border-radius: 5px; cursor: pointer; margin-bottom: 0; color: #4f96f6; }