Web・デザインスクールホームページ作成講座レッスンノート 予約フォームの表示崩れを解決

予約フォームの表示崩れを解決

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

関坂さん

レッスンおつかれさまでした。
さて、今回のレッスンについてまとめておきます。

今回ご質問いただきました件の解決方法について、ご説明させていただきました。
(1)予約フォームの表示崩れを解決。
表示崩れの原因は、カレンダーをスマホで見れるように変更したしたCSSが予約入力画面に影響していたことでした。

以下のように定義されていましたね。

#content table tr td {
padding: 10px 0px;
}
#content table tr th {
padding: 10px 0px;
}

これを、以下のように書き換えることで解決です。

#content .monthly-calendar table tr td {
padding: 10px 0px;
}
#content .monthly-calendar table tr th {
padding: 10px 0px;
}

「.monthly-calendar 」を書き加えることで、カレンダーだけに有効になりました。

CSSファイルの変更は、ダッシュボードから変更することができました。
ダッシュボード > 外観 > テーマ編集 > スタイルシート(style.css)
この画面から、該当部分を書換えて「ファイルを更新」ボタンをクリック。

以上で解決しました。


(2)BizVektorのキーカラーを変更。
BizVektorのキーカラーの変更はダッシュボードから実行します。
ダッシュボード > 外観 > カスタマイズ > Calmly Setting > 色の選択

カラーピッカーから、好きな色を選んで、彩度を調整します。
現在使われている色は「#ff6347」というRGBカラーで表示されています。
ここに数値を入力して色を決めることもできます。
RGBカラーについて詳しくお知りになりたい場合には、次回のレッスンでご質問ください。
ご説明させていただきます。


(3)自動表示される「Powered by WordPress & BizVektor Theme by Vektor,Inc.」の文字を消去。
style.cssに以下の通り記述すれば、解決しました。

#powerd { display: none; }

問題の特定には、デバッガーを使いましたね。


(4)トップページがiPadで横すべりしてしまうバグを解決。
「送り(Preview、Next)ボタン」を消去することで解決しました。

.flex-direction-nav { display: none; }

これで解決です。

どうしても「送りボタン」を消したくない場合には、他の方法もあります。
ご興味があれば、次回のレッスンでご質問ください。
このレッスンノートを書いたコーチ

国内最大のポータルサイト運営会社にて実績多数!リラックスして学べます

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta