# フォームブリッジのロゴについて

**URL:** <https://community.cybozu.dev/t/topic/3666>\
**Category:** kintone 開発相談\
**Created:** [2018 年 12 月 27 日午後 12:40 UTC](https://community.cybozu.dev/t/topic/3666 "2018-12-27T12:40:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account266](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account266](https://community.cybozu.dev/u/Legacy_Account266)\
**Post date:** [2018 年 12 月 27 日午後 12:40 UTC](https://community.cybozu.dev/t/topic/3666/1 "2018-12-27T12:40:02Z")

</div>

お世話になっております。

フォームブリッジのロゴをPCとスマホそれぞれに最適化したいです。  
カスタマイズ方法等あれば教えて下さい。（※JS,CSSともに初心者です）

よろしくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account266](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account266](https://community.cybozu.dev/u/Legacy_Account266)\
**Post date:** [2019 年 1 月 7 日午前 8:38 UTC](https://community.cybozu.dev/t/topic/3666/2 "2019-01-07T08:38:42Z")

</div>

ロゴのスマホ最適化はできました。

img {  
width:100%;  
max-width: 100%;  
height: auto;  
}

ただ、PCで見ると、左に寄ってしまいます。  
こちらを中央に表示させることはできますでしょうか。

教えてください。

宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account916](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@Legacy\_Account916](https://community.cybozu.dev/u/Legacy_Account916)\
**Post date:** [2019 年 1 月 8 日午前 3:20 UTC](https://community.cybozu.dev/t/topic/3666/3 "2019-01-08T03:20:30Z")

</div>

Cstapです。

&nbsp;

メディアクエリというものを使うと実現できます。

スマホの様にスクリーンの幅が狭い時にCSSを適用させたい場合、例えば以下のように記述します。

```
@media (max-width: 414px) { img { width:100%; max-width: 100%; height: auto; }}

```

メディアクエリについては、

[https://developer.mozilla.org/ja/docs/Web/CSS/Media\_Queries/Using\_media\_queries#Media\_types](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types)

こういったサイトが参考になります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account266](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account266](https://community.cybozu.dev/u/Legacy_Account266)\
**Post date:** [2019 年 1 月 8 日午前 4:27 UTC](https://community.cybozu.dev/t/topic/3666/4 "2019-01-08T04:27:05Z")

</div>

syunta様

ご回答ありがとうございます。  
こちらで出来ました！

ちなみに、もう１点質問させていただきました、  
下記の件についてもご教授頂けると幸いです。

＞ロゴがPCで見ると、左に寄ってしまいます。  
＞こちらを中央に表示させることはできますでしょうか。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account916](https://avatars.discourse-cdn.com/v4/letter/l/3e96dc/32.png) [@Legacy\_Account916](https://community.cybozu.dev/u/Legacy_Account916)\
**Post date:** [2019 年 1 月 8 日午前 5:16 UTC](https://community.cybozu.dev/t/topic/3666/5 "2019-01-08T05:16:17Z")

</div>

```
.fb-header > a { margin: 0 auto;}

```

カスタマイズで上記のような css を読み込ませれば可能かと思います。

.fb-header というクラスはフォームブリッジの主要構成要素にデフォルトで付与されるのでご活用ください。

[https://form.kintoneapp.com/help/customize](https://form.kintoneapp.com/help/customize)

タイトルの時と中央寄せの方法が異なるのはCSSにはブロック要素とインライン要素というものがあるためです。

[https://developer.mozilla.org/ja/docs/Web/HTML/Inline\_elements](https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements)

こういったサイトが参考になります。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account266](https://avatars.discourse-cdn.com/v4/letter/l/eada6e/32.png) [@Legacy\_Account266](https://community.cybozu.dev/u/Legacy_Account266)\
**Post date:** [2019 年 1 月 8 日午前 8:13 UTC](https://community.cybozu.dev/t/topic/3666/6 "2019-01-08T08:13:42Z")

</div>

syunta様

ご回答ありがとうございます。  
こちらで出来ました！

大変助かりました！  
ありがとうございました。