ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ ブログ記事にWebリボンデザインを設定する方法
投稿日: 2017/12/14 投稿者:webコラム
.ribbon1 {
display: inline-block;
position: relative;
height: 50px;/*リボンの高さ*/
line-height: 50px;/*リボンの高さ*/
vertical-align: middle;
text-align: center;
padding: 0 30px;/*横の大きさ*/
font-size: 18px;/*文字の大きさ*/
background: #f57a78;/*塗りつぶし色*/
color: #FFF;/*文字色*/
box-sizing: border-box;
}
.ribbon1:before, .ribbon1:after{
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}
.ribbon1:before{
top: 0;
left: 0;
border-width: 25px 0px 25px 15px;
border-color: transparent transparent transparent #fff;
border-style: solid;
}
.ribbon1:after{
top: 0;
right: 0;
border-width: 25px 15px 25px 0px;
border-color: transparent #fff transparent transparent;
border-style: solid;
}
次に、「記事を書く」から「編集見たまま」画面で、ブログ記事のタイトルを入力します。
.ribbon7-2 {
display: inline-block;
position: relative;
padding: 15px 20px;
font-size: 18px;/*フォントサイズ*/
color: #FFF;/*フォントカラー*/
background: #a6d3c8;/*背景色*/
}
.ribbon7-2:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}
.ribbon7-2:after {
position: absolute;
content: '';
top: 100%;
right: 0;
border: none;
border-bottom: solid 15px transparent;
border-left: solid 20px rgb(149, 158, 155);/*折り返し部分*/
}
「ブログを書く」のHTML編集では、以下のコードを入力します。
<div class="ribbon_box2">
<span class="ribbon12">★</span>
<div>
<p>はてなブログへようこそ!</p>
</div>
</div>
.ribbon_box2 {
display: block;
position: relative;
margin: 15px auto;
padding: 10px 0;
width: 300px;
background: #f1f1f1;
box-sizing: border-box;
}
.ribbon12 {
display: inline-block;
position: absolute;
top: 0;
right: 10px;
margin: 0;
padding: 10px 0;
z-index: 2;
width: 40px;
text-align: center;
font-size: 17px;
color: white;
background: ##ffc0cb;
}
.ribbon12:after{
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 20px solid #ffc0cb;
border-right: 20px solid #ffc0cb;
border-bottom: 10px solid transparent;
}