カスタムスタイル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
必要に応じて、これらのスタイルをオーバーライドし、アプリにより適したルックアンドフィールを作成することができます。スタイルをオーバーライドするには、スタイル全体をプロジェクトの `styles.xml` ファイルにコピーし、変更を加えます。すべての属性が正しく設定されるようにするには、スタイル全体をローカルの `styles.xml` にコピーする必要があります。

<ul class="ab-nav ab-nav-tabs tab_toggle_only_ul" id="tab_nkkcxmppwram_nav">
    <li class="coderow correct-style-override active"><a class="tab_toggle_only" data-tab-target="tab_nkkcxmppwram" data-tab="correct-style-override">correct style override</a></li>
    <li class="coderow incorrect-style-override"><a class="tab_toggle_only" data-tab-target="tab_nkkcxmppwram" data-tab="incorrect-style-override">incorrect style override</a></li>
</ul>
<div id="tab_nkkcxmppwram" class="ab-tab-content tab_toggle_only_div">

<div class="ab-tab-pane correct-style-override_tab " data-tab="correct style override"><p>```xml</p>
<style name="Braze.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
  <item name="android:divider">@android:color/transparent</item>
  <item name="android:dividerHeight">16.0dp</item>
  <item name="android:paddingLeft">12.5dp</item>
  <item name="android:paddingRight">5.0dp</item>
  <item name="android:scrollbarStyle">outsideInset</item>
</style>

<p>```</p></div>
<div class="ab-tab-pane incorrect-style-override_tab " data-tab="incorrect style override"><p>```xml</p>
<style name="Braze.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
</style>

<p>```</p></div>

</div>


## フィードのスタイル要素

以下は、テーマ化可能な Braze UI 要素と、スタイル設定を目的としたその名前の説明です。

<div class='swiper swiper-container' id='gallery_ojanscscwogv'><div class='swiper-wrapper'>
<div class='swiper-slide'><img class='swiper-image swiper-popover' src='/docs/ja/assets/img_archive/Image27Theming.png?26688ef0447f5d155a4e7d69b58df7a2'/>
<div class='swiper-description'>
</div></div>
<div class='swiper-slide'><img class='swiper-image swiper-popover' src='/docs/ja/assets/img_archive/Image28Theming.png?7703804209e74ff2c15fbe0eaa043999'/>
<div class='swiper-description'>
</div></div>
<div class='swiper-slide'><img class='swiper-image swiper-popover' src='/docs/ja/assets/img_archive/Image29Theming.png?4afb17d155574349152ce60c72da4cae'/>
<div class='swiper-description'>
</div></div>
<div class='swiper-slide'><img class='swiper-image swiper-popover' src='/docs/ja/assets/img_archive/Image30Theming.png?ef52020c2725a9cf9147986c17669e39'/>
<div class='swiper-description'>
</div></div>
</div><div class='swiper-pagination'></div><div class='swiper-button-next'></div><div class='swiper-button-prev'></div></div>
<script type='text/javascript'>let swiper = new Swiper('#gallery_ojanscscwogv', {slidesPerView: 'auto',spaceBetween: 30,loop: false, pagination: { el: '.swiper-pagination', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}});</script>

## カスタムフォントの設定

Braze では、[フォントファミリガイド][40]を使用してカスタムフォントを設定することができます。これを使用するには、カードのスタイルをオーバーライドし、`fontFamily` 属性を使用してカスタムフォントファミリを使用するように Braze に指示します。

たとえば、短いニュースカードのすべてのタイトルのフォントを更新するには、`Braze.Cards.ShortNews.Title` スタイルをオーバーライドし、カスタムフォントファミリを参照します。属性値は、`res/font` ディレクトリのフォントファミリを指す必要があります。

以下は、最後の行でカスタムフォントファミリ `my_custom_font_family` が参照されている部分的なコード例です。

\`\`\`
<style name="Braze.Cards.ShortNews.Title">
  <item name="android:layout_height">wrap_content</item>
  ...
  <item name="android:fontFamily">@font/my_custom_font_family</item>
  <item name="fontFamily">@font/my_custom_font_family</item>
</style>