WordPressの質問（q10145776）の続

質問

不正なトークンと表示されるため、single-regist.phpから下記のコードを削除したのですが、そちらは問題ないでしょうか？
送信時にトークンが必要だと思いますので、登録結果画面には必要ないのではないかと考えております。

//確認画面でデータが安全であることが確認された上で$_SESSIONを経由して画面遷移するが、登録結果画面へは不正アクセスできるから必須
if (empty($_SESSION['token']) || empty($_POST['token']) || $_SESSION['token'] !== $_POST['token']) {
exit('不正トークン');
}

※single-regist.phpの11行目からトークンのコードになります
https://wandbox.org/permlink/vCbUEZFcvQf2n1DK

回答No.33

dell_OK · ベストアンサー

・質問がみつかりませんと表示されています

ＵＵＩＤが付いてないようです。
http://www.irasuto.cfbx.jp/雑談掲示板%e3%80%80質問表示画面/

ＵＵＩＤが付いてこんなＵＲＬになれば表示されます。
http://www.irasuto.cfbx.jp/雑談掲示板%e3%80%80質問表示画面/?29bbf0d7-34fd-11ee-ad27-e4434ba51b4c

・この表示画面というのは必要なのでしょうか？質問一覧画面から各リンクに飛ぶことで内容を表示させるものだと思っていたのですが…

必要だと思います。
リンクの飛び先が表示画面になると思うのですが、違うのでしょうか。
リンク先のページをどのように作るつもりでしたか。
別ページになるのでしたら必要だと思います。
それとも同じページ内で表示するつもりでしたか。

・別途データベースにIPアドレスを保存したいと考えております

テーブルにカラムを追加して保存するようにしてみてください。

・質問を一覧表示する際に1番目のアップロード画像とメッセージの一部を並べていきたいのですが可能でしょうか？

こんな感じになります。
メッセージの一部、については以前やったことがあると思いますので、$row->messageから取得するようにしてみてください。
－－－－
<?php
/*
Template Name: 質問一覧画面
*/
get_header();
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();
foreach ($rows as $row) {
$url = home_url('質問表示画面?'.$row->URL);
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
$files = glob($pattern);
if (empty($files)) {
$view = '<img src="ダミー画像パス">';
} else {
$info = pathinfo($files[0]);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$view = '<img style="height: 50px;" src="'.$attach_url.'">';
break;
case 'mp4':
$view = '<video style="height: 50px;" src="'.$attach_url.'">';
break;
case 'pdf':
$view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view = '';
break;
}
}
echo '<div><a href="'.$url.'">'.$row->namae.'</a></div>';
echo '<div>'.$row->message.'</div>';
echo '<div>'.$view.'</div>';
}
－－－－

お礼

質問の期限が切れてしまったので下記のURLからアドバイスお願い致します。

https://okwave.jp/qa/q10165331.html

補足

A.回答ありがとうございます、昨日教えて頂いた質問掲示板 登録結果画面のタイトルから飛べるページをリンク先として考えておりました。

http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

var_dump($row);で確認したところ登録結果画面と質問表示画面でNULLが表示されております。
コードをたどったところ質問表示画面の$sql = 'SELECT * FROM sortable WHERE URL=%s';で取得に失敗しているのではないかと考えたのですが、エラー原因は分かりますでしょうか？

※データベースにURLは格納されております。
https://imgur.com/5RmSq2Y.jpg

※該当コード
$url = substr($_SERVER['REQUEST_URI'], -36);
$sql = 'SELECT * FROM sortable WHERE URL=%s';
$query = $wpdb->prepare($sql, $url);
$rows = $wpdb->get_results($query);
var_dump($row);
if (empty($rows)) {
echo '質問がみつかりません';
exit;
}

________________________________________________________________________

Q.テーブルにカラムを追加して保存するようにしてみてください。

