はてなブログデザインCSS

はてなブログデザインCSS

/* <system section="theme" selected="afternoon"> */
@import "/css/theme/afternoon/afternoon.css";
/* </system> */

/* <system section="background" selected="illust-01"> */
body{ background-image: url('/images/theme/backgrounds/2014/illust-01.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
/* </system> */


/* PCのみトップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
  /*カード*/
.page-index .archive-entry{
  background :#ffffff;   /*カードの背景色*/
  width: 46%;   /*横幅（２カラム）*/
  padding-top:210px;   /* 上間隔（アイキャッチ画像分空ける） */
  padding-left:7px;    /* 左間隔 */
  padding-right:7px;   /* 右間隔 */
  padding-bottom:10px; /* 下間隔 */
  position: relative;
  box-shadow: 1px 1px 4px #cccccc;
  transition: .3s;
  border-radius: 4px;
}

/* 記事の概要 */
.page-index .entry-description{
  display : none;
}

/* アイキャッチのサムネイル */
.page-index .entry-thumb {
  width: 100%;   /* アイキャッチサムネイル横幅 */
  height: 200px;   /* アイキャッチサムネイル縦幅 */
  background-position: center center;
}
.entry-thumb-link:hover {
  opacity:0.7;
}
/* アイキャッチ */
.page-index .entry-thumb-link{
  display: block;
  width: 100%;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px 4px 0 0;
}
/* 記事タイトル */
.page-index .entry-title{
  padding : 5px 0px 0px 5px;  /* タイトル上下に間隔 */
}

/* 日付 */
.page-index .date{
  padding-top:2px;  /*上間隔 */
  padding-left:7px; /* 左間隔 */
}
/* はてなスター */
.star-container {
  display : none;

}
}
/* PCのみトップページカード型完 */

/*ソースコードのフォント変更*/
.entry-content .code{
     font-family: "Source Code Pro", sans-serif; /* ここでフォントを指定 */
    font-size:90%;
}

/*画像に影つけ*/

img {
    border : 1px solid #DADADA ;
    border-bottom : 1px solid #757575 ;
    box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
.github-link {
  font-size: 14px;
  margin-bottom: 10px;
}
/*フォント*/

body {
    font-family:'メイリオ', Meiryo, 'M PLUS Rounded 1c';
}

/* 目次のタイトル */
ul.table-of-contents:before {
 content: "目次";
 font-size: 100%;
 font-weight: bold;
 color: black;
 font-family: "メイリオ", Meiryo, san-serif,'M PLUS Rounded 1c',;
}

/* 目次の背景と大見出し */
ul.table-of-contents {
 background: #d6eaff;
 max-width: 720px;
 margin: 0px 0px 40px 0px;
 padding: 18px 18px;
 list-style-type: decimal;
 list-style-position: inside;
 font-size: 15px;
 line-height: 2.1;
 font-weight: bold;
}

/*大見出し*/
.entry-content h3{
color: white; 
background: #99CCFF;
border-radius: 5px; 
padding: 10px 10px;
}

/*中見出し*/
.entry-content h4{
color: #3f3f3f;
padding: 5px 5px; 
border-left: 7px solid #99CCFF;
border-radius: 5px;
border-bottom: 2px solid #99CCFF;

}

/*カテゴリー*/

.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: 0 4px 4px;
    padding: 5px;
    background-color: #D7EEFF;
    border-color: #000000;
    border-color: #ff0000;
    text-decoration: none;
    border-radius: 5px 5px 5px 5px
 
}

.hatena-module-category .hatena-module-body ul.hatena-urllist li a{
    color: #555555;
}

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.トマト::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20181110/20181110155521.jpg);}
.こん::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20181110/20181110155452.png);}
.toma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20181110/20181110153020.png);}
.kon::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20181110/20181110153017.png);}