Skip to content

Instantly share code, notes, and snippets.

@milk19873
Created Oct 7, 2017
Embed
What would you like to do?
CSS例
/* 見出し用 */
h2 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #724535;/*左線(実線 太さ 色)*/
}
.entry-content h2{
position: static;
border-bottom: solid 0px;
}
h3 {
padding: 0.5em 0;/*上下の余白*/
}
.entry-content h3{
border-top: solid 3px #b25a3d;/*上線*/
border-bottom: solid 3px #b25a3d;/*下線*/
position: static;
display: block;
padding: 10px;
}
.entry-content h3::before{
content: none;
}
.entry-content h3::after{
content: none;
}
h4 {
border-bottom: double 5px #b25a3d;
display: block;
}
.entry-content h4{
position: static;
padding: 10px;
border-top: 0px;
}
h5{
border-bottom: double 5px #b25a3d;
display: block;
}
.entry-content h4{
position: static;
padding: 10px;
border-top: 0px;
}
/*下線の色*/
.ul {
background: linear-gradient(transparent 0%, #ffff66 0%);
}
.ul2 {
background: linear-gradient(transparent 80%, #ffc1c1 0%);
}
/*--------------------------------------
ヨメレバ・カエレバ・トマレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box, .tomarebalink-box{
box-sizing: border-box;
border: solid 1px #5d5d5d;
border-radius:2px;
font-size:small;
padding:10px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.booklink-image, .kaerebalink-image, .tomarebalink-image{
margin:0 15px 0 0;
width: 160px;
text-align: center;
-webkit-flex: 0.6;
flex: 0.6;
}
.cstmreba img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info{
-webkit-flex: 2;
flex: 2;
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name, .tomarebalink-name{
line-height:1.5em;
}
.booklink-name a, .kaerebalink-name a, .tomarebalink-name a{
text-decoration:none;
font-weight:800;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
background-color:#DDD;
border-radius:2px;
padding:2px;
font-size:8px;
text-align:right;
/* font-family:verdana; */
line-height:120%;
margin-bottom:5px
}
.booklink-powered-date a, .kaerebalink-powered-date a, .tomarebalink-powered-date a{
text-decoration:none;
font-weight:400;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address{
font-size: 12px;
}
.booklink-link2, .kaerebalink-link1, .tomarebalink-link1{
flex-wrap: wrap;
display: -webkit-flex;
display: flex;
}
.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
text-decoration:none;
font-weight:800;
font-size:12px;
}
.booklink-link2 a:hover, .kaerebalink-link1 a:hover, .tomarebalink-link1 a:hover{
color:#fff;
}
.booklink-link2 a:active, .kaerebalink-link1 a:active, .tomarebalink-link1 a:active{
position:relative;
top:1px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkkakakucom, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkjtb, .shoplinkjalan {
width: 48%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkjtb a, .shoplinkjalan a {
width: 100%;
}
/* amazon */
.shoplinkamazon a {
color: #FF9901 ; /* 文字の色 */
border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkamazon a:hover {
background-color: #ff9901; /* カーソルを重ねた時の背景色 */
}
/* 楽天 */
.shoplinkrakuten a {
color: #c20004 ; /* 文字の色 */
border: solid 1px #c20004 ; /* ボーダー色 */
}
.shoplinkrakuten a:hover {
background-color: #c20004; /* カーソルを重ねた時の背景色 */
}
/* kindle */
.shoplinkkindle a {
color: #007dcd; /* 文字の色 */
border: solid 1px #007dcd ; /* ボーダー色 */
}
.shoplinkkindle a:hover {
background-color: #007dcd; /* カーソルを重ねた時の背景色 */
}
/* 価格 */
.shoplinkkakakucom a {
color: #314995; /* 文字の色 */
border: solid 1px #314995 ; /* ボーダー色 */
}
.shoplinkkakakucom a:hover {
background-color: #314995; /* カーソルを重ねた時の背景色 */
}
/* kobo */
.shoplinkrakukobo a {
color: #990000; /* 文字の色 */
border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkrakukobo a:hover {
background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* yahoo */
.shoplinkyahoo a {
color: #7b0099; /* 文字の色 */
border: solid 1px #7b0099 ; /* ボーダー色 */
}
.shoplinkyahoo a:hover {
background-color: #7b0099; /* カーソルを重ねた時の背景色 */
}
.shoplinkyahoo img {
display: none;
}
.shoplinkyahoo a {
font-size: 10px;
}
/* 7net */
.shoplinkseven a {
color: #82c36f ; /* 文字の色 */
border: solid 1px #82c36f ; /* ボーダー色 */
}
.shoplinkseven a:hover {
background-color: #82c36f; /* カーソルを重ねた時の背景色 */
}
/* jtb */
.shoplinkjtb a {
color: #990000 ; /* 文字の色 */
border: solid 1px #990000 ; /* ボーダー色 */
}
.shoplinkjtb a:hover {
background-color: #990000; /* カーソルを重ねた時の背景色 */
}
/* jalan */
.shoplinkjalan a {
color: #FF9901 ; /* 文字の色 */
border: solid 1px #FF9901 ; /* ボーダー色 */
}
.shoplinkjalan a:hover {
background-color: #FF9901; /* カーソルを重ねた時の背景色 */
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover{
font-weight:800;
}
.booklink-footer{display: none;}
/* 吹き出しの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(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment