ワードプレススクール 社員研修 バナー画像の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: 横浜ワードプレス教室 鎌田裕二

経歴

  • 2019年 ワードプレス作成代行(カルチャースクール)、
    ワードプレスをプラットフォームとするシステム開発(継続中)
  • 2015年 ホームページビルダー20教材開発に参画
  • 2015年 ワードプレス教室として講座開設
  • 2013年 パソコン教室キュリオステーション本部にて
  • ホームページビルダー講座開催
  • 2009年 ホームページビルダー教室開設(横浜市鶴見区)
  • 2009年 パソコン教室 キュリオステーション横浜鶴見つくの店 開業
  • 2008年 個別指導学習塾 京進スクール・ワン 中央林間教室 室長補佐
  • 2006年 日本アイ・ビー・エム 勤務(約20年間) 海外赴任(米国)、
    ホームページビルダー開発責任者など歴任
  • アレグロマーケティング  「ホームページ・ビルダーの元開発責任者が語る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デザインのトレンドは大和から?ホームページビルダーが普及した理由」
  • IBMデジカメの達人 フォトレタッチ マニュアル 1999.11.1(共著)