凍結
0 iPhone
テンプレートをお借りしたのですが写真の紫?のような色がついている部分を全て赤に変更したいのですが、どこの♯を変更すればよろしいでしょうか?

<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Pacifico|Varela+Round ');

@font-face
{
font-family: IPAex明朝;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff2')
format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。

http://ipafont.ipa.go.jp/ipa_font_license_v1.html

-------------------------------------------------*/

body {
background: #fff;
color: #555;
font-size: 12px;
font-family: 'Varela Round', 'メイリオ', sans-serif;
line-height: 200%;
letter-spacing: 2px;
margin:0;
padding:0;
text-align: center;
}

a, a:hover {
color: #ff7b5a;
text-decoration: none;
}


h1 {
color: #555;
font-size: 16px;
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
line-height: 100%;
letter-spacing: 0;
margin: 70px auto 20px;
padding: 0;
font-weight: 200;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
letter-spacing: 5px;
line-height: 200%;
}

h2 {
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
font-size: 14px;
position: relative;
color: #555;
display: inline-block;
margin: 23px 0;
}

h2:before {
content: "";
position: absolute;
background: #e6e6fa;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

input[type] {
font-size: 12px;
color: #555;
background: #eee;
padding: 2px 3px;
margin: 20px 3px 0;
border: none;
width: 60px;
line-height: 180%;
letter-spacing: 2px;
height: auto;
-webkit-appearance: none;
box-shadow: none;
text-shadow: none;
text-align: center;
}

input[type=submit] {
width: 60px;
color: #fff;
background: #bbbcde;
border: solid 1px #fff;
border-radius: 3px;
cursor: pointer;
}

.wrp {
max-width:600px;
margin:10px auto;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.top {
position: relative;
padding: 10px 20px;
margin: 30px auto 30px;
background: #e6e6fa;
width: 250px;
border: solid 1px #fff;
box-shadow: 0 0 0 3px #e6e6fa;
text-align: left;
}

.top:before, .top:after, .top p:before, .top p:after{
width:22px;
height:22px;
background:#fff;
border-radius:50%;
position:absolute;
content:"";
}

.top:before{
top:-14px;
left:-13px;
position:absolute;
content:"";
}

.top:after{
top:-14px;
right:-13px;
position:absolute;
content:"";
}

.top p:before{
bottom:-13px;
left:-14px;
position:absolute;
content:"";
}

.top p:after{
bottom:-13px;
right:-14px;
position:absolute;
content:"";
}

.list {
margin: 20px 20px;
width:250px;
}

.list a {
padding: 3px;
margin: 3px;
display: block;
border-bottom: solid 1px #eee;
color: #555;
}

.text {
max-width:600px;
margin: 70px auto 10px;
padding: 20px 25px;
font-size: 13px;
line-height: 250%;
text-align: left;
}

.ft {
max-width: 600px;
text-align: center;
margin: 10px auto 20px;
border-top: 3px double #e6e6fa;
padding-top: 10px;
}

</style>
03/09 15:17
返信
コメント投稿 検索
2 iPhone
えっめちゃくちゃ分かりやすくて写真まで色々ありがとうございます!!!!
あなたに解答してもらえて感謝しかありません!、!
03/14 22:24
返信
1 しち SOG03
>>0
>>▼カラーコード(「#」+「英数字」で色を表すコード)
有彩色は
🔹#ff7b5a (オレンジ色)
🔹#bbbcde (濃い紫)
🔹#e6e6fa (薄い紫)
の3種類ですね。

ついでに、3ケタのカラーコードは全部無彩色で
『#fff(白)』『#eee(薄いグレー)』『#555(濃いグレー)』
です。

ちなみにカラーコードをGoogleで検索すると、一番上にそのコードが表す色を表示してくれるので、ご参考までに。(→添付画像)

一応、>>0の各有彩色に目印を付けたCSSを置いときます。

━━━━━━━━━━

<style type="text/css">

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Pacifico|Varela+Round ');

@font-face
{
font-family: IPAex明朝;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff2')
format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。

http://ipafont.ipa.go.jp/ipa_font_license_v1.html

-------------------------------------------------*/

body {
background: #fff;
color: #555;
font-size: 12px;
font-family: 'Varela Round', 'メイリオ', sans-serif;
line-height: 200%;
letter-spacing: 2px;
margin:0;
padding:0;
text-align: center;
}

a, a:hover {
color: #ff7b5a/* オレンジ色 */;
text-decoration: none;
}


h1 {
color: #555;
font-size: 16px;
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
line-height: 100%;
letter-spacing: 0;
margin: 70px auto 20px;
padding: 0;
font-weight: 200;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
letter-spacing: 5px;
line-height: 200%;
}

h2 {
font-family: 'IPAex明朝', 'Pacifico', 'メイリオ', sans-serif;
font-size: 14px;
position: relative;
color: #555;
display: inline-block;
margin: 23px 0;
}

h2:before {
content: "";
position: absolute;
background: #e6e6fa/* 薄い紫 */;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: -1;
}

input[type] {
font-size: 12px;
color: #555;
background: #eee;
padding: 2px 3px;
margin: 20px 3px 0;
border: none;
width: 60px;
line-height: 180%;
letter-spacing: 2px;
height: auto;
-webkit-appearance: none;
box-shadow: none;
text-shadow: none;
text-align: center;
}

input[type=submit] {
width: 60px;
color: #fff;
background: #bbbcde/* 濃い紫 */;
border: solid 1px #fff;
border-radius: 3px;
cursor: pointer;
}

.wrp {
max-width:600px;
margin:10px auto;
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}

.top {
position: relative;
padding: 10px 20px;
margin: 30px auto 30px;
background: #e6e6fa/* 薄い紫 */;
width: 250px;
border: solid 1px #fff;
box-shadow: 0 0 0 3px #e6e6fa/* 薄い紫 */;
text-align: left;
}

.top:before, .top:after, .top p:before, .top p:after{
width:22px;
height:22px;
background:#fff;
border-radius:50%;
position:absolute;
content:"";
}

.top:before{
top:-14px;
left:-13px;
position:absolute;
content:"";
}

.top:after{
top:-14px;
right:-13px;
position:absolute;
content:"";
}

.top p:before{
bottom:-13px;
left:-14px;
position:absolute;
content:"";
}

.top p:after{
bottom:-13px;
right:-14px;
position:absolute;
content:"";
}

.list {
margin: 20px 20px;
width:250px;
}

.list a {
padding: 3px;
margin: 3px;
display: block;
border-bottom: solid 1px #eee;
color: #555;
}

.text {
max-width:600px;
margin: 70px auto 10px;
padding: 20px 25px;
font-size: 13px;
line-height: 250%;
text-align: left;
}

.ft {
max-width: 600px;
text-align: center;
margin: 10px auto 20px;
border-top: 3px double #e6e6fa/* 薄い紫 */;
padding-top: 10px;
}

</style>
03/14 22:10
返信