魔法使いのチョコレートケーキ

ただただ忘れないように書き残すための備忘録

デザインCSS

はてなブログのデザイン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;
}