企業系サイト「ビズイン(NivoSlider版)」制作

実践WEBサイト制作

ポイント

  • ビルボード画像の表示にNivoSlliderを使う
  • Nivosliderのjs、画像、CSS、htmlのファイル構造を保ったままカズタマイズする

（ファイル構造を保つために、NivoSliderのディレクトリの中に、BIZINのファイルをマージする形にしました。）


修正、カスタマイズしたファイル

  • index.html
  • css/style1.css(もともとBIZINのCSSだが、NivoSliderのCSSと名称が被るのでStyle1.CSSに変更）
  • demo/style.css（NivoSliderのCSS）



前回制作版からそのまま踏襲した部分

  • yuga.jsを使い、ナビゲーションのロールオーバー
  • smoothscroll.jsを使い、ページ上部へ戻る機能をゆっくり動作させる
  • tableを使わずに横並び(ulまたはdlで)




アップしたサイトはこちら
http://latte.moto-chika.com/bizin_nivo-slider/demo/index.html


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style1.css" media="print, screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/yuga.js"></script>
<script src="js/smoothScroll.js"></script>
    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />



<title>ビズインは企業活性化の総合サポート企業です</title>
</head>
<body>
<div id="header">
<h1>ビズインは企業活性化の総合サポート企業です</h1>

<div id="top_nav">
<ul>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">資料請求</a></li>
</ul>
</div><!-- ▲top_nav end-->
</div><!-- ▲header end -->

<div id="nav_wrap">
<div id="global_nav">
<ul class="allbtn">
   <li><img src="img/btn_gnav00_on.gif" alt="HOME"></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav01.gif" alt="お客様別ナビ" class="btn"></a></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav02.gif" alt="サービス内容"></a></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav03.gif" alt="提案実績"></a></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav04.gif" alt="セミナー案内"></a></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav06.gif" alt="採用情報"></a></li>
    <li><a href="javascript:void(0);"><img src="img/btn_gnav07.gif" alt="会社概要"></a></li>
</ul>
</div><!-- ▲global_nav end -->
</div><!-- ▲nav_wrap -->


<div id="wrapper1">
<div id="billboard">
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/ph01t.jpg" data-thumb="images/ph01t.jpg" alt="" />
<a href="#"><img src="images/ph02t.jpg" data-thumb="images/ph02t.jpg" alt="" title="ビズインは企業活性化の総合サポート企業です
" /></a>
<img src="images/ph03t.jpg" data-thumb="images/ph03t.jpg" alt="" data-transition="slideInLeft" />
<img src="images/ph04.jpg" data-thumb="images/ph04.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>ビズインは</strong>企業活性化の総合サポート企業です
</div>
</div>
</div>
</div><!-- billboard end -->

<div id="content">

<h2><img src="img/head_h201.gif" alt="トピックス"></h2>
<div id="topics">
<dl>

<dt>2013.2.21</dt>    
<dd>記事掲載情報</dd>
<dd><a href="#">エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</a></dd>

<dt>2013.2.10</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">10/9開催　総務道場「総務基礎講座」</a></dd>

<dt>2013.2.3</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">10/2開催　無料セミナー「はじめてのオフィスレイアウト変更」</a></dd>

<dt>2013.1.27</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">9/25開催　無料セミナー「年間で考える社内コミュニケーション施策」</a></dd>

<dt>2013.1.23</dt>
<dd> 新刊を発売開始しました<dd>
<dd> <a href="#">『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</a></dd>

 </dl>
</div><!-- ▲topics end-->


<h2><img src="img/head_h202.gif" alt="ジョブリポート"></h2>
<div class="report">
<p class="pic"><img src="img/img_job002.jpg" alt=""></p>
<h3>saboに流れる時間</h3>
<p class="report_text">オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？
オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ビズインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。</p>
<p class="report_date">2012年11月20日｜<a href="#">ファシリティマネジメント</a>｜<a href="#">実績一覧検索</a></p>
</div><!-- ▲report end-->

<div class="report">
<p class="pic"><img src="img/img_job001.jpg" alt="健康診断オペレーション"></p>
<h3>健康診断はアウトソースする時代です</h3>
<p class="report_text">健康診断の業務運営が煩雑さを増していませんか？ ビズインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p>
<p class="report_date">2012年11月20日｜<a href="#">健康診断オペレーション</a>｜<a href="#">実績一覧検索</a></p>
</div><!-- ▲report end-->

<div class="report">
<p class="pic"><img src="img/img_job003.jpg" alt="見直される企業イベント"></p>
<h3>見直される企業イベント</h3>
<p>不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p>
<p class="report_date">2013年3月17日｜<a href="#">コミュニケーションプロデュース</a>｜<a href="#">実績一覧検索</a></p>
</div><!-- ▲report end-->
</div><!-- ▲content end-->


<div id="sidebar">
<div id="mailmag">
<ul class="allbtn">
<li class="01"><a href="javascript:void(0);"><img src="img/banner_magazinewide.gif" alt="メールマガジン申込みボタン"></a></li>
<li class="02"><a href="javascript:void(0);"><img src="img/banner_archive.gif" alt="実績一覧検索ボタン：ビズインの実績を紹介します"></a></li>
<li class="03"><a href="javascript:void(0);"><img src="img/banner_rondan002.gif" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを"></a></li>
<li class="04"><a href="javascript:void(0);"><img src="img/banner_rondan001.gif" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策"></a></li>
</ul>
</div><!-- ▲mailmag end-->

<div id="column">
<h4>企業におけるメンタルヘルス対策コラム</h4>
<ul>
   <li><a href="#">代表取締役 白戸の「熱いぜ!!」ブログ</a></li>
   <li><a href="#">副社長 小泉の「総務＆農業」ブログ</a></li>
</ul>
</div><!--▲column end-->

<div class="books">
<dl class="shacho"><dt>ビズイン社長<br>白戸充能の本</dt>
<dd><a href="javascript:void(0)"><img src="img/2008080801.gif" alt="社会人のオキテ"></a></dd>
</dl>
<dl class="ema">
<dt>エマメイ<br>＆ビズインの本</dt>
<dd><a href="javascript:void(0)"><img src="img/2008080802.gif" alt="伝わる化"></a></dd>
</dl>
</div><!-- ▲books end-->

<p class="back"><a href="#header"><img src="img/btn_pagetop01.gif" alt="▲ページの先頭へもどる"></a></p>
</div>
<!-- ▲sidebar end-->
</div><!-- ▲wrapper1 end-->

<div id="footer">
<div id="foot_nav">
<ul>
    <li><a href="#">サイトマップ</a></li>
    <li><a href="#">プライバシーポリシー</a></li>
    <li><a href="#">ニュースリリース</a></li>
</ul>
</div>
<address>Copyright &#169; BIZin ALL RIGHTS RESERVED.</address>
</div><!-- ▲footer end -->


    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

</body>
</html>

style1.css
.billboardの高さを変更

@charset "utf-8";

*{
   margin:0;
	 padding:0;
}

body{
	font-size:14px;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif
	;
}

img{
	border-style:none;
}

ul{
	list-style-type:none;
}

em{
	visibility:hidden;
}

#header{
	width:960px;
	height:50px;
	margin:0 auto;
	overflow:hidden;
	background-image:url(../img/id_zeroin01.gif);
	background-repeat:no-repeat;
	background-position:top left;
}


