■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

テーマ【JeetKuneDe】のメールフォームについて

スレッド表示 | 新しいものから

前のトピック | 次のトピック | 下へ

3st > テーマ【JeetKuneDe】のメールフォームについて @ 2014/9/9 21:42
お世話になります。
テーマ【JeetKuneDe】について質問ですが、メールフォーム等システムエラーになった時にレイアウトがくずれてしまいます。
色々試したのですが、どのファイルを調整すれば良いかわかりませんでした。
どうか教えてください。


私の動作環境は，以下の通りです．
-----
■ BaserCMSのバージョン： 3.0.5.1
■ スマートURLの利用：　ON
■ 設置フォルダ：　サブフォルダ (/home/*/public_htmlの直下)
■ 利用しているデータベース：　MySQL
■ PHPスキル（自己評価）：　C

■ OSの種類： Linux
■ PHPのバージョン： 5.3.3
■ データベース種類・バージョン： 5.1.73
-----
nakamura > Re: テーマ【JeetKuneDe】のメールフォームについて @ 2014/9/11 16:41
こんにちは！


テーマ【JeetKuneDe】についてですが、
メールフォームのレイアウトがくずれていますね。

原因としてはメールフォームのテンプレートが準備されていないようですが、他にも原因はあるかもしれません。
メールフォームのテンプレートについては公式サイトの方をご確認してみてください。
http://basercms.net/manuals/3/designers/6.html

メールフォームのテンプレートをつくれるか試してみます!
また、報告したいと思うのでよろしくお願いします。
nakamura > Re: テーマ【JeetKuneDe】のメールフォームについて @ 2014/9/11 18:19
メールフォームのテンプレート追加とstyle.cssへのスタイルの追加が必要なようです。

参考までに私のコードをサンプルとして載せておきます。
ファイルパスは{baserCMSの設置フォルダ}/app/webroot/themeから記述したいと思います。
ご確認よろしくお願いします(^^)



■ theme/jkd/Mail/confirm.phpの作成

<?php
/**
 * [PUBLISH] メールフォーム確認ページ
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2014, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2014, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Mail.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$this->BcBaser->css(array('Mail.style', 'admin/jquery-ui/ui.all'), array('inline' => true));
$this->BcBaser->js(array('admin/jquery-ui-1.8.19.custom.min', 'admin/i18n/ui.datepicker-ja'), false);
if ($freezed) {
	$this->Mailform->freeze();
}
?>

<section id="pageBody">
    
    
<?php if ($freezed): ?>
	<h2 class="ttlL">入力内容の確認</h2>
	<p class="section">入力した内容に間違いがなければ「送信する」ボタンをクリックしてください。</p>
<?php else: ?>
	<h2 class="ttlL">お問い合わせ入力フォーム</h2>
<?php endif ?>
    
<?php if ($this->Mail->descriptionExists()): ?>
    <div class="section mail-description txt">
        <?php $this->Mail->description() ?>
    </div>
<?php endif ?>

    <div class="contactSection">
        <?php $this->BcBaser->flash() ?>
        <?php $this->BcBaser->element('mail_form') ?>
    </div>

</section><!-- /#pageBody -->



■ theme/jkd/Mail/submit.phpの作成

<?php
/**
 * [PUBLISH] メールフォーム送信完了ページ
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2014, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2014, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Mail.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$this->BcBaser->css('Mail.style', array('inline' => true));
if (Configure::read('debug') == 0 && $mailContent['MailContent']['redirect_url']) {
	/* プラグインの為か、inlineが動作しない */
	//$this->BcHtml->meta(array('http-equiv'=>'Refresh'),null,array('content'=>'5;url='.$mailContent['MailContent']['redirect_url']),false);
	$this->addScript($this->BcHtml->meta(array('http-equiv' => 'Refresh'), null, array('content' => '5;url=' . $mailContent['MailContent']['redirect_url'])));
}
?>
<section id="pageBody">

    <h2 class="ttlL">メール送信完了</h2>
    
    <?php if ($this->Mail->descriptionExists()): ?>
		<div class="section mail-description txt">
			<?php $this->Mail->description() ?>
		</div>
	<?php endif ?>

    <div class="section">
        <p>お問い合わせ頂きありがとうございました。<br />
            確認次第、ご連絡させて頂きます。</p>
    <?php if (Configure::read('debug') == 0 && $mailContent['MailContent']['redirect_url']): ?>
        <p>※５秒後にトップページへ自動的に移動します。</p>
        <p><a href="<?php echo $mailContent['MailContent']['redirect_url']; ?>">移動しない場合はコチラをクリックしてください。≫</a></p>
    <?php endif; ?>
    </div>
