固定ページトップ画像

ratio_3_2 に標準コメントフォームを呼び出しレスポンシブにカスタマイズする方法【baserCMS】

baserCMS 標準のコメントフォームを呼び出し、レスポンシブデザインにも対応させるようにカスタマイズする方法

ratio_3_2 にコメントフォームを設置する方法第三弾です。

第一弾 Facebook コメントプラグインを設置する方法

第二弾 DISQUS コメントフォームを設置する方法

今回は、baserCMS 標準のコメントフォームを呼び出し、レスポンシブデザインにも対応させるようにカスタマイズする方法をご紹介いたします。

メリット

他のテーマと同様に標準の機能が使えます。シングルコメントプラグインを使えば、記事毎にコメントフォームを設置するかどうか選べるようになります。

デメリット

画像の添付ができない。ブログ記事にしか呼び出せない。

設置したデモページはこちら

→ デモページ
(実際にコメントが出来ます)
スポンサードリンク

実践編

エレメント一覧の blog_comments.php というファイル名を blog_comments_xxx.php の様に変えることで、標準のコメントフォームを呼び出すことが出来ますが、カスタマイズしづらいので、blog_comments.php にクラス名を付け加えた物に置き換えます。

レイアウトテンプレート一覧 → エレメント一覧 → blog_comments.php

書き換えた blog_comments.php

<?php
/**
 * [PUBLISH] ブログコメント一覧
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$prefix = '';
if (Configure::read('BcRequest.agent')) {
$prefix = '/' . Configure::read('BcRequest.agentAlias');
}
?>
<script>
$(function() {
loadAuthCaptcha();
$("#BlogCommentAddButton").click(function() {
sendComment();
return false;
});
});
/**
 * コメントを送信する
 */
function sendComment() {
var msg = '';
if (!$("#BlogCommentName").val()) {
msg += 'お名前を入力してください\n';
}
if (!$("#BlogCommentMessage").val()) {
msg += 'コメントを入力してください\n';
}
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
if (!$("#BlogCommentAuthCaptcha").val()) {
msg += '画象の文字を入力してください\n';
}
<?php endif ?>
if (!msg) {
$.ajax({
url: $("#BlogCommentAddForm").attr('action'),
type: 'POST',
data: $("#BlogCommentAddForm").serialize(),
dataType: 'html',
beforeSend: function() {
$("#BlogCommentAddButton").attr('disabled', 'disabled');
$("#ResultMessage").slideUp();
},
success: function(result) {
if (result) {
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
loadAuthCaptcha();
<?php endif ?>
$("#BlogCommentName").val('');
$("#BlogCommentEmail").val('');
$("#BlogCommentUrl").val('');
$("#BlogCommentMessage").val('');
$("#BlogCommentAuthCaptcha").val('');
var resultMessage = '';
<?php if ($blogContent['BlogContent']['comment_approve']): ?>
resultMessage = '送信が完了しました。送信された内容は確認後公開させて頂きます。';
<?php else: ?>
var comment = $(result);
comment.hide();
$("#BlogCommentList").append(comment);
comment.show(500);
resultMessage = 'コメントの送信が完了しました。';
<?php endif ?>
$.ajax({
url: $("#BlogCommentGetTokenUrl").html(),
type: 'GET',
dataType: 'text',
success: function(result) {
$('input[name="data[_Token][key]"]').val(result);
}
});
$("#ResultMessage").html(resultMessage);
$("#ResultMessage").slideDown();
} else {
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
loadAuthCaptcha();
<?php endif ?>
$("#ResultMessage").html('コメントの送信に失敗しました。入力内容を見なおしてください。');
$("#ResultMessage").slideDown();
}
},
error: function(result) {
alert('コメントの送信に失敗しました。入力内容を見なおしてください。');
},
complete: function(xhr, textStatus) {
$("#BlogCommentAddButton").removeAttr('disabled');
}
});
} else {
alert(msg);
}
}
/**
 * キャプチャ画像を読み込む
 */
function loadAuthCaptcha() {

var src = $("#BlogCommentCaptchaUrl").html() + '?' + Math.floor(Math.random() * 100);
$("#AuthCaptchaImage").hide();
$("#CaptchaLoader").show();
$("#AuthCaptchaImage").load(function() {
$("#CaptchaLoader").hide();
$("#AuthCaptchaImage").fadeIn(1000);
});
$("#AuthCaptchaImage").attr('src', src);

}
</script>

