本当はもっといいやり方あるのかもしれませんが･･･。
bootstrapを使っているとデザイン的にちょっとだけ変えたいというところが結構あったりします。
日本語のフォントを使うとズレたりするのが原因なんですが、bootstrapのCSS自体に手を加えるとバージョンアップのたびに修正が必要になったりして面倒です。
なので本体には手を加えずに動作を上書きしてしまう方法です。
たとえばこんな感じでCSSを読み込むわけですが
<head>
<meta charset="utf-8">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head><head>
<meta charset="utf-8">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.custom.css" rel="stylesheet">
</head>.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 30px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}関連記事