</section><!-- /#pageBody -->



■ theme/jkd/css/style.cssへのスタイル追加

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

.clearfix, header, footer .container, #widget .container, .topContainer, .topSection, .topSection .wrap, .newsSection .postLi li, .thumbSection .wrap, #pageBody, #blogArchive, .blogPost, #blogSingle, #contentsNavi,
#MessageIndexForm .submit,
#MessageConfirmForm .submit{
  overflow: hidden;
  *zoom: 1;
}

/* common
-------------------------*/
/*web font*/
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format("woff");
}

@font-face {
  font-family: 'mplus-2p-regular';
  src: url("../fonts/mplus-2p-regular-sub.eot") format("eot");
  src: url("../fonts/mplus-2p-regular-sub.woff") format("woff");
  src: url("../fonts/mplus-2p-regular-sub.ttf") format("truetype");
}

body {
  font-family: 'mplus-2p-regular';
}

/*
@font-face
{
font-family: mplus-2p-light;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-2p-light.ttf')
     format("truetype");
}
*/
html {
  -webkit-text-size-adjust: none;
}

body {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 14px;
  color: #333333;
  background: #333;
  overflow: auto;
}
body.show {
  overflow: hidden;
}

a {
  color: #333333;
  text-decoration: none;
}

em {
  font-weight: bold;
}

.wrap,
.scroll {
  display: block;
}

.roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: lighter;
}

.wFont {
  font-family: 'mplus-2p-regular';
}

.thumb a {
  cursor: default;
}

/*font-size(txt)*/
.txt {
  font-size: 1em;
  /*14px*/
  line-height: 1.7143em;
  /*24px*/
  margin-bottom: 1.7143em;
  word-break: break-word;
}

.txtS {
  font-size: 0.8571em;
  /* 12px */
  line-height: 2.0000em;
  /* 24px */
  margin-bottom: 2.0000em;
}

.txtL {
  font-size: 1.1429em;
  /* 16px */
  line-height: 1.5000em;
  /* 24px */
  margin-bottom: 1.5000em;
}

/*font-size(ttl)*/
.ttlS {
  font-size: 1.286em;
  /*18px*/
  line-height: 1.3333em;
  /* 24px */
  margin-bottom: 1.3333em;
}

.ttlM {
  font-size: 1.5000em;
  /* 21px */
  line-height: 1.1429em;
  /* 24px */
  margin-bottom: 1.1429em;
}

.ttlL {
  font-size: 2em;
  /*28px*/
  line-height: 1.7143em;
  /*48px*/
  margin-bottom: 0.8571em;
}

.ttlLL {
  font-size: 3em;
  /*42px*/
  line-height: 1.1429em;
  /*48px*/
  margin-bottom: 0.5714em;
}

/*icon*/
@font-face {
  font-family: 'ico';
  src: url("../fonts/ico.eot?cg2z45");
  src: url("../fonts/ico.eot?#iefixcg2z45") format("embedded-opentype"), url("../fonts/ico.woff?cg2z45") format("woff"), url("../fonts/ico.ttf?cg2z45") format("truetype"), url("../fonts/ico.svg?cg2z45#ico") format("svg");
  font-weight: normal;
  font-style: normal;
}