A.アドバイスありがとうございます、下記コードでIPアドレスは保存できるようですが、入力画面、確認画面、表示画面どのタイミングで追加すべきでしょうか？

$ip_address = $_SERVER["REMOTE_ADDR"];
//文字列形式から数値 に、数値から文字列形式に変換
$ip_long = ip2long($ip_address);

-- ipアドレスのテーブル
CREATE TABLE tbl_ips ( `ip` INT(10) NOT NULL );

$sql = "INSERT INTO tbl_ips ( ip ) VALUES ( INET_ATON( $ip ) );"

Q.こんな感じになります。
メッセージの一部、については以前やったことがあると思いますので、$row->messageから取得するようにしてみてください。

A.アドバイスありがとうございます、メッセージの一部を取得というコードを考えてみました。1点質問があるのですが、<a href="'.$url.'"></a>を名前、画像、メッセージ全体に1つだけかけたい場合どのようなコードにすればよいのでしょうか？

－－－－
<?php
/*
Template Name: 質問一覧画面
*/
get_header();
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();
foreach ($rows as $row) {
$url = home_url('質問表示画面?'.$row->URL);
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
$files = glob($pattern);
if (empty($files)) {
$view = '<img src="ダミー画像パス">';
} else {
$info = pathinfo($files[0]);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$view = '<img style="height: 50px;" src="'.$attach_url.'">';
break;
case 'mp4':
$view = '<video style="height: 50px;" src="'.$attach_url.'">';
break;
case 'pdf':
$view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view = '';
break;
}
}
echo '<div><a href="'.$url.'">'.$row->namae.'</a></div>';
　　 echo '<div>'.$view.'</div>';
echo '<div>'.mb_strimwidth($row->message, 0, 38, "･･･").'</div>';
}
－－－－

回答No.22

dell_OK

ヤフー知恵袋の画面画像を見る限り画面遷移はしていないようなので、OKWAVEと同じでAjaxだと思います。
確認画面を挟むかどうかは質問者さまがいいように決めたらいいとは思いますが、質問投稿画面には確認画面があるのに回答画面には確認画面がない、質問投稿画面はAjaxではないのに回答画面はAjax、と言う統一性の無さが利用者に不便さを感じさせるかも知れません。

回答画面の前に、閲覧画面を作る必要があります。

補足

回答ありがとうございます、閲覧画面は今回作成した表示画面と同じものを考えております。回答画面と表示画面はイコールで考えていたのですが、そうではないのでしょうか？

別の方に以前ヤフー知恵袋の回答画面にお聞きしていたことを忘れていたのですが、どうやらAjaxは使われていないようです。

確認ページは入力ページと同じにしてJavaScriptで表示を切替えるという仕組みになっていて、入力画面を非表示にし、確認画面を表示すればいいです。その後確認が済んだらPOSTという流れで作られているのではないかとアドバイス頂きました。

恐らくカメラ画像にファイルをアップロードした際に画像が消えているのと同じ仕組みで作られていると思われます。

※詳しい仕組みについて
画面還移を行わないため$SESSIONが必要なくなり、確認を完了した後に送信という形になる。

回答No.21

dell_OK

ＨＴＭＬで試してみたのですが、なかなかうまくいかないですね。
今はこんな感じですよね。
http://oksample.starfree.jp/narabi/
画像ふたつのときはメッセージが下になっていて、
画像みっつのときはメッセージが右になっているのを、
画像ふたつのときはメッセージを右に、
画像みっつのときはメッセージを下にしたいのですよね。
float: left;の組み合わせだけではできそうになかったです。

補足

回答ありがとうございます、画像全体にfloat:left;を指定することで3個に対応して、画像1つずつにfloat:left;を指定することで2個に対応することが出来ました。

回答者のページを作成していきたいのですが、確認画面を挟むべきか迷っております。ヤフー知恵袋のように1画面で入力→確認→送信という形は、Ajaxが必要になりそうでしょうか？　Ajaxを使うのであればgoo質問やOKWABEのように確認画面を挟まないパターンで考えております。

