カレンダーのCSSの修正について

[Vektor,Inc.キーマスター]

初めましてwordpress初心者です。
BizVektorのテーマを使い美容院のホームページを制作しようと思っています。

予約システムを導入したいので下記のプラグインを使用しました。

http://app.mt-systems.jp/mtssb/downloadp/

PCブラウザ上はうまくカレンダーを表示出来るのですが、iphone等のスマートフォンで表示したところカレンダーが画面にうまく収まらずはみ出してしまっています。
（iphoneを回転させて横向きに確認すると綺麗に見えます）

プラグインの方のcssを覗いたところ
width: 98%;
となっています。

テーマのCSSをいろいろ確認したのですが、変更すべき場所がわかりませんでした。

困っていたところフォーラムが出来たという嬉しい知らせがあったので書き込みさせていただきました。

初心者ですみません。
よろしくお願いします。

[shirakobato参加者]

初めまして。WordPressを使用して3カ月、BizVektorのテーマを使用して数日の初心者です。
おそらく現象で気づいたと思いますが、画面の幅が要因となっています。
BizVektorはレスポンシブなテーマですのでCSSのmax-width, min-widthを指定している箇所の修正が必要と思います。
以下の3つが定義されています。
@media (min-width: 660px)
@media (min-width: 770px) /* pc iPad3より大きい場合 */
@media (min-width: 950px) /* フルサイズ */

質問のケースではiPhone4/4S(960×640)縦画面用に
@media (min-width: 660px)の部分を(min-width: 640px未満)とし、他の部分もそれに合わせ調整を行う必要があります。