.ico {
  font-family: 'ico';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ico-menu_left,
.ico-contact_left,
.ico-phone,
.ico-category {
  margin-right: 8px;
}

.ico-menu_right,
.ico-contact_right {
  margin-left: 8px;
}

.ico-pageTop:before {
  content: "\e600";
}

.ico-menu_left:before {
  content: "\e601";
}

.ico-menu_right:before {
  content: "\e602";
}

.ico-contact_right:before,
.ico-contact_left:before {
  content: "\e603";
}

.ico-phone:before {
  content: "\e604";
}

.ico-link:before {
  content: "\e605";
}

.ico-category:before {
  content: "\e606";
}

.noImage:before {
  position: absolute;
  display: block;
  top: 50%;
  width: 100%;
  content: "\e607";
  font-size: 1.5em;
  text-align: center;
  margin-top: -0.5em;
}

.ico-list:before {
  content: "\e608";
}

/* common layout
-------------------------*/
/* #wrapper
-------------------------*/
#wrapper {
  width: 100%;
  min-width: 926px\9;
}

#slideContents {
  position: relative;
  min-width: 320px;
  width: 100%;
  -webkit-transition: .2s -webkit-transform ease-in-out;
  z-index: 1;
  background: #fff;
  top: 0;
}
#slideContents.show {
  position: fixed;
  -webkit-transform: translateX(240px);
  min-width: 320px;
  width: 100%;
}

#slideContents.show, x:-moz-any-link {
  left: 240px;
}

/* header
-------------------------*/
header {
  position: relative;
  padding: 1.7143em 0 10px;
  background: yellow;
  opacity: 1;
  -webkit-transition: padding 0.7s  ease-in-out ,.2s -webkit-transform ease-in-out;
}
header .ico-pageTop:before {
  display: none;
}
header .logo {
  position: relative;
  margin: 0 auto;
  padding-top: 1em;
  max-height: 110px !important;
  text-align: center;
  z-index: 20;
}
header .logo img {
  display: none;
  width: 100%;
  height: auto;
}
header #catch {
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  z-index: 10;
}
header .menuTtl {
  position: absolute;
  top: 10px;
  margin-bottom: 0;
  z-index: 999;
}
header #menu {
  left: 10px;
}
header #contact {
  right: 10px;
}
header .logoAlt {
  display: none;
}
header.contensHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.85715em 0;
  height: 24px;
  z-index: 900;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
header.contensHeader .logo {
  position: relative;
  padding-top: 0;
  text-align: center;
  z-index: 20;
  font-size: 1.5000em;
  /* 21px */
}
header.contensHeader .logo img {
  display: none !important;
}
header.contensHeader .logo .logoAlt {
  display: block;
}
header.contensHeader #catch {
  display: none;
}
header.show {
  -webkit-transition: .2s -webkit-transform ease-in-out;
  -webkit-transform: translateX(240px);
}

header.show, x:-moz-any-link {
  left: 240px;
}

/* slideMenu
-------------------------*/
#slideMenu {
  left: 0;
  top: 0;
  position: fixed;
  visibility: hidden;
  z-index: -1;
  -webkit-transition: visibility 0s linear .2s;
  overflow: auto;
  background: #333;
}
#slideMenu .wrap {
  padding: 15px 30px 15px 0;
  background: #333;
  font-size: 18px;
  line-height: 1;
  color: #ccc;
}
#slideMenu .wrap:hover {
  color: #333333;
  background: yellow;
}
#slideMenu li {
  border-top: 1px solid #484848;
  text-align: right;
}
#slideMenu li:first-child {
  border-top: none;
}

#slidemenu_contents {
  height: 100%;
  position: relative;
  width: 240px;
}

#slideMenu.show {
  height: 100%;
  visibility: visible;
  z-index: 1;
  -webkit-transition: z-index 0s linear .2s;
}

#slidemenu_contents.show {
  display: block;
}

#crumb {
  text-align: center;
  margin-bottom: 0;
}
#crumb strong {
  color: #ccc;
}

/* contents
-------------------------*/
#contents {
  padding: 3.4286em 0 0;
}
#contents.Home {
  padding: 6.8572em 0 0;
}

