Open Source Web Development Tutorials - Dev Shed

CodeIgniterでブログの見た目を改善する
（2009/03/27公開）

ブログ用ツールのビジュアル面を改善する

　先の部分で作ったそれぞれのビューファイルに、いくつか簡単なCSSスタイルを追加するだけで、このブログ用ツールの見た目を向上させることができる。なぜなら、アプリケーションのビジュアル面を構成するのは、ビューファイルだからだ。

　そこでまず、「blogs」という名のMySQLテーブルに保存されたすべてのブログエントリを表示しているはじめのビューファイルにスタイルを追加していこう。もうすぐ見ていただくと分かるが、この処理はWeb文書のヘッダとリンク、div（セクションの分割点）や段落、またほかのWebページの要素にいくつかのCSSスタイルをつなげるだけでできあがる。

　では、前述のCSSスタイルを実装した後のビューファイルを見てみよう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $title;?></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #003399;
margin: 18px 0 18px 0;
text-align: center;
}
h2{
font: bold 12pt Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
p{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
margin: 0 0 18px 0;
}
#container{
width: 500px;
background: #ccf;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 18px;
}
#paginglinks{
width: 500px;
background: #eee;
padding: 5px 15px 5px 15px;
margin-left: auto;
margin-right: auto;
}
a:link,a:visited{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: none;
}
a:hover{
color: #f90;
}
</style>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php foreach($result->result_array() as $blog):?>
<div id="container">
<h2><?php echo $blog['title'];?></h2>
<p><?php echo $blog['text'];?></p>
<p><?php echo anchor('blogger/comments/'.$blog['id'],'View Blog Comments >>');?></p>
</div>
<?php endforeach;?>
<?php echo $links;?>
</body>
</html>

　これで「blogs_view.php」というビューファイルにはいつかの典型的なCSSスタイルが付けられ、ブログエントリを表示するWeb文書の見た目をよくする働きをしてくれる。今回はこれらスタイルを2つの<style>タグで囲んで記述したが、普通は別ファイルで記述する方が良いのは言うまでもない。

　最後に、先ほどの説明を補足するため、下にブログ用ツールの改善後のビジュアル面をキャプチャして掲載しておこう。

　確かに見た目は良くなった。もちろん、今回のブログエントリ表示画面のスタイルは筆者の趣味に合わせたものだが、簡単に読者のお好きなように変更することができる。

　ここまでは完ぺきだ。この時点で、ブログ用ツールのビジュアル的要素を洗練していく方法を、部分的ではあるが、学ぶことができた。では、今回のチュートリアルで扱う最後の点として、今回加えたCSSスタイルを含む、ブログ用アプリケーションの完全なソースコードをお見せしよう。

　では、次の部分に進んでいこう。終わりまでもう少し！

前のページ 1 2 3 4 次のページ