CodeIgniterでCSSの外部ファイルを読み込ませる方法

CodeIgniter
スポンサーリンク

URLを整える

.htaccess の設定

.htaccess ファイルをapplicationやsystemが並ぶ階層に作成しましょう。コードは以下になります。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

index_pageの編集

index_pageの設定を変更しましょう。コードを以下のように書き換えます。

編集ファイル: application/config/ config.php

| Index File
|--------------------------------------------------------------------------
|
| Typically this will be your index.php file, unless you've renamed it to
| something else. If you are using mod_rewrite to remove the page set this
| variable so that it is blank.
|
*/
//$config['index_page'] = 'index.php';
$config['index_page'] = '';

CSSを読み込ませるリンクの設定

URLヘルパーの設定

URLヘルパーの設定を変更しましょう。コードを以下のように書き換えます。

編集ファイル: application/config/ autoload.php

/*
| -------------------------------------------------------------------
|  Auto-load Helper Files
| -------------------------------------------------------------------
| Prototype:
|
|	$autoload['helper'] = array('url', 'file');
*/
//$autoload['helper'] = array();
$autoload['helper'] = array('url');

base_url の設定

base_urlの設定を変更しましょう。コードを以下のように書き換えます。

編集ファイル: application/config/ config.php

/*
|--------------------------------------------------------------------------
| Base Site URL
|--------------------------------------------------------------------------
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
//$config['base_url'] = '';
$config['base_url'] = 'http://localhost/ci_css/';

ci_cssは私のプロジェクトのファイル名です。ですので、ここは任意のファイル名に変更してください。

この設定を行うことでURLヘルパーが正しくURLを取得します。

cssファイルを作成

cssファイルを applicationsystemが並んでいる階層 に作成しましょう。
先ほど作成した.htaccessと同じ階層になります。

私はcssという名前のファイルの中にtest.cssを作成しました。
ファイル名などは任意でつけて大丈夫です。

注意ですが、applicationの下に置くと読み込まれません!

Viewでの読み込ませ方

Viewの例を以下に示します。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="<?php echo base_url()?>css/test.css">
	<title>Welcome to CodeIgniter</title>
</head>
<body>
	<h1>TEST PAGE</h1>
	<p>This text is red.</p>
</body>
</html>

css/test.cssは私の設定したファイル名ですので、ここは適宜あった名前に変更してください。

以上でcssが適用できると思います。

最後まで読んでくださった方、ありがとうございました。

タイトルとURLをコピーしました