/* footer
-------------------------*/
footer {
  position: relative;
  padding: 3.4286em 0;
  background: url(../img/bg_footer.png);
  color: #fff;
}
footer a {
  color: #fff;
}
footer .container {
  max-width: 892px;
  margin: 0 auto;
  padding: 0 22px;
}
footer .column {
  position: relative;
  float: left;
  width: 33.3%;
  margin-bottom: 3.4286em;
}
footer .column1 {
  left: -12px;
}
footer .column3 {
  left: 12px;
}
footer .footerTtl {
  margin-bottom: 0.28572em;
}
footer .phone {
  font-size: 2em;
  /*28px*/
  line-height: 1.7143em;
  /*48px*/
  margin-bottom: 0;
}
footer .copyright {
  clear: both;
  text-align: center;
}
footer .contactBtn .wrap {
  padding: 20px 0 20px 10px;
  border-radius: 6px;
  background: yellow;
  color: #333333;
}
footer .pageTop {
  position: absolute;
  top: -49px;
  left: 50%;
  margin-left: -69px;
}
footer .pageTop img {
  display: block;
}

/*#widget*/
#widget {
  padding: 3.4286em 0 5.1429em;
  clear: both;
  background: #F7F7F7;
}
#widget .container {
  max-width: 912px;
  margin: 0 auto;
  padding: 0 44px;
}
#widget img {
  width: 100%;
  height: auto;
}
#widget .widget {
  position: relative;
  float: left;
  width: 33.3%;
  margin-bottom: 3.4286em;
  font-size: 1em;
  line-height: 1.7143em;
}
#widget .widget.first {
  left: -34px;
}
#widget .widget.last {
  left: 34px;
}
#widget h2 {
  font-size: 1.286em;
  /*18px*/
  line-height: 1.722em;
  /*31px*/
  margin-bottom: 1.722em;
}
#widget p {
  font-size: 1em;
  line-height: 1.7143em;
  margin: 0 0 1.7143em 0;
  word-break: break-word;
}

#side h2 {
  font-size: 1.286em;
  /*18px*/
  line-height: 1.722em;
  /*31px*/
  margin-bottom: 0.861em;
}
#side p {
  font-size: 1em;
  line-height: 1.7143em;
  margin: 0 0 1.7143em 0;
  word-break: break-word;
}
#side .widget {
  margin-bottom: 3.4286em;
}
#side .widget li {
  margin: 0 0 0 1em;
  text-indent: -1em;
  font-size: 1em;
  line-height: 1.7143em;
}

/* calendar
----------------------------------------------- */
.blog-calendar {
  width: 100%;
}

.widget-blog-calendar {
  width: 100%;
}

.widget-blog-calendar th {
  border-bottom: 1px solid #e2e2e2;
}

.widget-blog-calendar th,
.widget-blog-calendar td {
  padding: 2px 3px;
  font-size: 12px;
  text-align: center;
}

.widget-blog-calendar .sunday {
  color: #ff6633;
}

.widget-blog-calendar .saturday {
  color: #3366FF;
}

.widget-blog-calendar .today {
  background-color: #e2e2e2;
}

/* top
--------------------------*/
#mv {
  max-height: 576px;
}
#mv .txtBox {
  position: absolute;
  top: 50%;
  left: 10%;
  margin: 0;
  border-radius: 6px;
}
#mv .mvTxt {
  display: inline-block;
  margin-bottom: 5px;
  color: #fff;
  background: #000;
  filter: alpha(opacity=60);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
}
#mv.swiper-container .mvTxt {
  color: #fff !important;
}

.slideNav {
  position: absolute;
  top: 50%;
  cursor: pointer;
}

#prev {
  left: 40px;
}

#next {
  right: 40px;
}

.topContainer {
  max-width: 892px;
  margin: 0 auto;
  padding: 0 22px;
  width: 936px\9;
}

.topSection {
  margin-bottom: 3.4286em;
  width: 50%;
  float: left;
}
.topSection.column {
  position: relative;
  left: -12px;
}
.topSection.column2 {
  left: 12px;
}

.spList:nth-child(2n) {
  position: relative;
}
.spList:nth-child(2n):before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FF0;
  content: "";
  z-index: -1;
  opacity: 0.1;
}