h1{
	font-size:1.2em;
	position:relative;
	left:110px;
	top:10px;
	width:400px;

}

#top_nav{
     position:absolute;
	 top:10px;
	 left:880px;	
}

#top_nav ul{
	font-size:0.8em;

}

#top_nav li{
	float:left;
	background-image:url(../img/bg_topic01.gif);
  background-repeat:no-repeat;
	background-position:2px 2px;
	padding-left:18px;
	}


#nav_wrap{
	background-image:url(../img/gnav_bg.gif);
	background-repeat:repeat-x;
}

#global_nav{
	width:960px;
	margin:0 auto;
	height:32px;
}

#gloval_nav ul{
list-style-type:none;
}

#global_nav ul li{
	float:left;

}

#gloval_nav ul li a{
	text-decoration:none;
	display:block;
	overflow:hidden;
}

#billboard{
	padding-top:10px;
	width:960px;
	height:370px;
	margin:0 0 10px 0;
}

#wrapper1{
	width:960px;
	margin:0 auto;
}

#content{
	float:left;
	width:675px;
}

#sidebar{
	float:right;
	width:260px;
}


.books{
	font-size:0.8em;
	margin-left:20px;
	padding-top:25px;
}

.books .shacho {
	float:left;
	margin:0 18px 0 10px;
}