<div id="BlogCommentCaptchaUrl" style="display:none"><?php echo $this->BcBaser->getUrl($prefix . '/blog/blog_comments/captcha') ?></div>
<div id="BlogCommentGetTokenUrl" style="display:none"><?php echo $this->BcBaser->getUrl('/blog/blog_comments/get_token') ?></div>

<?php if ($blogContent['BlogContent']['comment_use']): ?>
<aside class="BlogComment">

<h4>この記事へのコメント</h4>

<div class="BlogCommentList">
<?php if (!empty($post['BlogComment'])): ?>
<?php foreach ($post['BlogComment'] as $comment): ?>
<?php $this->BcBaser->element('blog_comment', array('dbData' => $comment)) ?>
<?php endforeach ?>
<?php endif ?>
</div><!-- /BlogCommentList -->

<section class="BlogCommentSend">
<h4>コメントを送る</h4>

<?php echo $this->BcForm->create('BlogComment', array('url' => $prefix . '/blog/blog_comments/add/' . $blogContent['BlogContent']['id'] . '/' . $post['BlogPost']['id'], 'id' => 'BlogCommentAddForm')) ?>

<table cellpadding="0" cellspacing="0" class="row-table-01">
<tr>
<th><?php echo $this->BcForm->label('BlogComment.name', 'お名前') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.name', array('type' => 'text')) ?></td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.email', 'Eメール') ?></th>
<td>
<?php echo $this->BcForm->input('BlogComment.email', array('type' => 'text', 'size' => 20)) ?>&nbsp;
<small>※ メールは公開されません</small>
</td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.url', 'URL') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.url', array('type' => 'text', 'size' => 20)) ?></td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.message', 'コメント') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.message', array('type' => 'textarea', 'rows' => 10, 'cols' => 40)) ?></td>
</tr>
</table>

<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
<div class="auth-captcha">
<img src="" alt="認証画象" class="auth-captcha-image" id="AuthCaptchaImage" style="display:none" />
<?php $this->BcBaser->img('admin/captcha_loader.gif', array('alt' => 'Loading...', 'class' => 'auth-captcha-image', 'id' => 'CaptchaLoader')) ?>
<?php echo $this->BcForm->text('BlogComment.auth_captcha') ?><br />
&nbsp;画像の文字を入力してください<br />
</div>
<?php endif ?>

<?php echo $this->BcForm->end(array('label' => '送信する', 'id' => 'BlogCommentAddButton', 'class' => 'button')) ?>

<div id="ResultMessage" class="message" style="display:none;text-align:center">&nbsp;</div>
</section>
</aside>
<?php endif ?>
上記のコードを blog_comments.php に貼れば、こちらが呼び出されます。<hタグ>やクラス名などを変えることで CSS でカスタマイズ出来ます。