※参考サイト
https://blog.websandbag.com/entry/2020/08/30/171357

※ヤフー知恵袋
https://imgur.com/iyLB4D7.jpg

※最新ページ
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※最新コード
https://wandbox.org/permlink/bq6dZBiCYNBbO7tM

回答No.20

dell_OK

ＰＨＰは使わず、まずはＨＴＭＬで、実現できるかを確認した方がよさそうです。

回答No.19

dell_OK

回答No.17のコードをそのまま使ってくださいましたか。
画像が２の時の変数はこれですよ。
－－－－
} elseif ($image_count == 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が2つの場合のみ
－－－－

補足

回答ありがとうございます、PHPを少し変更いたしました。

回答No.18

dell_OK

ここが残っていないですか。
－－－－
default:
$view[$i] = '';
++$image_count;
break;
－－－－

お礼

こちらが最新の回答になります。どれだけ変更しても上手くいかないため、別の方にもお聞きしてみたのですが、理会不足で困っております。
クラス名はそれぞれ分けるべきだとアドバイスを頂いているようですが、同一クラスでは不可能なのでしょうか…？

※アドバイス頂いたコード
<?php
// 使用する変数を空文字で初期化
$buafloatLeft = 'none'; // 画像が3つの場合のみ
$btotafloatLeft = 'none'; // 初期値を設定

if ($image_count == 1) {
// 画像が1つの場合
$btotafloatLeft = 'left'; // 画像が1つの場合のみ
} elseif ($image_count == 2) {
// 画像が2つの場合
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count == 3) {
// 画像が3つの場合
$buafloatLeft = 'left'; // 画像が3つの場合のみ
$btotafloatLeft = 'left'; // 画像が3つの場合のみ
}
?>
CSSのクラス名も修正して、billboard_uploadFiles_areaとbillboard_toggle_targetを同じクラスで実装することはできません。それぞれ別々のクラス名を指定する必要があります。

補足

回答ありがとうございます、修正したところ正常にカウントすることができました。
ファイルアップロードの1つめだけidとなっていてclassに直したのですが、CSSの調整が難しく苦戦しております。
画像が2個の場合に縦並びまでは上手くいくのですが、その横に文字を並べられない状態です…
アドバイスお願い致します。

※最新コード
https://wandbox.org/permlink/u9uchgVhnXWyaEwQ

※該当コード
<?php
// 使用する変数を空文字で初期化
$buafloatLeft = 'none'; // 画像が3つの場合のみ
if ($image_count = 1) {
// 1がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
?>
<style>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: <?php echo $btotafloatLeft; ?>;
}

.billboard_toggle_target {
float: <?php echo $buafloatLeft; ?>;
}
</style>
<div class="billboard_article_area">
<div class="billboard_toggle_target">
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#1</label> -->
<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#2</label> -->
<div class="viewer"><?php echo $view[1]; ?></div>
</div>

<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#3</label> -->
<div class="viewer"><?php echo $view[2]; ?></div>
</div>

<div class="billboard_text_area">
<!-- <label>内容</label> -->
<p class="firstlyText"><?php echo $row['message']; ?></p>
</div>
</div>

回答No.17

dell_OK

それと、ifの判定が=になっていました。==にしてください。
これで私の方では縦に表示されました。
－－－－
$buafloatLeft = 'none'; // 画像が3つの場合のみ
$btotafloatLeft = 'none'; // 画像が2つの場合のみ
if ($image_count == 1) {
// 1がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count == 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が2つの場合のみ
} else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
－－－－

補足

回答No.16の回答は間違えでした申し訳ありません。
入力画面のカメラ画像（ファイルアップロード可能数）がそのまま++$image_count;に反映されているようです。

※入力画面のカメラ画像（ファイルアップロード可能数）を2個に減らしたもの
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.16

dell_OK

カウントがうまくいっていないのは、pdfの時にカウントすべきところ、ファイルがない時（default）でカウントしています。
－－－－変更前
switch ($ext) {
case 'jpeg':
case 'png':
$view[$i] = '<img id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'">';
++$image_count;
break;
case 'mp4':
$view[$i] = '<video id="multimedia" style="height: 350px; width: 528px;" controls src="'.$attach_url.'">';
++$image_count;
break;
case 'pdf':
$view[$i] = '<iframe id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view[$i] = '';
++$image_count;
break;
}
－－－－変更後
switch ($ext) {
case 'jpeg':
case 'png':
$view[$i] = '<img id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'">';
++$image_count;
break;
case 'mp4':
$view[$i] = '<video id="multimedia" style="height: 350px; width: 528px;" controls src="'.$attach_url.'">';
++$image_count;
break;
case 'pdf':
$view[$i] = '<iframe id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'"></iframe>';
++$image_count;
break;
default:
$view[$i] = '';
break;
}
－－－－

補足

回答ありがとうございます、変更してみたのですが変わらずカウントは3と表示されております…

詳しく調べてみたところ確認画面のファイル数で判定されているのではないかと思います。
入力画面のカメラ画像（ファイルアップロード可能数）は3個でファイルを2個の状態で確認画面に送信して、表示画面でカウントを確認したところ2と表示されました。

確認画面の下記コードで検証いたしました。
$view = [];の数が++$image_count;に反映されているように見えるのですが原因が分かりますでしょうか？

※変更コード（single-confirm.php）
<div class="uploadFiles">
<!-- <label>添付ファイル#1</label> -->
<div class="viewer"><?php echo $view[0]; ?></div>
<!-- <label>添付ファイル#2</label> -->
<div class="viewer"><?php echo $view[1]; ?></div>
</div>

※検証のために一時削除したコード（single-confirm.php）
<!-- <label>添付ファイル#3</label> -->
<div class="viewer"><?php echo $view[2]; ?></div>

回答No.15

dell_OK

最新コードが３画像に対応してないのでなんとも言えませんが、真逆と言われるのでしたら、'left'を入れている変数を変えてみてください。
－－－－変更前
} elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
－－－－変更後
} elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が2つの場合のみ
－－－－