.newsSection .postLi .date {
  float: left;
  line-height: 1.7143em;
  color: #999;
}
.newsSection .postLi .txt {
  margin: 0 0 0 100px;
}
.newsSection .postLi .txt a {
  text-decoration: underline;
}

.blogSection .blogTtl a {
  text-decoration: underline;
}

.thumbSection .thumb {
  position: relative;
  width: 30.58824%;
  float: left;
  height: 144px;
  border: 3px solid yellow;
  border-radius: 72px;
  overflow: hidden;
}
.thumbSection .thumb img {
  display: block;
  position: absolute;
}
.thumbSection .sectionTtl {
  margin-left: 35.29412%;
}
.thumbSection .date {
  margin: 0 0 0 35.29412%;
}
.thumbSection .txt {
  margin-left: 35.29412%;
  color: #999;
}
.thumbSection .blogTtl {
  color: #333333;
  text-decoration: underline;
}

/* contents
--------------------------*/
#mv.page {
  margin-bottom: 1.7143em;
  position: relative;
  max-height: 120px;
  overflow: hidden;
}
#mv.page img {
  width: 100%;
  height: auto;
}
#mv.page .pageTtl {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.5em;
  width: 100%;
  line-height: 1;
  text-align: center;
}

#pageBody {
  max-width: 892px;
  margin: 0 auto;
  width: 936px\9;
  padding: 0 10px 3.4286em;
}
#pageBody .section p {
  font-size: 1em;
  /*14px*/
  line-height: 1.7143em;
  /*24px*/
  margin-bottom: 1.7143em;
  word-break: break-word;
}
#pageBody .aboutSection {
  float: right;
  width: 50%;
}
#pageBody #map {
  position: relative;
  left: -12px;
  width: 100% !important;
}
#pageBody .aboutTable {
  position: relative;
  left: 12px;
}
#pageBody .aboutTable th, #pageBody .aboutTable td {
  padding: 10px 6px;
  vertical-align: top;
}

/* blog
--------------------------*/
#blogArchive {
  max-width: 892px;
  margin: 0 auto;
  width: 936px\9;
  padding: 0 10px 3.4286em;
}

#side {
  width: 23.07692%;
  float: right;
}

.archiveSection {
  float: left;
  width: 70.7265%;
}

.blogPost {
  margin-bottom: 5.1429em;
}
.blogPost .thumb {
  position: relative;
  width: 19.68391%;
  float: left;
  height: 144px;
  border: 3px solid yellow;
  border-radius: 72px;
  overflow: hidden;
  font-size: 2em;
}
.blogPost .thumb img {
  display: block;
  position: absolute;
}
.blogPost .ttlS {
  margin: 0 0 1.3333em 22.98851%;
}
.blogPost .ttlS a {
  text-decoration: underline;
}
.blogPost .post-body {
  font-size: 1em;
  /*14px*/
  line-height: 1.7143em;
  /*24px*/
  margin: 0 0 1.7143em 22.98851%;
  color: #999;
}
.blogPost .meta {
  text-align: right;
  margin: 0 0 0 22.98851%;
}
.blogPost .date {
  display: inline-block;
}
.blogPost .category {
  display: inline-block;
}
.blogPost .category a {
  text-decoration: underline;
}

#blogSingle {
  max-width: 892px;
  margin: 0 auto;
  width: 936px\9;
  padding: 0 10px 3.4286em;
}

#post {
  float: left;
  width: 70.7265%;
}
#post .thumb {
  position: relative;
  width: 19.68391%;
  float: left;
  height: 144px;
  border: 3px solid yellow;
  border-radius: 72px;
  overflow: hidden;
  font-size: 2em;
}
#post .thumb img {
  display: block;
  position: absolute;
}
#post .postTtl {
  margin: 0 0 0.8571em 22.98851%;
}
#post .meta {
  margin: 0 0 0 22.98851%;
}
#post .date {
  display: inline-block;
}
#post .category {
  display: inline-block;
}
#post .category a {
  text-decoration: underline;
}
#post .postTxt {
  clear: both;
  padding: 1.5em 0;
}
#post .postTxt p {
  font-size: 1.1429em;
  line-height: 1.5000em;
  margin-bottom: 1.5000em;
}

