bccolumnのテーマで上タイトル部分と下マップ部分の表示について。

yokochan > bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/10/27 22:11
大変お世話になります。

スマートフォンをヨコにした場合に、背景が切れてしまいます。
ヘッダー部分と同じように、横幅いっぱいに表示するようにしたいです。
ちなみに、背景は画像(800×200)です。

宜しくお願い致します。

■ BaserCMSのバージョン:baserCMS 4.1.3
■ テーマ(4系)bccolumn
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [OFF]
■ 設置フォルダ: [ドキュメントルート]
■ PHPスキル(自己評価):  E



Nori > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/10/29 11:17
同じテーマでサイト制作中です。

たしかにこちらのテーマはレスポンシブル対応の様で、
ちょっと抜けているところがあるようです。笑

一番手っ取り早い方法なら…
bodyのcssを以下のように書き換えてしまう方法が簡単かと


width: 1200px;
margin-left: auto;
margin-right: auto;


あとはモニターサイズ毎に変えるのも一案かと思いますが、
それは @media でその都度変更すればよいかと思います。

■ BaserCMSのバージョン:4.1.3
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用:OFF
■ 設置フォルダ:サブフォルダ
■ 利用しているデータベース:MySQL
■ PHPスキル:D

yokochan > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/10/30 23:27
Nori様

ご連絡ありがとうございます。
返信が遅くなり失礼致しました。

その辺りかなと思いやってみたものの、上手くいきませんでした。
モニターサイズ毎にしてみます。

この質問でお聞きしていいのかわかりませんが、
スマホで見たときに、トップの画像が切り替わらないのは、bccolumnの仕様なのでしょうか。

重ねてすみません。

Nori > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/10/31 9:37
css変更してうまくいきませんでしたか?
私はChromeの検証機能で上記入力して確認しただけですが、うまくいったのですが…
モニターサイズ毎に変えられるのであればそれで良いかと思いますが…(;^_^A

スマホなどの画面で切り替わらないのはこのテーマの仕様のようですが、
それもCSSでコントロールしている事なので対応はできます。

ちなみにdefault.php内にスマホ用のトップ画を指定するコードが書かれています。
そちらを確認し、コードを消すなり書き換えるか、該当するcssをいじるかすればよろしいかと。

■ BaserCMSのバージョン:4.1.3
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用:OFF
■ 設置フォルダ:サブフォルダ
■ 利用しているデータベース:MySQL
■ PHPスキル:D

yokochan > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/1 10:47
Nori様

ご連絡ありがとうございます。
返信が遅くなり失礼致しました。

cssで幅を変えてみたのですが上手くいきませんでした。

スマホ用のトップ画の件、ありがとうございます。
教えて頂いたphpファイルの確認と、もう一度CSSファイルを見直してみます。

ありがとうございます。
exit > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/14 11:30
私も同じところで彷徨っております。
css/phpなどファイルをみて変更しても治りませんでした。
またviewpointなどを入れてみても直りません。。。
結構困っています。。。

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
//iPhone、iPod、Androidの設定
document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">');
}else{
//それ以外(PC、iPadなど)の設定
document.write('<meta name="viewport" content="width=910,initial-scale=1.0,minimum-scale=1.0">');
}
</script>

記載したveiwpointは上記になります。
layoutの<head>内に追記しました。
tommy6073 > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/15 11:05
こんにちは、tommy6073です。

bcColumnのレスポンシブ対応ですが、メディアクエリーが @media screen and (max-width: 640px) のみとなっており、
例えばiPhone 7などの横向きの幅 (667) に対応するためにはその辺りも含めてかなりの改修が必要になるかと思います。

参考:
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551

解答とはなっていませんが、bcColumnの仕様としてご参考になればと思います。
ログイン
ユーザー名:
パスワード:


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

検索

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

フォーラムガイド


関連リンク

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

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