このブログで使用しているhtmlとcssを書いておくね。
書籍を売るだけなので楽天リンクとAmazonリンクしか入れていない省スペース版です。
html部分
※<script>～</script>の部分は、期間限定のマイクロコピー表示を制御してるよ
<div class="container_shop">
<div class="title"><span style="color: #008080;"><strong>商品名</strong></span></div>
<div class="Image" style="text-align: center;"><a href="Amazonのアフィリエイトリンク"><img src="Amazon画像リンク" width="108" alt="商品名" /></a></div>
<div class="Link1" style="text-align: center;">
<div class="text1">
<script>
var today = new Date();
var day = today.getDate();
if( day == 5 || day == 10 || day == 15 || day == 20 || day == 25 || day == 30 ){
document.write('<span style="font-size: 70%; color: #d32f2f;">★5と0のつく日は楽天P4倍</br></span>');}
</script>
</div>
<div class="rakuten">
<div class="rakuten_btn"><span style="color: #ffffff;"><a href="楽天のアイフィリエイトリンク" style="color: #ffffff; display: block;">楽天市場で見る</a></span></div>
</div>
</div>
<div class="Link2" style="text-align: center;">
<div class="text2">
<script>
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
var startYear1 = 2023;
var startMonth1 = 10;
var startDay1 = 14;
var endYear1 = 2023;
var endMonth1 = 10;
var endDay1 = 15;
var startday = new Date(startYear1, startMonth1-1, startDay1);
var endday = new Date(endYear1, endMonth1-1, endDay1);
if( today >= startday && today <= endday ){
document.write('<span style="font-size: 70%; color: #d32f2f;">★プライム感謝祭 開催中★</span>');
}
</script>
</div>
<div class="amazon">
<div class="amazon_btn"><span style="color: #ffffff;"><a href="Amazonのアフィリエイトリンク" style="color: #ffffff;">Amazonで見る</a></span></div>
</div>
</div>
</div>
css部分
はてなブログのデザインcss記入欄もしくはヘッダ部分に書きます（css記入欄がどこにあるかは、調べると出てくると思う！）
<!--要素の配置を指定するcss-->
<style>
.container_shop { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0.3fr 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
justify-content: space-around;
align-items: center;
grid-template-areas:
"Image title"
"Image Link1"
"Image Link2";
padding:5px;
border-top: 1px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-bottom: 5px solid #cccccc;
border-radius: 5px;
}
.title { grid-area: title; }
.Image { grid-area: Image; }
.Link1 { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.7fr 1.3fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"text1"
"rakuten";
grid-area: Link1;
}
.text1 { grid-area: text1; }
.rakuten { grid-area: rakuten; }
.Link2 { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 0.7fr 1.3fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"text2"
"amazon";
grid-area: Link2;
}
.text2 { grid-area: text2; }
.amazon { grid-area: amazon; }
</style>
<!--楽天用リンクボタンのデザイン-->
<style>
.rakuten_btn{
width:150px;
height:35px;
line-height:35px;
position: relative;
}
.rakuten_btn {
display:block;
width:95%;
height:95%;
text-decoration: none;
background:#b22222;
text-align:center;
color:#FFFFFF;
font-size:13px;
font-weight:bold;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow:5px 5px 0px 0px #DEDEDE ;
}
.rakuten_btn :hover{
background:#C2EEFF;
}
</style>
<!--Amazon用リンクボタンのデザイン-->
<style>
.amazon_btn{
width:150px;
height:35px;
line-height:35px;
position: relative;
}
.amazon_btn{
display:block;
width:95%;
height:95%;
text-decoration: none;
background:#E8902E;
text-align:center;
color:#FFFFFF;
font-size:13px;
font-weight:bold;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow:5px 5px 0px 0px #DEDEDE ;
}
.amazon_btn:hover{
background:#C2EEFF;
}
</style>
個人的に勉強に使った本
※今はAIにいろいろ聞けるから、本を買わなくてもいいかもだけど！
↑のリンクははてなブログ標準搭載のAmazonリンクで、アソシエイトと連携できます！これを使ってる人も多いよ。
cssはジェネレーターを使うのが便利
cssの要素の配置は、便利なジェネレーターがあるので、それを使うと早いよ。