私がウィジェットの幅をフルサイズ画面で220から300に広げた時は、子テーマのCSSを以下のように修正しました。
(#content + #sideTower +余白 が950pxになるように調整)

@media (min-width: 950px) { /* スクロール分余裕に20px */
/* change sss_biz
#main #container #content { float:left; width:640px; }
*/
#main #container #content { float:left; width:610px; }
/* change sss_biz
#main #container #sideTower { float:right; width:220px;clear:none; }
*/
#main #container #sideTower { float:right; width:300px;clear:none; }

/* change sss_biz
form#searchform input#s {width:120px; }
*/
form#searchform input#s { width: 195px; }
}


[小林参加者]

染谷　宏幸様
早速のご対応ありがとうございます。
感謝しています。

言って頂いた意味は理解しましたので一度ゆっくり時間をかけて探っていきたいと思います。
ありがとうございました。

またつまずいたときはよろしくお願いします。

[小林参加者]

お世話になります。
恥を承知でもう一度お願いします。

染谷様に教えていただき下記まではたどり着いたのですが、
660→640にするという簡単なことではないのでしょうか？？
試してみたのですがダメでした。

すみませんがよろしくお願いします。

/*——————————————-*/
/* コンテンツ推奨サイズより大きい場合
/*——————————————-*/
@media (min-width: 660px) { /* スクロール分余裕に20px */
#headerTop #site-description { line-height:150%;font-size:12px;}
#header #site-title { padding-bottom:15px;float:left;}
#header #headContact { float:right; text-align:right; }
#header #headContact #headContactTxt { font-size:11px;}
#header #headContact #headContactTime { font-size:12px;}
#header #headContact #headContactTel { font-size:24px;margin-bottom:4px; }

#main #container { padding-top:20px;}
#main #container #content { margin:0px auto; }
#content p { line-height:170%; }
#content .mainFootContact p.mainFootTxt { float:left; margin-bottom:0px; text-align:left; }
#content .mainFootContact p.mainFootTxt .mainFootCatch {font-size:120%;}
#content .mainFootContact .mainFootBt { float:right; }
#content .mainFootContact .mainFootBt a { width:350px;min-height:50px; }
#content .mainFootContact .mainFootBt a img { width:auto; }

.paging span.pageIndex { display:inline; }

#topMainBnr { padding:15px 0; }

#topPr { display:block; overflow:hidden; margin-bottom:25px; }
#topPr .topPrOuter { padding-bottom:0px;border-bottom:none;}
#topPr #topPrLeft { width:33.1%; text-align:left; float:left;display:block; overflow:visible; }
#topPr #topPrCenter { width:33.1%; text-align:center;float:left;display:block; overflow:visible; }
#topPr #topPrRight { width:33.1%; text-align:right;float:right; display:block; overflow:visible; }
#topPr #topPrLeft .topPrInner { float:left; }
#topPr #topPrCenter .topPrInner { margin:0px auto;}
#topPr #topPrRight .topPrInner { float:right; }
#topPr .topPrInner {text-align:left;width:95%;}
#topPr .topPrInner p { padding:0px; }
#topPr .topPrInner p.topPrDescription { font-size:12px; }
#topPr .prImage { float:none;width:100%; margin-right:0px; }
#topPr .prImage img { height:auto; }
#topPr .prImage img.imageWide { display:block;}
#topPr .prImage img.imageSmall { display:none;}

#content .child_page_block { width:48%; }
#content .child_page_block.layout_odd { float:left; clear:both; }

}

[shirakobato参加者]

どうやらコンテンツ推奨サイズは最少660pxのようですね。
先日は予測で発言してしまい、失礼しました。

そこで実際に確認しようと思い、テストサイトを作成してみました。
WordPress3.5.1日本語
テーマ:BizVektor 0.8.5.0
プラグイン:
　BizVektor Calmly Plus バージョン 1.0
　BizVektor WCT2012 SP1　バージョン 0.1.6
　BizVektor WCT2012 SP2　バージョン 0.2.2.1
　MTS Simple Booking-C　バージョン 1.2.0
　WP Multibyte Patch　バージョン 1.6.4
　Wordfence Security　バージョン 3.7.2
　WordPress Importer　バージョン 0.6.1
　Contact Form 7　バージョン 3.4.1
　My Page Order　バージョン 3.3.2
　TinyMCE Advanced　バージョン 3.5.8
　キャッシュ用プラグインは停止しています。

ブラウザの横幅を縮めながら確認した結果、以下となりました。
・ウィンドウの幅～404px OK
・ウィンドウの幅395px NG → 木曜位までの表示
幅が640でも私の環境では特に表示に乱れは無いようです。
もしかすると、確認に使用しているiPhoneは3/3Gですか?

カレンダーの表示部分はCSSで行っていますので、子テーマのstyle.cssを以下にようにしたところ、329pxまでは大丈夫のようでした。
※ コンテンツ推奨サイズ未満のため、動作は保証できません。

@charset “utf-8”;
/*
Theme Name: bmt-test
Theme URI:
Description: BMT test [Child theme for the BizVektor theme for WordPress]
Author:
Author URI:
Template: biz-vektor
Template Version: 0.8.5.0
Version: 0.1.0
License: GNU General Public License
License URI: license.txt
Tags: white,red,blue,black,green,orange
*/
@import url( ‘../biz-vektor/style.css’ );

/*——————————————-*/
/* Responsive Structure
/*——————————————-*/

@media (min-width: 320px) {
#content table tr th {
padding: 0px 10px;
}
#content table tr td {
padding: 0px 10px;
}
}
/*——————————————-*/
/* コンテンツ推奨サイズより大きい場合
/*——————————————-*/
@media (min-width: 660px) { /* スクロール分余裕に20px */
}
/*——————————————-*/
/* pc iPad3より大きい場合
/*——————————————-*/
@media (min-width: 770px) {
}
/*——————————————-*/
/* フルサイズ
/*——————————————-*/
@media (min-width: 970px) { /* スクロール分余裕に20px */
}

[shirakobato参加者]

追加です。
検証をPCブラウザで行ったため、実機ではフォントの問題が出るかもしれません。
BizVektorでは、以下のフォントが指定されています。
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;

現在、iPhone搭載の日本語フォントはヒラギノ角ゴシックProNだけのようなので以下のように変更して確認してみてください。
@media (min-width: 320px) {
#content table tr th {
padding: 0px 10px;
}
#content table tr td {
padding: 0px 10px;
}
font-family: font-family: Helvetica, Arial, ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, ‘Droid Sans’, ‘sans-serif’;
}

[小林参加者]

染谷様
サンプルサイトまで製作して検証して頂きありがとうございます。

当方技術がないためゆっくり時間をかけてためしてみます。
結果はまたご報告させて頂きます。

取り急ぎお礼のみで失礼します。
ありがとうございました。

[投稿者]

投稿