yokochan > bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/10/27 22:11
大変お世話になります。スマートフォンをヨコにした場合に、背景が切れてしまいます。ヘッダー部分と同じように、横幅いっぱいに表示するようにしたいです。ちなみに、背景は画像（800×200）です。宜しくお願い致します。 ■ BaserCMSのバージョン：baserCMS 4.1.3 ■ テーマ（４系）bccolumn ■ レンタルサーバー名：ロリポップ ■ スマートURLの利用：　[OFF] ■ 設置フォルダ：　[ドキュメントルート] ■ PHPスキル（自己評価）：　 E

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

大変お世話になります。

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

宜しくお願い致します。

■ BaserCMSのバージョン：baserCMS 4.1.3
■ テーマ（４系）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

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の仕様なのでしょうか。重ねてすみません。

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

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

css変更してうまくいきませんでしたか？
私はChromeの検証機能で上記入力して確認しただけですが、うまくいったのですが…
モニターサイズ毎に変えられるのであればそれで良いかと思いますが…(;^_^A

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

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

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>内に追記しました。

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の仕様としてご参考になればと思います。

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の仕様としてご参考になればと思います。

exit > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/22 15:00
解決されましでしょうか？私も同じところで悩んでおります。。。 htmlやcssを触ってもても改善が見られず途方に暮れています・・・フォーラム内を探してみましたがscriptにより解決された方がいましたが同じ構文を入れてみても解決されず。。。困っています。

tommy6073 > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/26 11:30
一定範囲の幅において、bodyの幅が画面全体に対して足りていないことによる問題のようなので、以下のコードを theme/bccolumn/css/common.css に書くことで対応できました。 `@media screen and (min-width: 640px) and (max-width: 1200px){ body { width: 1200px; } }` 応急処置であるため別の問題が起こる可能性もありますが、お試しください。

tommy6073 > Re: bccolumnのテーマで上タイトル部分と下マップ部分の表示について。 @ 2018/11/26 11:30

一定範囲の幅において、bodyの幅が画面全体に対して足りていないことによる問題のようなので、
以下のコードを theme/bccolumn/css/common.css に書くことで対応できました。


@media screen and (min-width: 640px)  and (max-width: 1200px){
	body {
		width: 1200px;
	}
}

応急処置であるため別の問題が起こる可能性もありますが、お試しください。

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

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

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

キーワード検索