WordPressスクールで管理しているワードプレス・サイトの https://パソコン教室横浜.net/ から他のサイトへリンクを設置しています。バナー画像へのリンク設定です。（Image Widgetワードプレス・プラグイン使用）
本日の社員研修の課題として、バナー画像をHTML/CSS置き換えることに挑戦しました。その結果を掲載します。
CSS
/* 20171208 */
div.site-banner {
height:70px;
width:221px;
margin-left:-10px;
}
div.site-banner:hover {
transform:scale(1.05);
}
div.site-banner-inner {
height:60px;
width:211px;
}
.site-banner h1 {
font-size:12pt;
font-weight:bold;
text-shadow: 1px 1px black;
margin:2px;
}
.site-banner a {
text-align: center;
color:white;
text-decoration: none;
}
.site-banner p {
margin:0;
font-weight: bold;
}
div.site-banner.blue {
border: outset mediumblue 5px;
background-color:blue;
}
div.site-banner.red {
border: outset #fc8888 5px;
background-color:#fc4644;
}
div.site-banner.red2 {
border: outset #fc4644 5px;
background-color:#f02422;
}
div.site-banner.plum {
border: outset #ee82ee 5px;
background-color:#dda0dd;
}
div.site-banner.blue2 {
border: outset #b0e0e6 5px;
background-color:#afeeee;
}
.site-banner.blue2 h1 {
font-size:16pt;
}
HTML
<div class=”site-banner blue”>
<a href=”https://wp-school.yokohama/” target=”_blank”>
<div class=”site-banner-inner”>
<h1>横浜WordPressスクール</h1>
<p>生徒さん作成サイト紹介中</p></div>
</a>
</div>