■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

ロゴがCromeで小さく見える

sam > ロゴがCromeで小さく見える @ 2016/4/4 9:40
こんにちは!以下のご相談よろしくお願いいたします。
テーマをBCCOLORSで制作しています。
ロゴの事なんですけど logo.png をconpany name の入っているところに自作の画像をlogo.pngとしてFFFTPで
アップしました。うまくアップできて会社名は変更できたのですが。大きさは500px-88pxです
googleCromeでみると思ったより小さく見えるのです。IEではちゃんと見えています。。fire foxでもちゃんと見えています。
スマホだとそれほど気にならないのですがCromeだけ横幅300Pxくらいに見えるのです。
でも、そのクリックして画像を保存すると、データは500-88になっているんです。。小さくはなっていません。
いつも作業はCromeでするので気になってしかたありません。他のテーマではそんなことなく表示されているんですが。。
よろしくお願いいたします。

■ BaserCMSのバージョン:3.0.15
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [ON ]
■ 設置フォルダ: [ドキュメントルート / メインフォルダ]
■ 利用しているデータベ

beychan > Re: ロゴがCromeで小さく見える @ 2016/4/5 10:43
samさん

こんにちは。

引用:
googleCromeでみると思ったより小さく見えるのです。IEではちゃんと見えています。。fire foxでもちゃんと見えています。
スマホだとそれほど気にならないのですがCromeだけ横幅300Pxくらいに見えるのです。


こちらはchromeの場合にロゴだけが小さく見えるのでしょうか、それともWebサイト全体が小さく見えるのでしょうか?

よろしければchromeとchrome以外のブラウザの両方のスクリーンキャプチャを投稿してもらえると、何か分かるかもしれません。

よろしくお願いします。
sam > Re: ロゴがCromeで小さく見える @ 2016/4/5 11:31
beychanさん!ありがとうございます。。

添付します。

Cromeだけかなり小さくなるんです。よろしくお願い致します。

URLも掲載しておきます
http://okayamatent.com/

■ BaserCMSのバージョン:3.0.15
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [ON ]
■ 設置フォルダ: [ドキュメントルート / メインフォルダ]
■ 利用しているデータベ

hanhunhun > Re: ロゴがCromeで小さく見える @ 2016/4/5 16:07
samさん

こんにちは、

ざっと見る限りテーマフォルダのstyle.cssのimgに指定してるmax-widthが悪さしてるみたいですね、、、、

max-widthで指定する理由がないのであればこれを外してみてはいかがですか?

■ BaserCMSのバージョン:3.0.9
■ レンタルサーバー名:ローカル
■ 設置フォルダ: C/MAMP/htdocs
■ 利用しているデータベース:MySQL
■ PHPスキル(自己評価):多分できない

sam > Re: ロゴがCromeで小さく見える @ 2016/4/5 20:09
引用:
samさん

こんにちは、

ざっと見る限りテーマフォルダのstyle.cssのimgに指定してるmax-widthが悪さしてるみたいですね、、、、

max-widthで指定する理由がないのであればこれを外してみてはいかがですか?


hanhunhunさん

ありがとうございます。あまりCSSも詳しくないので、修正箇をみたのでけどわかりませんでした。。ご迷惑をお掛けします。

■ BaserCMSのバージョン:3.0.15
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [ON ]
■ 設置フォルダ: [ドキュメントルート / メインフォルダ]
■ 利用しているデータベ

katokaisya > Re: ロゴがCromeで小さく見える @ 2016/4/6 11:09
はじめましてkatoと申します。
ChromeだけでなくSafariでも同様の現象が起きるようです。
対策として、メディアクエリでPC版の時のロゴの親要素の幅を指定すれば、とりあえずレスポンシブの機能を残したまま解決できます。
今回のロゴマークの画像の大きさが508pxなので
bccollors/css/style.css
の一番下の行に
@media screen and (min-width: 640px) {
	#Header h1 {
	 width: 508px;
     }
}

を追加してあげれば、PCの時には508pxのロゴマークが表示され、スマホなどでは画面の横幅のロゴマークが表示されます。
sam > Re: ロゴがCromeで小さく見える @ 2016/4/7 16:30
katoさん。ありがとうございます。

CSSの一番下にコード追加したのですけど。。変化しません、サーバーキャッシュも。。Cromeの履歴も削除したのですが。。?
新しく、テーマダウンロードして、その中のCSSについかしたのですが。。すみません!おかしいですね!
もう一度して報告させてもらいます
@media screen and (min-width: 640px) {
	#Header h1 {
	 width: 508px;
     }
}



最後はこのコードです。やはり変化しませんでした。。すみません


.more-link a {
	padding: 4px 40px 4px 20px;
	background: #000 url(../img/common/icon_arrow.png) 85% center no-repeat;
	color: #fff !important;
	font-family: "Century Gothic", Tahoma, Geneva, sans-serif;
	font-size: 13px; font-size: 1.3rem;
}
@media screen and (min-width: 640px) {
	#Header h1 {
	 width: 508px;
     }
}

■ BaserCMSのバージョン:3.0.15
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [ON ]
■ 設置フォルダ: [ドキュメントルート / メインフォルダ]
■ 利用しているデータベ

katokaisya > Re: ロゴがCromeで小さく見える @ 2016/4/8 11:02
こんにちは。
同じBCCOLORSを使ってbccollors/css/style.cssの一番下の行で#Header h1の幅を指定することで、解決できたのですが、
samさんのサイト内では何故かうまく機能しないようですね。
(すみません。修正箇所も修正内容も合っており、同じ方法で他のサイトでは解決できたのですが・・・)


今回のケースでは隣合う要素のDescriptionの文字数が少ないため、ここの横幅を縮めることで対応は可能です。
同じstyle.cssの249行目から始まるHeaderの指定のところの#Descriptionの横幅指定70%を無効にすれば今回のケースは解決できます。
(レスポンシブルの機能は残ったままで行けます。)

/* Header
-------------------- */
#Header h1 {
	float: left;
	margin: 5px 0;
}
#Header #Description {
	display: table-cell;
	/* width: 70%; */
	padding-right: 10px;
	color: #999;
	vertical-align: middle;
	text-align: right;
	line-height: 1.5;
}




sam > Re: ロゴがCromeで小さく見える @ 2016/4/9 6:07
katokaisya さんありがとうございます。

無事解決しました。

/* width: 70%; */

これを修正したら。Cromeも同じサイズにみえるようになりました。お手間取らせて、ありがとうございました。

大変勉強になりました。。またよろしくお願い致します

■ BaserCMSのバージョン:3.0.15
■ レンタルサーバー名:ロリポップ
■ スマートURLの利用: [ON ]
■ 設置フォルダ: [ドキュメントルート / メインフォルダ]
■ 利用しているデータベ

ログイン
ユーザー名:
パスワード:


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

検索

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

フォーラムガイド


関連リンク

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

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