HOME フォーラム BizVektor カレンダーのCSSの修正について

このトピックには6件の返信が含まれ、3人の参加者がいます。8 年、 3 ヶ月前 小林 さんが最後の更新を行いました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #169

    Vektor,Inc.
    キーマスター

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

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

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

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

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

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

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

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

    #171

    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; }
    }

    #172

    小林
    参加者

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

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

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

    #173

    小林
    参加者

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

    染谷様に教えていただき下記まではたどり着いたのですが、
    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; }

    }

    #193

    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 */
    }

    #194

    shirakobato
    参加者

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

    #195

    小林
    参加者

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

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

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

7件の投稿を表示中 - 1 - 7件目 (全7件中)

このトピックに返信するにはログインが必要です。