.backBtn {
  margin: 0 auto 3.4286em;
  width: 42.52874%;
  border: 1px solid #666;
  border-radius: 6px;
  text-align: center;
}
.backBtn .wrap {
  height: 72px;
  line-height: 72px;
}

/* BlogComment
----------------------------------------------- */
#BlogComment {
  border: 1px dashed #CCCCCC;
  margin-top: 40px;
  padding: 1.7143em;
}
#BlogComment .contents-head {
  font-size: 1.286em;
  /*18px*/
  line-height: 1.3333em;
  /* 24px */
  margin-bottom: 1.3333em;
}
#BlogComment .comment-name {
  font-size: 1em;
  line-height: 1.7143em;
  margin-bottom: 0;
}
#BlogComment .inputBox {
  margin-bottom: 1.7143em;
}
#BlogComment .commentTable {
  width: 100%;
}
#BlogComment .commentTable td {
  padding: 0 10px;
  vertical-align: top;
}
#BlogComment .commentTable .td01 {
  width: 40%;
}
#BlogComment .commentTable .td02 {
  width: 60%;
}
#BlogComment .commentTable label {
  display: block;
  font-size: 1em;
  /*14px*/
  line-height: 1.7143em;
  /*24px*/
}
#BlogComment .commentTable .note {
  margin-bottom: 1em;
  font-size: 12px;
}
#BlogComment .commentTable input {
  display: block;
  width: 90%;
  height: 29px;
  line-height: 29px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  font-size: 1em;
}
#BlogComment .commentTable textarea {
  display: block;
  width: 90%;
  height: 231px;
  border: 1px solid #ccc;
  resize: none;
  overflow-y: scroll;
}
#BlogComment .commentTable .auth-captcha-image {
  float: left;
}
#BlogComment .commentTableImg input {
  width: 50%;
  height: 29px;
  line-height: 29px;
  margin-top: 1.7143em;
  padding: 4px 8px;
  border: 1px solid #ccc;
}
#BlogComment .submit {
  width: 50%;
  margin: 1.7143em auto;
}
#BlogComment .submit input {
  -webkit-appearance: none;
  width: 100%;
  height: 72px;
  border: none;
  border-radius: 6px;
  color: #fff;
  background: #666;
  cursor: pointer;
  font-size: 18px;
}
#BlogComment .submit .auth-captcha {
  text-align: center;
}

#BlogCommentList {
  padding: 10px 20px;
  margin-top: 20px;
}

#BlogCommentList .comment {
  padding-bottom: 8px;
  margin-bottom: 20px;
}

/* contentsNavi
----------------------------------------------- */
#contentsNavi {
  padding: 0 20px;
}
#contentsNavi .postNav {
  position: relative;
  width: 50%;
  float: left;
}
#contentsNavi .postNav .txt {
  font-size: 1em;
}
#contentsNavi .postNav.prev {
  left: -20px;
}
#contentsNavi .postNav.next {
  left: 20px;
}

/* contact */
.contactSection .row-table-01 {
  width: 100%;
  font-size: 1.1429em;
  /* 16px */
  line-height: 1.5000em;
  /* 24px */
  margin-bottom: 1.5000em;
}
.contactSection .row-table-01 input {
  height: 29px;
  line-height: 29px;
}
.contactSection .required {
  color: #c30;
}

