CodeIgniter – Bootstrapを導入する

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

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

http://honokak.osaka/

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

1.ディレクトリを配置

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

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

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

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

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

ディレクトリパスが入る部分は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');
}

スポンサーリンク
スポンサーリンク



フォローする