初心者にもわかるCodeIgniter 其の三【controllersとviewsで変数の受け渡しとサイト作成】
この記事は最終更新日から1年以上が経過しています。
ディレクトリ構造の確認とサイトURL
今回の章ではサイトを作成していきます。
その際に必要なのは、cssやimageとjs等のファイルですね。
それらを収めるディレクトリをassetsとし、最上位の階層に作成します。
そのディレクトリ内に利用ファイルのディレクトリを作っていきます（画像参照）。
サイトURL
今回は、当サイトを運営しているドメインの下層にCodeIgniterを設置するので、以下のようなURLになります。
http://xn--pbku02iq0izkz.net/cd/
以上でサイト作成の準備が完了です。
変数の受け渡し
続いて、コントローラー内で変数を宣言し、viewで利用できるようにします。
実際、なくても簡単なサイトであれば作れますが、ここで慣れておくのがよいでしょう。
この時、各コントローラーで宣言するのも良いですが、それよりも親のMY_Controller.phpで宣言しておけば、
後々コントローラーを増やしても同じように引き継げます。
以下のような感じです。
application/core/MY_Controller.php を編集
<?php
class MY_Controller extends CI_Controller
{
public $data;
public function __construct()
{
parent::__construct();
$this->load->library(array('parser','form_validation','pagination','user_agent','lib'));
$this->load->helper(array('form','url','array','file','cookie'));
$data = array();
$data['assets'] = '/cd/assets';//サイトがドメイン直下でないため「/cd」を追加
$data['include'] = FCPATH.'application/views';
$this->data = $data;
}
}
?>
親コントローラーで$dataを宣言しておくことにより子コントローラーでも引き継げるようにしておきます。
続いて子コントローラーでも情報を変数に入れていきましょう。
application/controllers/Top.php を編集
<?php
public function index()
{
$data = $this->data;
$data['page_title'] = 'TOPページ';
$data['body_class'] = 'home';
$this->load->view('index',$data);
}
簡単な例として、ページタイトルをそれぞれ変数に入れてみました。
そして、宣言された変数は、$this->load->view(‘viewファイル名’,$data);という書き方によりviewの方に受け渡されます。
では、これらを利用して、サイトを作ってみましょう。
サイトの作成
せっかくなので、HTMLテンプレートを利用して綺麗な形のものを作ってみましょう。
いいものがありました。
2015年時点で最高の無料レスポンシブ用フリーテンプレート50+ | co-jin
こちらで紹介されていた「Piccolo」というものを利用してみます。
Piccolo ダウンロード
さて、中身を開いてみると恐ろしい量のhtmファイルがありますが、今回はindex.htmのみ利用します。
まず、テンプレート内にあるcss、img、jsフォルダを先ほど作ったassetsディレクトリにUPします。
※assets内にimagesディレクトリを作りましたが、テンプレートを無駄にいじりたくないので削除、imgディレクトリを利用します。
では、これよりindex.htmを切り取って、viewに貼り付けていきましょう。
header.php
フレームワークでサイトを作成するうえで、重要なのがヘッダーファイルです。
CSSの呼び出しから、サイトタイトル、ディスクリプションなど、様々な記述がここに集まります。
ただ、今回は簡単な記述で済ませますけども。
application/views/i/header.php を編集
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php echo $page_title ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo $assets ?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo $assets ?>/css/bootstrap-responsive.css">
<link rel="stylesheet" href="<?php echo $assets ?>/css/prettyPhoto.css" />
<link rel="stylesheet" href="<?php echo $assets ?>/css/flexslider.css" />
<link rel="stylesheet" href="<?php echo $assets ?>/css/custom-styles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="<?php echo $assets ?>/css/style-ie.css"/>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="<?php echo $assets ?>/img/favicon.ico">
<link rel="apple-touch-icon" href="<?php echo $assets ?>/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $assets ?>/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $assets ?>/img/apple-touch-icon-114x114.png">
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="<?php echo $assets ?>/js/bootstrap.js"></script>
<script src="<?php echo $assets ?>/js/jquery.prettyPhoto.js"></script>
<script src="<?php echo $assets ?>/js/jquery.flexslider.js"></script>
<script src="<?php echo $assets ?>/js/jquery.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn-blog-next").click(function () {
$('#blogCarousel').carousel('next')
});
$("#btn-blog-prev").click(function () {
$('#blogCarousel').carousel('prev')
});
$("#btn-client-next").click(function () {
$('#clientCarousel').carousel('next')
});
$("#btn-client-prev").click(function () {
$('#clientCarousel').carousel('prev')
});
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshow: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</head>
<body class="<?php echo $body_class ?>">
<!-- Color Bars (above header)-->
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>
<div class="container">
<div class="row header"><!-- Begin Header -->
<!-- Logo
================================================== -->
<div class="span5 logo">
<a href="index.htm"><img src="<?php echo $assets ?>/img/piccolo-logo.png" alt="" /></a>
<h5>Big Things... Small Packages</h5>
</div>
<!-- Main Navigation
================================================== -->
<?php include($include."/i/nav.php");?>
</div><!-- End Header -->
aリンクは後々修正するとして無視します。
その他、CSSとjsとimgの呼び出しには以下のコードを利用します。
<?php echo $assets ?>
そして、ファイルの扱いやすくする為、ナビゲーションは別のviewに記述し、呼び出します。
<?php include($include."/i/nav.php");?>
application/views/i/nav.php を作成
<div class="span7 navigation">
<div class="navbar hidden-phone">
<ul class="nav">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="index.htm">Home <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.htm">Full Page</a></li>
<li><a href="index-gallery.htm">Gallery Only</a></li>
<li><a href="index-slider.htm">Slider Only</a></li>
</ul>
</li>
<li><a href="features.htm">Features</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="page-full-width.htm">Pages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="page-full-width.htm">Full Width</a></li>
<li><a href="page-right-sidebar.htm">Right Sidebar</a></li>
<li><a href="page-left-sidebar.htm">Left Sidebar</a></li>
<li><a href="page-double-sidebar.htm">Double Sidebar</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery-4col.htm">Gallery <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="gallery-3col.htm">Gallery 3 Column</a></li>
<li><a href="gallery-4col.htm">Gallery 4 Column</a></li>
<li><a href="gallery-6col.htm">Gallery 6 Column</a></li>
<li><a href="gallery-4col-circle.htm">Gallery 4 Round</a></li>
<li><a href="gallery-single.htm">Gallery Single</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="blog-style1.htm">Blog <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog-style1.htm">Blog Style 1</a></li>
<li><a href="blog-style2.htm">Blog Style 2</a></li>
<li><a href="blog-style3.htm">Blog Style 3</a></li>
<li><a href="blog-style4.htm">Blog Style 4</a></li>
<li><a href="blog-single.htm">Blog Single</a></li>
</ul>
</li>
<li><a href="page-contact.htm">Contact</a></li>
</ul>
</div>
<!-- Mobile Nav
================================================== -->
<form action="#" id="mobile-nav" class="visible-phone">
<div class="mobile-nav-select">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Navigate...</option>
<option value="index.htm">Home</option>
<option value="index.htm">- Full Page</option>
<option value="index-gallery.htm">- Gallery Only</option>
<option value="index-slider.htm">- Slider Only</option>
<option value="features.htm">Features</option>
<option value="page-full-width.htm">Pages</option>
<option value="page-full-width.htm">- Full Width</option>
<option value="page-right-sidebar.htm">- Right Sidebar</option>
<option value="page-left-sidebar.htm">- Left Sidebar</option>
<option value="page-double-sidebar.htm">- Double Sidebar</option>
<option value="gallery-4col.htm">Gallery</option>
<option value="gallery-3col.htm">- 3 Column</option>
<option value="gallery-4col.htm">- 4 Column</option>
<option value="gallery-6col.htm">- 6 Column</option>
<option value="gallery-4col-circle.htm">- Gallery 4 Col Round</option>
<option value="gallery-single.htm">- Gallery Single</option>
<option value="blog-style1.htm">Blog</option>
<option value="blog-style1.htm">- Blog Style 1</option>
<option value="blog-style2.htm">- Blog Style 2</option>
<option value="blog-style3.htm">- Blog Style 3</option>
<option value="blog-style4.htm">- Blog Style 4</option>
<option value="blog-single.htm">- Blog Single</option>
<option value="page-contact.htm">Contact</option>
</select>
</div>
</form>
</div>
こちらもリンクは無視、activeの状態も無視するとします。
footer.php
こちらは比較的簡単です。
編集してしまいましょう。
application/views/i/footer.php を編集
<!-- Footer Area
================================================== -->
<div class="footer-container"><!-- Begin Footer -->
<div class="container">
<div class="row footer-row">
<div class="span3 footer-col">
<h5>About Us</h5>
<img src="<?php echo $assets ?>/img/piccolo-footer-logo.png" alt="Piccolo" /><br /><br />
<address>
<strong>Design Team</strong><br />
123 Main St, Suite 500<br />
New York, NY 12345<br />
</address>
<ul class="social-icons">
<li><a href="#" class="social-icon facebook"></a></li>
<li><a href="#" class="social-icon twitter"></a></li>
<li><a href="#" class="social-icon dribble"></a></li>
<li><a href="#" class="social-icon rss"></a></li>
<li><a href="#" class="social-icon forrst"></a></li>
</ul>
</div>
<div class="span3 footer-col">
<h5>Latest Tweets</h5>
<ul>
<li><a href="#">@room122</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#">@room122</a> In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Morbi blandit ultricies ultrices.</li>
<li><a href="#">@room122</a> Vivamus nec lectus sed orci molestie molestie. Etiam mattis neque eu orci rutrum aliquam.</li>
</ul>
</div>
<div class="span3 footer-col">
<h5>Latest Posts</h5>
<ul class="post-list">
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit est lacus gravida</a></li>
<li><a href="#">Lectus sed orci molestie molestie etiam</a></li>
<li><a href="#">Mattis consectetur adipiscing elit est lacus</a></li>
<li><a href="#">Cras rutrum, massa non blandit convallis est</a></li>
</ul>
</div>
<div class="span3 footer-col">
<h5>Flickr Photos</h5>
<ul class="img-feed">
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
<li><a href="#"><img src="<?php echo $assets ?>/img/gallery/flickr-img-1.jpg" alt="Image Feed"></a></li>
</ul>
</div>
</div>
<div class="row"><!-- Begin Sub Footer -->
<div class="span12 footer-col footer-sub">
<div class="row no-margin">
<div class="span6"><span class="left">Copyright 2012 Piccolo Theme. All rights reserved.</span></div>
<div class="span6">
<span class="right">
<a href="#">Home</a> | <a href="#">Features</a> | <a href="#">Gallery</a> | <a href="#">Blog</a> | <a href="#">Contact</a>
</span>
</div>
</div>
</div>
</div><!-- End Sub Footer -->
</div>
</div><!-- End Footer -->
<!-- Scroll to Top -->
<div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
</body>
</html>
同じくリンクは無視します。
index.php
残った部分を貼り付けるだけです。
application/views/index.php を編集
<?php include("i/header.php");?>
<div class="row headline"><!-- Begin Headline -->
<!-- Slider Carousel
================================================== -->
<div class="span8">
<div class="flexslider">
<ul class="slides">
<li><a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
<li><a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
<li><a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
<li><a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
<li><a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/slider-img-1.jpg" alt="slider" /></a></li>
</ul>
</div>
</div>
<!-- Headline Text
================================================== -->
<div class="span4">
<h3>Welcome to Piccolo. <br />
A Big Theme in a Small Package.</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium vulputate magna sit amet blandit.</p>
<p>Cras rutrum, massa non blandit convallis, est lacus gravida enim, eu fermentum ligula orci et tortor. In sit amet nisl ac leo pulvinar molestie. Morbi blandit ultricies ultrices.</p>
<a href="#"><i class="icon-plus-sign"></i>Read More</a>
</div>
</div><!-- End Headline -->
<div class="row gallery-row"><!-- Begin Gallery Row -->
<div class="span12">
<h5 class="title-bg">Recent Work
<small>That we are most proud of</small>
<button class="btn btn-mini btn-inverse hidden-phone" type="button">View Portfolio</button>
</h5>
<!-- Gallery Thumbnails
================================================== -->
<div class="row clearfix no-margin">
<ul class="gallery-post-grid holder">
<!-- Gallery Item 1 -->
<li class="span3 gallery-item" data-id="id-1" data-type="illustration">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Custom Illustration</a>For an international ad campaign.</span>
</li>
<!-- Gallery Item 2 -->
<li class="span3 gallery-item" data-id="id-2" data-type="illustration">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">3 Color Poster Design</a>For a regional festival event.</span>
</li>
<!-- Gallery Item 3 -->
<li class="span3 gallery-item" data-id="id-3" data-type="web">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="#" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Ink Pen Illustration</a>Created for a best selling children's book.</span>
</li>
<!-- Gallery Item 4 -->
<li class="span3 gallery-item" data-id="id-4" data-type="video">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Custom Illustration</a>For an international add campaign.</span>
</li>
<!-- Gallery Item 5 -->
<li class="span3 gallery-item" data-id="id-5" data-type="web illustration">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Icon Design</a>Classic retro style illustration.</span>
</li>
<!-- Gallery Item 6 -->
<li class="span3 gallery-item" data-id="id-6" data-type="illustration design">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Animation Cell</a>Creative storyboard illustration</span>
</li>
<!-- Gallery Item 7 -->
<li class="span3 gallery-item" data-id="id-7" data-type="design">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Poster Ad Campaign</a>Regional ad for a local company.</span>
</li>
<!-- Gallery Item 8 -->
<li class="span3 gallery-item" data-id="id-8" data-type="web video">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Magazine Ad</a>For an international add campaign.</span>
</li>
<!-- Gallery Item 9 -->
<li class="span3 gallery-item" data-id="id-9" data-type="design">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Character Designs</a>For a feature film.</span>
</li>
<!-- Gallery Item 10 -->
<li class="span3 gallery-item" data-id="id-10" data-type="web design">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Poster and Ad Design</a>For an international add campaign.</span>
</li>
<!-- Gallery Item 11 -->
<li class="span3 gallery-item" data-id="id-11" data-type="illustration">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Website and Animation</a>For a local business.</span>
</li>
<!-- Gallery Item 12 -->
<li class="span3 gallery-item" data-id="id-12" data-type="illustration video">
<span class="gallery-hover-4col hidden-phone hidden-tablet">
<span class="gallery-icons">
<a href="img/gallery/gallery-img-1-full.jpg" class="item-zoom-link lightbox" title="Custom Illustration" data-rel="prettyPhoto"></a>
<a href="gallery-single.htm" class="item-details-link"></a>
</span>
</span>
<a href="gallery-single.htm"><img src="<?php echo $assets ?>/img/gallery/gallery-img-1-4col.jpg" alt="Gallery"></a>
<span class="project-details"><a href="gallery-single.htm">Branding Design</a>For an international add campaign.</span>
</li>
</ul>
</div>
</div>
</div><!-- End Gallery Row -->
<div class="row"><!-- Begin Bottom Section -->
<!-- Blog Preview
================================================== -->
<div class="span6">
<h5 class="title-bg">From the Blog
<small>All the latest news</small>
<button id="btn-blog-next" class="btn btn-inverse btn-mini" type="button">»</button>
<button id="btn-blog-prev" class="btn btn-inverse btn-mini" type="button">«</button>
</h5>
<div id="blogCarousel" class="carousel slide ">
<!-- Carousel items -->
<div class="carousel-inner">
<!-- Blog Item 1 -->
<div class="active item">
<a href="blog-single.htm"><img src="<?php echo $assets ?>/img/gallery/blog-med-img-1.jpg" alt="" class="align-left blog-thumb-preview" /></a>
<div class="post-info clearfix">
<h4><a href="blog-single.htm">A subject that is beautiful in itself</a></h4>
<ul class="blog-details-preview">
<li><i class="icon-calendar"></i><strong>Posted on:</strong> Sept 4, 2015<li>
<li><i class="icon-user"></i><strong>Posted by:</strong> <a href="#" title="Link">Admin</a><li>
<li><i class="icon-comment"></i><strong>Comments:</strong> <a href="#" title="Link">12</a><li>
<li><i class="icon-tags"></i> <a href="#">photoshop</a>, <a href="#">tutorials</a>, <a href="#">illustration</a>
</ul>
</div>
<p class="blog-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Vestibulum lectus tellus, aliquet et iaculis sed, volutpat vel erat. <a href="#">Read more</a><p>
</div>
<!-- Blog Item 2 -->
<div class="item">
<a href="blog-single.htm"><img src="<?php echo $assets ?>/img/gallery/blog-med-img-1.jpg" alt="" class="align-left blog-thumb-preview" /></a>
<div class="post-info clearfix">
<h4><a href="blog-single.htm">A great artist is always before his time</a></h4>
<ul class="blog-details-preview">
<li><i class="icon-calendar"></i><strong>Posted on:</strong> Sept 4, 2015<li>
<li><i class="icon-user"></i><strong>Posted by:</strong> <a href="#" title="Link">Admin</a><li>
<li><i class="icon-comment"></i><strong>Comments:</strong> <a href="#" title="Link">12</a><li>
<li><i class="icon-tags"></i> <a href="#">photoshop</a>, <a href="#">tutorials</a>, <a href="#">illustration</a>
</ul>
</div>
<p class="blog-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Vestibulum lectus tellus, aliquet et iaculis sed, volutpat vel erat. <a href="#">Read more</a><p>
</div>
<!-- Blog Item 3 -->
<div class="item">
<a href="blog-single.htm"><img src="<?php echo $assets ?>/img/gallery/blog-med-img-1.jpg" alt="" class="align-left blog-thumb-preview" /></a>
<div class="post-info clearfix">
<h4><a href="blog-single.htm">Is art everything to anybody?</a></h4>
<ul class="blog-details-preview">
<li><i class="icon-calendar"></i><strong>Posted on:</strong> Sept 4, 2015<li>
<li><i class="icon-user"></i><strong>Posted by:</strong> <a href="#" title="Link">Admin</a><li>
<li><i class="icon-comment"></i><strong>Comments:</strong> <a href="#" title="Link">12</a><li>
<li><i class="icon-tags"></i> <a href="#">photoshop</a>, <a href="#">tutorials</a>, <a href="#">illustration</a>
</ul>
</div>
<p class="blog-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Vestibulum lectus tellus, aliquet et iaculis sed, volutpat vel erat. <a href="#">Read more</a><p>
</div>
</div>
</div>
</div>
<!-- Client Area
================================================== -->
<div class="span6">
<h5 class="title-bg">Recent Clients
<small>That love us</small>
<button id="btn-client-next" class="btn btn-inverse btn-mini" type="button">»</button>
<button id="btn-client-prev" class="btn btn-inverse btn-mini" type="button">«</button>
</h5>
<!-- Client Testimonial Slider-->
<div id="clientCarousel" class="carousel slide no-margin">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<p class="quote-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Morbi blandit ultricies ultrices. Vivamus nec lectus sed orci molestie molestie."<cite>- Client Name, Big Company</cite></p>
</div>
<div class="item">
<p class="quote-text">"Adipiscing elit. In interdum felis fermentum ipsum molestie sed porttitor ligula rutrum. Morbi blandit ultricies ultrices. Vivamus nec lectus sed orci molestie molestie."<cite>- Another Client Name, Company Name</cite></p>
</div>
<div class="item">
<p class="quote-text">"Mauris eget tellus sem. Cras sollicitudin sem eu elit aliquam quis condimentum nulla suscipit. Nam sed magna ante. Ut eget suscipit mauris."<cite>- On More Client, The Company</cite></p>
</div>
</div>
</div>
<!-- Client Logo Thumbs-->
<ul class="client-logos">
<li><a href="#" class="client-link"><img src="<?php echo $assets ?>/img/gallery/client-img-1.png" alt="Client"></a></li>
<li><a href="#" class="client-link"><img src="<?php echo $assets ?>/img/gallery/client-img-2.png" alt="Client"></a></li>
<li><a href="#" class="client-link"><img src="<?php echo $assets ?>/img/gallery/client-img-3.png" alt="Client"></a></li>
<li><a href="#" class="client-link"><img src="<?php echo $assets ?>/img/gallery/client-img-4.png" alt="Client"></a></li>
<li><a href="#" class="client-link"><img src="<?php echo $assets ?>/img/gallery/client-img-5.png" alt="Client"></a></li>
</ul>
</div>
</div><!-- End Bottom Section -->
</div> <!-- End Container -->
<?php include("i/footer.php"); ?>
これで完了です。
見た目も以下のようになります。
http://xn--pbku02iq0izkz.net/cd/
注意事項
テンプレートの各ファイルをみればわかりますが、デザインによってヘッダーに読み込む情報が少し違う場合があります。
その違う部分をコントローラーを利用して出したり隠したりにするというわけです。
やってくうちにわかると思いますが、最終的には各ページをすべて盛り込んだサイト作成の解説を作ろうと思います。
次回はDBの利用とmodelの書き方を解説します。