同様に、エレメント blog_comment.php も下記の様に書き換えて下さい。
<?php
/**
 * [PUBLISH] ブログコメント単記事
 * 
 * Ajax でも利用される
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
?>

<?php if (!empty($dbData)): ?>
<?php if ($dbData['status']): ?>
<div class="comment" id="Comment<?php echo $dbData['no'] ?>">
<span class="comment-name">≫
<?php if ($dbData['url']): ?>
<?php echo $this->BcBaser->link($dbData['name'], $dbData['url'], array('target' => '_blank')) ?>
<?php else: ?>
<?php echo $dbData['name'] ?>
<?php endif ?>
</span><br>
<span class="comment-message"><?php echo nl2br($this->BcText->autoLinkUrls($dbData['message'])) ?></span>
</div>
<?php endif ?>
<?php endif ?>

CSSでレスポンシブ対応にカスタマイズ

custom.css に下記を追記します。
メディアクエリの記述があるので、順番に気をつけて下さい。モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。 詳しくは →こちら を参考にして下さい。

追加CSS

.BlogComment {
margin-top: 40px;
padding: 15px;
border: 1px solid #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}

.BlogComment h4 {
margin: 10px 10px 20px 10px;
padding: 10px;
border-bottom: medium solid #82ae46;
color: #333333;
font-size: 120%;
 font-weight: normal;
}

.BlogComment .submit {
padding: 30px 0;
text-align: center;
}

.BlogCommentList {
margin-bottom: 20px;
padding: 0 15px 20px;
border-bottom: 1px solid #CCC;
}

.comment {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dotted #CCC;
}

.comment:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}

.BlogCommentSend h5 {
margin: 0;
padding-bottom: 20px;
font-size: 18px;
font-size: 1.125rem;
}

.BlogCommentSend table {
width: 100%;
}

.BlogCommentSend table th {
padding: 10px;
}

.BlogCommentSend table td {
padding: 10px;
}

.auth-captcha {
text-align: center;
}

.auth-captcha-image {
vertical-align: middle;
}

#ResultMessage {
padding: 10px 0;
font-size: 18px;
font-size: 1.125rem;
background: #f39800;
color: #FFF;
}

.button {
margin: 10px;
padding: 15px 40px;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background: none, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: none, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #ffffff));
background: none, -webkit-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, -o-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
font-size: 20px;
font-size: 1.25rem;
}
.button:hover {
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #82ae46, #688B38);
background-image: -ms-linear-gradient(top, #82ae46, #688B38);
background-image: -o-linear-gradient(top, #82ae46, #688B38);
background-image: -webkit-gradient(linear, center top, center bottom, from(#82ae46), to(#688B38));
background-image: -webkit-linear-gradient(top, #82ae46, #688B38);
background-image: linear-gradient(top, #82ae46, #688B38);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}

@media only screen and (min-width: 500px) and (max-width: 1110px) {

input[name*="address_"] {
width: 100%;
}

.BlogCommentSend table tr {
display: inline;
}

.BlogCommentSend table th {
font-weight: bold;
}

.BlogCommentSend table th,
.BlogCommentSend table td {
padding: 10px 0 0;
margin-top: -1px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

.BlogCommentSend table td small {
display: block;
}

}

@media only screen and (min-width: 500px) and (max-width: 787px) {

#BlogCommentAddForm {
padding: 10px 0 !important;
}

#BlogCommentMessage {
width: 96%;
}
}

@media only screen and (max-width: 499px) {

.button {
font-size: 18px;
font-size: 1.125rem;
}

.BlogCommentSend table tr {
display: inline;
}

.BlogCommentSend table th {
font-weight: bold;
}

.BlogCommentSend table th,
.BlogCommentSend table td {
padding: 10px 0 0;
margin-top: -1px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

.BlogCommentSend table td small {
display: block;
}

#BlogCommentAddForm {
padding: 10px 0 !important;
}

#BlogCommentMessage {
width: 96%;
}
}
15行目でボーダー(下線)の色を指定
comcom1.png

79~101行目でボタンの色など。102~116行目でマウスホバー時のボタンの色を指定しています。
btncom.png
グラデーションを指定していますので、変えたい方は#から始まるカラーコードをお好みの物に変更して下さい。
→ WEB色見本 原色大辞典 - HTMLカラーコード
スポンサードリンク

フォームが表示されない?

ブログ基本設定(オプション欄)でコメントを受け付ける設定になっているか確認。

comcom2.png

オプション欄のコメントの受付設定

comcom3.png

CSS が反映されない?

ページを更新する (PCからは F5 を押す)

スーパーリロードする (PCから Ctrl + F5 を同時押し Windows)

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法(PC)

→ ブラウザのキャッシュをクリアする方法(スマートフォン)
 

コメントフォームの設定に便利なプラグイン

シングルコメントプラグイン

ブログ記事毎にコメント受付の可否設定ができるbaserCMS用プラグインです。(3系用)
 

最後に・・・

ratio_3_2 へのコメントフォームの追加方法はこれで終了です。Facebookコメントプラグイン や DISQUS を使った方法もご紹介いたしました。コメントもあなたのコンテンツの一部になりますので、うまく活用されてみて下さい。

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング人気ブログをblogramで分析

月別アーカイブ一覧


新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介します!https://ratio32.msstyle.jp/s...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL化に完全には対応できていない様です。当サイトは3系で運営して...

【mixhost・ミックスホスト へサーバー変更】baserCMS ホームページのプチリニューアルとSSL(暗号化通信)化を行いました。

2017-06-19

いつもご覧頂きありがとうございます。ホームページのリニューアルを行いましたのでお知らせ致します。大きな変更点は、ページ全体の暗号化通信(SSL)化を行いました。それに伴い、URLの変更がございます。 ...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-19

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介します!https://ratio32.msstyle.jp/s...

【ratio_3_2】ブログ記事下の次のページへのリンクを入れ替える方法【baserCMS】

2017-02-25

ブログ記事下の隣接ページへのリンクを入れ替える方法ご質問を頂きましたのでご紹介させて頂きます。 説明が難しいので要約させて頂いておりますm(_ _)mご質問ブログ記事の下部分の次のページへのリンクを入...

baserCMS

CakePHP(tm) : Rapid Development Framework