補足

回答ありがとうございます。申し訳ありません、３画像に対応前のコードを載せておりました。

修正してみたのですが、画像2の時に実装したいものと真逆で表示されてしまうようです…
$btotafloatLeft = 'left'; が効かない原因を調べたところ、ファイルアップロード数のカウントが機能しておらず2画像アップロードの際も3と表示されておりました。
++$image_count;で分岐することは難しいようなので、$view[0]、$view[0]$view[1]、$view[0]$view[1]$view[2]でアップロードされた数を使ってCSSを分岐できないかと思ったのですが、可能でしょうか？

※該当ページ
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※最新コード
https://wandbox.org/permlink/XXV35xyW3r9JuoEL

回答No.14

dell_OK

・コードに違和感がありましたらアドバイスお願い致します。

ＰＨＰコードとスタイルシートが混ざっています。
ＰＨＰタグの開始終了を入れてください。
いただいたコードをそのまま対応すれば以下のようになります。
ただし、スタイルシートの部分が間違っているようなのでこのままでは使えません。
－－－－
<style type="text/css">
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

#billboard_toggle_target {
float: left;
}

<?php
if ($image_count = 1) {
?>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}

<?php
} elseif ($image_count = 2) {
?>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}

<?php
} else {
?>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

<?php } ?>
</style>
－－－－

・※ここから参考サイトを見て自分で考えてみたコード