.books .shacho dl dt{
 width:140px;
}




#topics{
	margin:0 0 15px 0;
}

#topics dl{
	line-height:1.3em;
	margin-bottom:10px;
}

#topics dt{
	font-weight:bold;
	color:#006;
	padding:0 0 10px 20px;
	background-image:url(../img/bg_topic01.gif);
	background-repeat:no-repeat;
	background-position:0 2px;
	float:left;
}

#topics dd{
		margin:0 0 0 110px;
		padding:0 0 2px 8px;
		
}


.report{
	width:675px;
	height:auto;
	margin:15px 0 15px 0;
	padding:0 0 15px 0;
	background-image:url(../img/dot_bannerside02.gif);
	background-position:center bottom;
	background-repeat:repeat-x;

}


.report .pic{
	float:left;
	display:block;
	width:130px;
	
}

h3{
	margin:0 0 10px 140px;
	padding:0 0 0 1em;
	border-left:7px solid #FF0;
	border-bottom:1px solid #333;
	
}



.report .report_text{
	margin:0 0 0 140px;
}

.report .report_date{
	margin:10px 0 0 160px;
	font-size:0.875em;
}


#footer{
	clear:both;
	width:960px;
	border-top:6px solid #36C;
	height:50px;
	margin:0 auto;
}

#foot_nav {
	width:500px;
}

#foot_nav li{
	font-size:0.75em;	
	float:left;
	background-image:url(../img/bg_topic01.gif);
    background-repeat:no-repeat;
	background-position:2px 2px;
	padding-left:20px;	
	margin:10px 0 0 10px;
}

address{
	float:right;
	margin:5px 10px 10px 0;
	font-size:0.75em;
	font-style:normal;
	color:#333;
}


.back{
	clear:both;
	margin:15px 0 0 25px;
}

h4{
	margin:0 0 10px 20px;
	padding:15px 0 0 0;
}

#mailmag{
	float:right;
}

#mailmag li a:{
	background-image:url(img/banner_magazinewide.gif);
}

#mailmag li a:hover{
	background-image:url(img/banner_magazinewide_on.gif);
}

#column{
	clear:both;
	font-size:0.875em;
	height:80px;
	margin-left:15px;

}

#column li{
	float:left;
	background-image:url(../img/bg_topic01.gif);
    background-repeat:no-repeat;
	background-position:2px 2px;
	margin-left:10px;
	padding-left:18px;
}

demo/style.css

  • .slider-wrapperのwidthを80%から100%に変更、marginを100% autoから0 autoに変更
  • bodyのfont-familyとbackground-colorを変更
/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif
	;
	vertical-align:baseline;
}
body {
	line-height:1;
	color:black;
	background:white;
}
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	text-align:left;
	font-weight:normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
body {
	font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	color:#333;
	background:#fff;
}

a, a:visited {
	color:blue;
	text-decoration:none;
}
a:hover, a:active {
	color:#000;
	text-decoration:none;
}

#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}

.slider-wrapper { 
	width: 100%; 
	margin: 0 auto;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}