Open Source Web Development Tutorials - Dev Shed

CodeIgniterでブログを完成する！
（2009/03/30公開）

ビューファイル「blogs_comments_view.php」にCSSスタイルを追加する

　特定のエントリに対して付けられたコメントを表示し新たに投稿することができるようにするビューファイルのビジュアル面を改良するには、実はいくつか簡単な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;
}
a:link,a:visited{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #00f;
text-decoration: none;
}
a:hover{
color: #f90;
}
textarea, input.textbox{
width: 300px;
padding: 3px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
</style>
</head>
<body>
<h1><?php echo $title;?></h1>
<?php if($result->num_rows()>0):?>
<?php foreach($result->result_array() as $comment):?>
<div id="container">
<p><strong>Author: </strong><?php echo $comment['author'];?></p>
<p><strong>Comment:</strong></p>
<p><?php echo $comment['text'];?></p>
<p><?php echo anchor('blogger/blogs/','<< Back to blog');?></p>
</div>
<?php endforeach;?>
<?php endif;?>
<div id="container">
<?php echo form_open('blogger/insert_comment');?>
<?php echo form_hidden('blog_id',$this->uri->segment(3));?>
<p>Author:</p>
<p><input type="text" name="author" class="textbox" /></p>
<p>Enter your comments below:</p>
<p><textarea name="text" rows="10" cols="20"></textarea></p>
<p><input type="submit" value="Submit Comment" /></p>
</form>
</div>
</body>
</html>

　先ほど述べたように、ビューファイルのビジュアル面に磨きをかけるには、このようにわかりやすい処理を行うだけでよい。単にビューファイルに含まれるいくつかの要素にスタイルを追加するだけで、見た目はさらにプロっぽくなるわけだ。

　下に掲載した画像をご覧いただくと、スタイル処理の結果をよくわかっていただけることだろう。

　これでこのブログ用アプリケーションはきちんと動くだけでなく、見た目も魅力的になった。ソースファイルにほかの変更を加える前に、対応するフォルダにまず保存して、あとでローカル環境でテストできるようにしておこう。

　続く最後の部分では、これまで変更したすべての部分を含む、このブログ用ツールの完全なソースコードを掲載する。では、次の部分に進もう。終わりまであと一息！

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