ワードプレス社員研修 バナー画像のHTML/CSS化

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>

 

About the author: 横浜ワードプレス教室 鎌田裕二

・アレグロマーケティング  「ホームページ・ビルダーの元開発責任者が語るWEB制作について」 平成26年2月19日 ・読売新聞 商店街ルネサンス レアールつくの商店街 「集客仕掛け 次々挑戦」 平成24年1月31日 ・かながわ商店街新聞 (商連かながわ発行)平成23年11月号 21世紀のまち 元気な店 「まちの人たちをデジタルとリアルに繋げて、プロデュース」 ・神奈川新聞 「園児の絵がクリスマスムードに商店街彩る 「ツイッター」で感想募集も」 2010年12月1日 ・タウンニュース(鶴見区版) 平成22年11月25日 「地域活性化に園児の絵 『レアールつくの』がギャラリーに」 ・日本経済新聞(神奈川版) 平成22年8月11日 「商店街・自治体もつぶやきなう」 ・デジタルニュース 2010年4月30日 「あなたの街のスクール訪問! 鶴見つくの店編」 ・日本工業新聞 平成12年7月7日「光る研究室2000 インタビュー 自分が欲しいモノを作る 日本IBM大和事業所 ソフトウエア開発研究所」 ・DOS/V magazine 2001.1.15 「荻窪圭が訊く Webデザインのトレンドは大和から?ホームページビルダーが普及した理由」