CodeIgniter – Bootstrapを導入する

レスポンシブ対応の画面作成にはBootstrapを使うことが多々あります。ただ、本家Bootstrapではなく、日本語サイト制作を考えられたものを使っています。

Honoka – 日本語も美しく表示できるBootstrapテーマ

Honoka - 日本語も美しく表示できるBootstrapテーマ
Honokaは日本語表示に最適化されたオリジナルBootstrapテーマです。
honokak.osaka

これをCodeIgniterに組み込むことにしました。

1.ディレクトリを配置
2.ヘッダー・コンテンツ・フッターにviewを分割
3.viewを呼び出す

1.ディレクトリを配置

まずはBootstrapのcss, font, jsディレクトリを設置します。

色々な設置場所があるかもしれませんが、色々調べてみてアプリケーションディレクトリと同階層（index.phpがある場所）が良さそうです。（CakePHPなんかは”app/vendor/”でしたね）

2.ヘッダー・コンテンツ・フッターにviewを分割

３つのビューを作成します。

ヘッダーとフッターは共通で使用し、コンテンツ部分はファイルを分けて色々作り、コントローラで都度必要なものを指定するイメージです。

ディレクトリパスが入る部分はbase_url()に置き換えています。

/views/common/header.php

<!DOCTYPE html>
:
<title><?php echo $title; ?></title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/bootstrap.css">
:
<div class="container">

/views/index.php

<p>自由なコンテンツ</p>

/views/common/footer.php

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
:
</html>

3.viewを呼び出す

/controllers/main.php

public function index()
{
  $header['title'] = 'ページタイトル';
  $this->load->view('header', $header);
  $this->load->view('index');
  $this->load->view('footer');
}