#MessageIndexForm,
#MessageConfirmForm {
  font-size: 1.1429em;
  /* 16px */
  line-height: 1.5000em;
  /* 24px */
}
#MessageIndexForm th,
#MessageConfirmForm th {
  width: 30%;
}
#MessageIndexForm th label,
#MessageConfirmForm th label {
  margin-left: 10px;
}
#MessageIndexForm td,
#MessageConfirmForm td {
  width: 70%;
  padding: 10px 10px;
  vertical-align: middle;
}
#MessageIndexForm td input[type="text"],
#MessageConfirmForm td input[type="text"] {
  width: 40%;
  margin-left: 5px;
}
#MessageIndexForm td input + span,
#MessageConfirmForm td input + span {
  margin-left: 10px;
}
#MessageIndexForm #FieldMessageEmail2,
#MessageConfirmForm #FieldMessageEmail2 {
  display: block;
  margin-top: 10px;
}
#MessageIndexForm #FieldMessageTel1 input,
#MessageIndexForm #FieldMessageTel2 input,
#MessageIndexForm #FieldMessageTel3 input,
#MessageConfirmForm #FieldMessageTel1 input ,
#MessageConfirmForm #FieldMessageTel2 input ,
#MessageConfirmForm #FieldMessageTel3 input {
  width: 25%;
}
#MessageIndexForm #FieldMessageAddress1,
#MessageConfirmForm #FieldMessageAddress1 {
  margin: 10px 0 0 1em;
}
#MessageIndexForm #FieldMessageAddress2,
#MessageIndexForm #FieldMessageAddress3,
#MessageConfirmForm #FieldMessageAddress2,
#MessageConfirmForm #FieldMessageAddress3 {
  display: block;
  margin: 10px 0 0 1em;
}
#MessageIndexForm #FieldMessageAddress2 input[type="text"],
#MessageIndexForm #FieldMessageAddress3 input[type="text"],
#MessageConfirmForm #FieldMessageAddress2 input[type="text"],
#MessageConfirmForm #FieldMessageAddress3 input[type="text"] {
  width: 70%;
}
#MessageIndexForm textarea,
#MessageConfirmForm textarea {
  width: 90%;
  height: 100%;
  resize: none;
}
#MessageIndexForm #MessageRoot,
#MessageConfirmForm #MessageRoot {
  margin-bottom: 10px;
}
#MessageIndexForm .auth-captcha,
#MessageConfirmForm .auth-captcha {
  margin-bottom: 20px;
  text-align: center;
}
#MessageIndexForm .auth-captcha-image,
#MessageConfirmForm .auth-captcha-image {
  display: block;
  margin: 0 auto 10px;
  text-align: center;
}
#MessageIndexForm .auth-captcha input,
#MessageConfirmForm .auth-captcha input{
  width: 40%;
  height: 29px;
  line-height: 29px;
  padding: 4px 8px;
  border: 1px solid #ccc;
}
#MessageIndexForm .submit,
#MessageConfirmForm .submit{
  padding: 0 20px;
}
#MessageIndexForm .submit .btn-gray,
#MessageConfirmForm .submit .btn-gray,
#BtnMessageBack {
  position: relative;
  left: -10px;
  float: left;
  -webkit-appearance: none;
  width: 30%;
  height: 72px;
  border: none;
  border-radius: 6px;
  color: #fff;
  background: #666;
  cursor: pointer;
  font-size: 18px;
}

#BtnMessageConfirm,
#BtnMessageSubmit{
  position: relative;
  left: 10px;
  -webkit-appearance: none;
  width: 70%;
  height: 72px;
  border: none;
  border-radius: 6px;
  color: #fff;
  background: #666;
  cursor: pointer;
  font-size: 18px;
}
3st > Re: テーマ【JeetKuneDe】のメールフォームについて @ 2014/9/12 18:54
nakamuraさん

こんにちは！
早速のご回答感謝します！

ありがとうございます。
テンプレートが追加で必要だったんですね！

テンプレートまでつくってもらって本当に感謝です。

何とか解決できそうです。

今後も、どうぞよろしくお願いします。

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

ログイン
ユーザー名:
パスワード:


　 新規登録 / パスワード紛失

検索
 ≫ 高度な検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね！」をポチっとクリックしてください！質問の回答者や開発者の励みになります

フォーラムガイド
質問を投稿する際のガイドライン 質問に回答する際のガイドライン 動作環境の雛形 署名の登録方法


関連リンク
baserCMS公式サイト baserCMS公式wiki baserCMSユーザー会 baserCMSコア開発プロジェクト(BTG)
最新バージョンの修正パッチ一覧 修正パッチの適用方法 baserCMS開発環境 GitHub
CakePHP公式サイト CakePHP Users in Japan

オンライン状況
16 人のユーザが現在オンラインです。 (15 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 16