こちらを使った方がいいと思います。
スタイルシートの正解がわからないので提示しにくいですが、例えばこんな感じです。
あくまで書き方ですので、何が正しいのかは、質問者さまにしかわからないので、考えて、実行して、確認してください。
－－－－
<?php
// 使用する変数を空文字で初期化
$buafloatLeft = 'none'; // 画像が3つの場合のみ
$btotafloatLeft = 'none'; // 画像が2つの場合のみ
if ($image_count = 1) {
// 1がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$btotafloatLeft = 'left'; // 画像が2つの場合のみ
} else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
?>
<style>
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: <?php echo $btotafloatLeft; ?>;
}

.billboard_toggle_target {
float: <?php echo $buafloatLeft; ?>;
}
</style>
－－－－

補足

Q.こちらを使った方がいいと思います。
スタイルシートの正解がわからないので提示しにくいですが、例えばこんな感じです。
あくまで書き方ですので、何が正しいのかは、質問者さまにしかわからないので、考えて、実行して、確認してください。

A.修正ありがとうございます。
不思議なことが起きているのですがアップロード数が2つの場合$btotafloatLeft = 'left'; が実行されず、$buafloatLeft = 'left';が実行されており（$buafloatLeft = 'none';が実行したいコード）、本来実装したいものと真逆の状態で表示されております。

アップロード数が3つの場合は正常に機能しており$btotafloatLeft = 'none'; が実行されて、$buafloatLeft = 'left';が実行されております。

画像2のみ真逆になっている原因は分かりますでしょうか…？

※style.cssはコメントアウトしているためPHPファイルでCSSの実行は成功しているようです。

※現在のページ
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※修正後の最新コード
https://wandbox.org/permlink/WcpbMuox0JE76di9

回答No.13

dell_OK

・※colorを変化させる方法しかわからず応用できるか不明
スタイルシートなんでもできます。

・※どのファイルに記述するのか分からない
そのＰＨＰファイルに記述します。

このふたつは同じです。
スタイルシートのファイルには書かないので、そのＰＨＰファイル内でしか有効ではありませんが、これが簡単で分かりやすいのでいいと思います。

補足

※現在のコード
https://wandbox.org/permlink/8fL8clqiT8SD8kXE

Q.colorを変化させる方法しかわからず応用できるか不明
スタイルシートなんでもできます。

A.回答ありがとうございます、floatでも考えてみたのですが、どのように書けばよいか分からず下記で止まっております…
確認したところ画像が2つの場合と3つの場合で変わるCSSはfloat: left;の有無になるのですが、コードについておかしなところはありますでしょうか？

※画像が3つの場合float: left;有り　画像が2つの場合float: left;無し
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: <?=$left;?>;
}

※画像が3つの場合float: left;無し　画像が2つの場合float: left;有り
#billboard_toggle_target {
float: <?=$left;?>;
}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

※ここから参考サイトを見て自分で考えてみたコード
https://tsuchippo.com/programming-phpstyle

// 使用する変数を空文字で初期化
$buafloatLeft = ''; // 画像が3つの場合のみ
$btotafloatLeft = ''; // 画像が2つの場合のみ

※アップロード分岐
if ($image_count = 1) {
// 1がtrueの場合
// ここの処理が実行される
$btotafloatLeft = ''; // 画像が2つの場合のみ
}
elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$btotafloatLeft = ''; // 画像が2つの場合のみ
}
else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$buafloatLeft = ''; // 画像が3つの場合のみ
}

Q.どのファイルに記述するのか分からない
そのＰＨＰファイルに記述します。

A.アドバイスありがとうございます、こちらの方法でも考えてみました。コードに違和感がありましたらアドバイスお願い致します。

※参考サイト
https://www.web-officer.com/php/rewrite-the-css-only-under-the-condition-of-php.php

<style type="text/css">
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

#billboard_toggle_target {
float: left;
}

<?php if ($image_count = 1) {
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}
}
elseif ($image_count = 2) {
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}
}
else {
.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: none;
}

.billboard_uploadFiles_area {
margin-right: 19px;
margin-bottom: 19px;
float: left;
}
}

<?php } ?>
</style>