ios theme guide jp...
TRANSCRIPT
-
オリジナルテーマを制作 テーマファイルを制作する場合、以下の⼿手順に従ってください。
1.サンプルテーマファイルのダウンロード iPhone のカカオトークテーマは、CSS フォーマットを拡張して設計されており、iOS 既定のプロパティに応じて該当スタイルを記述して適⽤用するように設計されています。
[カカオトークホームページ > カカオトークユーザーテーマ]より zip ファイルのカカオトークサンプルテーマを提供し
ております。 ご希望のサンプルテーマをダウンロードしてください。
* CSS:Web ⽂文書の全般的なスタイルをあらかじめ保存しておくスタイルシート
2.カカオトークテーマの設定内容と注意事項 (1) KakaoTalk.css:各スタイルごとに定義されたタイプの画像と、レイアウトやテキストの⾊色などを記述します。 ファイル名は固定で、変更更するとテーマが正常に適⽤用されません。
(2) .png ファイル(Images ディレクトリに含まれる画像):CSS で記述された画像ファイル iPhone 3gs 解像度度の画像と iPhone4 以降降の⾼高解像度度画像の両⽅方が必要です。 Retina⽤用の画像の場合、同じファイル名に@2x を追加します。
例例)⼀一般(3gs ⽤用)画像ファイル名が bg.png なら? iphone 3gs ⽤用画像名:bg.png iphone4、4s(Retina)の画像名:[email protected]
(3) KakaoTalk.css と Images ディレクトリを圧縮した zip ファイル形式のファイルを使⽤用して、必ず拡張⼦子は.ktheme に変更更する必要があります。 ファイルの拡張⼦子を.ktheme にしていない場合、アプリが認識識できません。
3. 変更更可能なリソースの種類(サンプル基準)
テーマ機能を利利⽤用して変更更できるカカオトークのリソース(画像や⾊色)は以下のとおりです。 * 下記の表は、カカオトークサンプルテーマを基準に制作されており、変更更できる全てのリソースは 7.参照をご確認く
ださい。
種類 スタイル名 要素 説明
ナビゲーションバー
(上部タイトル)
NavigationBarStyle1
(上部タイトル背景)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 45px 固定)
NavigationItemTitleStyle1
(上部タイトルカラー)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
-
ButtonStyle7-‐‑‒1
(上部タイトル右側ボタン)
-‐‑‒ios-‐‑‒background-‐‑‒image ボタン背景画像
(縦 29px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
ButtonStyle7-‐‑‒2
(上部タイトル右側ボタン⾮非活性化状態)
-‐‑‒ios-‐‑‒background-‐‑‒image ボタン背景画像
(縦 29px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒alpha テキストカラー透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
ButtonStyle6-‐‑‒1
(上部タイトル左側(Back)ボタン)
-‐‑‒ios-‐‑‒background-‐‑‒image ボタン背景画像
(縦 29px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
ButtonStyle7-‐‑‒3
(上部タイトル右側ボタン活性化状態)
-‐‑‒ios-‐‑‒background-‐‑‒image ボタン背景画像
(縦 29px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
タブバー
(下部タブ領領域)
TabBarTitleStyle1
(テキストカラー)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color タブ選択時のテキストカラー
-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒alpha タブ選択時のテキスト透明度度
-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒color タブ選択時のテキスト shadow カラー
-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒alpha タブ選択時のテキスト shadow 透明度度
-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒offset タブ選択時のテキスト shadow ⽅方向
TabBarItemStyle1
(タブバー画像)
-‐‑‒ios-‐‑‒background-‐‑‒image タブバーボタン背景画像
(320x49 サイズに固定)
-‐‑‒ios-‐‑‒selection-‐‑‒indicator-‐‑‒image タブバーの選択タブ画像
(78x44 サイズに固定)
-‐‑‒ios-‐‑‒friends-‐‑‒normal-‐‑‒icon-‐‑‒image カカともタブアイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒chats-‐‑‒normal-‐‑‒icon-‐‑‒image トークバーアイコン画像
(30x30 に固定)
-
-‐‑‒ios-‐‑‒recommendees-‐‑‒normal-‐‑‒icon-‐‑‒
image
おすすめバーアイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒more-‐‑‒normal-‐‑‒icon-‐‑‒image その他タブアイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒friends-‐‑‒selected-‐‑‒icon-‐‑‒image カカともタブ選択アイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒chats-‐‑‒selected-‐‑‒icon-‐‑‒image トークバー選択アイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒recommendees-‐‑‒selected-‐‑‒icon-‐‑‒
image
おすすめバー選択アイコン画像
(30x30 に固定)
-‐‑‒ios-‐‑‒more-‐‑‒selected-‐‑‒icon-‐‑‒image その他タブ選択アイコン画像
(30x30 に固定)
カカともリスト BackgroundStyel3
(カカともリスト背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
(960x960 サイズ勧奨)
SearchBarStyle1
(検索索バー)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 44px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒
background-‐‑‒image
検索索⼊入⼒力力欄背景画像
(縦 31px 固定)
-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒leftview-‐‑‒
image
検索索アイコン
(15x15 サイズ固定)
TableViewSectionHeaderStyle1
(カカともリストセクションタイトル領領
域)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
-‐‑‒ios-‐‑‒text-‐‑‒margin テキスト余⽩白位置
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
TableViewCellStyle1-‐‑‒1
(カカともリストセル領領域)
border-‐‑‒color セル領領域下部 Border カラー
-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color セル領領域背景カラー
-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒alpha セル領領域背景カラー透明度度
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒color セル選択時の領領域背景カラー
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha セル選択時の領領域背景カラー透明度度
-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒color 新しいカカともセル領領域背景カラー
-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒alpha 新しいカカともセル領領域背景カラー透
明度度
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color セル選択時のテキストカラー
-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒background-‐‑‒
image
状態メッセージ背景画像
-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒color 状態メッセージテキストカラー
-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒
edgeinsets
状態メッセージテキスト領領域上下左右
の余⽩白調整値
トークリスト BackgroundStyle4
(トークリスト背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
(960x960 サイズ勧奨)
TableViewCellStyle2-‐‑‒1 border-‐‑‒color セル領領域下部 Border カラー
-
(トークリストセル領領域) -‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color セル領領域背景カラー
-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒alpha セル領領域背景カラー透明度度
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒color セル選択時の領領域背景カラー
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha セル選択時の領領域背景カラー透明度度
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color セル選択時のテキストカラー
-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒color 時間テキストカラー
-‐‑‒ios-‐‑‒detail-‐‑‒text-‐‑‒color 最後のメッセージテキストカラー
DefaultProfileStyle1
(トークルームサムネイル画像)
-‐‑‒ios-‐‑‒profile-‐‑‒small-‐‑‒image 1:1 トークルームサムネイル画像
(32x32 サイズに固定)
-‐‑‒ios-‐‑‒groupchat-‐‑‒small-‐‑‒image グループトークルームサムネイル画像
(32x32 サイズに固定)
-‐‑‒ios-‐‑‒profile-‐‑‒large-‐‑‒image ⼤大きいサムネイル画像
(110x110 サイズに固定)
おすすめリスト BackgroundStyel6
(カカともリスト背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
TableViewSectionHeaderStyle2 -‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
-‐‑‒ios-‐‑‒text-‐‑‒margin テキスト余⽩白位置
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
その他 MoreBackgroundStyle1
(カカともリスト背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
(960x960 サイズ勧奨)
MoreCellStyle1
(その他セル領領域)
border-‐‑‒color セル領領域下部 Border カラー
-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color セル領領域背景カラー
-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒alpha セル領領域背景カラー透明度度
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒color セル選択時の領領域背景カラー
-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha セル選択時の領領域背景カラー透明度度
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color セル選択時のテキストカラー
MoreIconSetStyle1
(その他アイコン)
-‐‑‒ios-‐‑‒account-‐‑‒icon-‐‑‒image カカオアカウントアイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒notice-‐‑‒icon-‐‑‒image お知らせアイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒settings-‐‑‒icon-‐‑‒image 設定アイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒giftshop-‐‑‒icon-‐‑‒image ギフトショップアイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒itemstore-‐‑‒icon-‐‑‒image アイテムストアアイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒plusfriend-‐‑‒icon-‐‑‒image Plus カカともアイコン
(36x35 に固定)
-‐‑‒ios-‐‑‒gamecenter-‐‑‒icon-‐‑‒image ゲームアイコン
(36x35 に固定)
-
トークルーム BackgroundStyle5
(トークルーム背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
(960x960 サイズ勧奨)
ChatMessageCellStyle1
(⾃自分の吹き出し)
-‐‑‒ios -‐‑‒background-‐‑‒image 背景画像
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets テキスト領領域余⽩白調整
-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets 画像領領域余⽩白調整
ChatMessageCellStyle2
(相⼿手の吹き出し)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets テキスト領領域余⽩白調整
-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets 画像領領域余⽩白調整
ChatMessageCellUserNameLabelStyle
1
(相⼿手の吹き出しの名前)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
ChatInputBarStyle1
(メッセージ⼊入⼒力力欄)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(320x38 サイズに固定)
-‐‑‒ios-‐‑‒plus-‐‑‒icon-‐‑‒image +ボタン画像
(26x28 サイズに固定)
-‐‑‒ios-‐‑‒emoticon-‐‑‒icon-‐‑‒image 絵⽂文字ボタン画像
(26x28 サイズに固定)
-‐‑‒ios-‐‑‒keyboard-‐‑‒icon-‐‑‒image キーボードボタン画像
(26x28 サイズに固定)
ChatInputBarSendButtonNormalStyle
1
(送信ボタン Normal/活性化状態)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 28px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
–ios-‐‑‒title-‐‑‒edgeinsets タイトル領領域余⽩白調整値
ChatInputBarSendButtonDisableStyle
1
(送信ボタン Disable/⾮非活性化状態)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 28px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
–ios-‐‑‒title-‐‑‒edgeinsets タイトル領領域余⽩白調整値
ミニプロフィール MiniProfileBackgroundStyle1
(ミニプロフィール背景)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 224px 固定)
MiniProfileMenuBarBackgroundStyle1
(ミニプロフィールメニューバー背景)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 54px~∼100px 間に固定)
MiniProfileUserNameLabelStyle1
(ミニプロフィールユーザー名)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
MiniProfileStatusMessageLabelStyle1
(ミニプロフィールステータスメッセー
ジ)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
MiniProfilePhoneNumberButtonStyle1
(ミニプロフィール電話番号ボタン)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 25px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
MiniProfileButtonStyle1
(ミニプロフィール下部ボタン)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 44px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
MiniProfilePlusFriendHomeButtonStyl
e1
(ミニプロフィール Plus カカともホーム
へボタン)
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(128x38 サイズ固定)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image ⽮矢印画像
(7x11 サイズ固定)
MiniProfilePlusFriendCountStyle1
(Plus カカともミニプロフィールカカと
もの数)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒background-‐‑‒image 背景画像
(縦 21px 固定)
MiniProfileMenuBarAccessoryStyle1
(ミニプロフィールメニューバー右側メ
ニューボタン)
-‐‑‒ios-‐‑‒gift-‐‑‒icon-‐‑‒image ギフトショップアイコン画像
(36x54 サイズに固定)
-‐‑‒ios-‐‑‒favorite-‐‑‒on-‐‑‒icon-‐‑‒image お気に⼊入り Onアイコン画像
(36x54 サイズに固定)
-‐‑‒ios-‐‑‒favorite-‐‑‒off-‐‑‒icon-‐‑‒image お気に⼊入り Off アイコン画像
(36x54 サイズに固定)
-‐‑‒ios-‐‑‒edit-‐‑‒icon-‐‑‒image 編集アイコン画像
(36x54 サイズに固定)
-‐‑‒ios-‐‑‒close-‐‑‒icon-‐‑‒image 閉じるアイコン画像
(36x54 サイズに固定)
パスワード PasscodeBackgroundStyle1
(パスワード画⾯面背景)
-‐‑‒ios-‐‑‒background-‐‑‒image または、
background-‐‑‒color
背景画像 or 背景カラー
(960x960 サイズ勧奨)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
PasscodeDescLabelStyle1
(案内⽂文テキスト)
-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color テキスト shadow カラー
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha テキスト shadow 透明度度
-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset テキスト shadow ⽅方向
PasscodeBulletAndKeypadStyle1
(パスワードボックス)
-‐‑‒ios-‐‑‒bullet-‐‑‒image ⼊入⼒力力時 Dot 画像
(55x54 サイズに固定)
-
-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image Input ボックス画像
(55x54 サイズに固定)
PasscodeBulletAndKeypadStyle1
(キーパッド画像,Normal 状態)
-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒normal-‐‑‒
image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒
normal-‐‑‒image
Normal 状態時の数字 0~∼9 キーパッ
ド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒normal-‐‑‒image Normal 状態時の削除キーパッド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒normal-‐‑‒image Normal 状態時のキャンセルキーパッ
ド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒normal-‐‑‒image Normal 状態時の空⽩白キーパッド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒highlight-‐‑‒
image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒
normal-‐‑‒image
Pressed 状態時の数字 0~∼9 キーパッ
ド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒highlight-‐‑‒image Pressed 状態時の削除キーパッド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒highlight-‐‑‒image Pressed 状態時のキャンセルキーパッ
ド
(110x54 サイズに固定)
-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒highlight-‐‑‒image Pressed 状態時の空⽩白キーパッド
(110x54 サイズに固定)
4. CSS キー値の定義
カカオトークで使⽤用される各スタイル別に定義された CSS キー値です。
区分 適⽤用部分 例例
-‐‑‒ios-‐‑‒(prefix)-‐‑‒image 背景イメージ
(画像を伸ばして使⽤用する場合、基準
点を明⽰示)
tip:0px、0px に明⽰示する場合は、
画像を基準点から伸ばさずに拡⼤大処
理理
-‐‑‒ios-‐‑‒background-‐‑‒image:
url('default.png');
-‐‑‒ios-‐‑‒background-‐‑‒image:
url('btn_̲2_̲yellow_̲u.png') 40px
0px;
background-‐‑‒color 背景の⾊色 background-‐‑‒color: #65464b;
border-‐‑‒color テーブルセル下部の Border の⾊色 border-‐‑‒color: #bbe4d5;
-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒color ⽂文字の⾊色 -‐‑‒ios-‐‑‒text-‐‑‒color: #ffffff;
-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒alpha ⽂文字の透明度度(0.0〜~1.0) -‐‑‒ios-‐‑‒text-‐‑‒alpha: 0.2;
-‐‑‒ios-‐‑‒(prefix)-‐‑‒text-‐‑‒shadow-‐‑‒offset ⽂文字の shadow の座標(x,y) -‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset: 1px 1px;
-
区分 適⽤用部分 例例
-‐‑‒ios-‐‑‒(prefix)-‐‑‒edgeinsets ボタンタイトル領領域の余⽩白の⼤大きさ
(top,left,bottom,right)
-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets: 1px 1px 1px
1px;
-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets: 5px 6px
6px 10px;
-‐‑‒ios-‐‑‒(prefix)-‐‑‒margin テーブルセルのセクションヘッダー
領領域の余⽩白の⼤大きさ
-‐‑‒ios-‐‑‒text-‐‑‒margin: 15px 0px;
5. テーマを修正する
サンプルテーマをダウンロードした後、拡張⼦子を*.ktheme から zip に変更更すると、圧縮を解凍することができます。
該当パッケージの圧縮を解凍した後、CSS ファイルと Images ディレクトリで構成されていることを確認するこ
とができます。テーマを制作したり、配布時にも変更更後の zip ファイルに圧縮した後、拡張⼦子を.ktheme に変更更
するとテーマが正常に適⽤用されますのでご注意ください。
(1) テーマ名を変更更する KakaoTalk.css ファイルの最上段にあるManifestStyle の要素にテーマ名、テーマのバージョン、テーマの URL、作
者名など、⾚赤い⾊色で表⽰示された部分を⾃自分が制作したテーマに合わせて編集します。 その要素は、カカオトークアプリの「その他>設定>テーマ設定」画⾯面でそのまま表⽰示されます。
ManifestStyle
{
-‐‑‒kakaotalk-‐‑‒theme-‐‑‒name: url('softwork テーマ');
-‐‑‒kakaotalk-‐‑‒theme-‐‑‒version: url('1.0.0');
-‐‑‒kakaotalk-‐‑‒theme-‐‑‒url: url('http://www.kakao.com');
-‐‑‒kakaotalk-‐‑‒author-‐‑‒name: url('Kakao Corp.');
}
(2) 画像を修正する 上部のリソース表を参考に、変更更する画像を同じファイル名で置き換えることができます。
-
iPhone の拡⼤大可能な画像を使⽤用する⽅方法 (a) stretchable image -‐‑‒ css に座標を記述するときは、3gs のサイズ基準に記述します。 伸ばすことができる画像として代表的な例例が、チャット吹き出しです。画像サイズを最⼩小にでき、アプリの容量量も削減してくれるなど、Android の 9-‐‑‒patch と同様の概念念です。最低サイズの⼀一つのイメージで様々なサイズの表現が可能であり、座標を指定すれば、その点以外の空間は固定され、指定した座標に対応する画像領領域のみ増加します。 •座標を縦、横両⽅方指定した場合:そのような場合は、吹き出しのみ該当し、吹き出しの中に⼊入るコンテンツの量量に応じて上下左右⼤大きくなります。
座標を⽚片⽅方だけ指定した場合:通常横サイズのみの数値を⼊入⼒力力して縦サイズを 0に⼊入⼒力力すると固定されるので、画像が⽔水平⽅方向にのみ増加します。
座標を指定しない場合(縦サイズを強制する場合):座標を⼊入⼒力力しなくても、該当イメージの中央 1px を増す領領域として認識識して増やします。⽔水平⽅方向にのみ増えて、縦サイズは必ず提⽰示したサイズで画像を制作する必要があります。
-
(b) 吹き出しのテキスト領領域
•増やせる座標とは別に、吹き出しの中にテキストがバランスよく⼊入るように、テキストエリアを指定する必要あります。テキストと吹き出しのマージンが上下左右のバランスをとれるように指定することを推奨します。
6. テーマを適⽤用する
Safari で適⽤用する
(a) テーマの変更更が完了了した後、KakaoTalk.css ファイルと画像ファイルを zip ファイルに圧縮します。
(b) zip ファイルの拡張⼦子を.ktheme に変更更します。
(c) ktheme で圧縮されたパッケージファイルを、外部からダウンロードできるようにします。(例例:Naver、Daum or 個⼈人のブログなど)
(d) アップロードした URL を Safari のアドレスバーに⼊入⼒力力または、アップロードされたファイルをクリックすると「カカオトークから開く」ボタンが有効になります。
-
(f) 「カカオトークから開く」ボタンを押して、カカオトークを実⾏行行すると該当テーマがインストールされます。
-
7. 参照
テーマスタイル全体 Spec
区分 要素 説明
ManifestStyle -‐‑‒kakaotalk-‐‑‒theme-‐‑‒name-‐‑‒kakaotalk-‐‑‒theme-‐‑‒
version-‐‑‒kakaotalk-‐‑‒theme-‐‑‒url-‐‑‒kakaotalk-‐‑‒author-‐‑‒
name
テーマに対する基本情報(テ
ーマ⼀一覧に表⽰示)
(テーマ名、バージョン、
URL、作者名)
BackgroundStyle -‐‑‒ios-‐‑‒background-‐‑‒image(960x960 サイズ勧奨) 画⾯面の背景画像
LabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
offset-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
alpha
⽂文字列列のスタイル指定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
ButtonStyle -‐‑‒ios-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒text-‐‑‒color -‐‑‒ios-‐‑‒text-‐‑‒
alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets
ボタンのスタイル指定
(背景画像、⽂文字の⾊色、⽂文字
の透明度度、Shadow のスタイ
ル、⽂文字の余⽩白)
TextFieldStyle -‐‑‒ios-‐‑‒background-‐‑‒image(TextFieldStyle1 : 縦
54px 固定)(TextFieldStyle2 : 縦 45px 固定)
-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha
⼊入⼒力力フィールドのスタイル指
定
-‐‑‒ 例例)名前、ステータスメッ
セージなど⼀一⾏行行に該当する⽂文
字列列の⼊入⼒力力部分
(背景画像、⽂文字の⾊色)
SearchBarStyle -‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒background-‐‑‒image(縦 44px 固定)
-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒background-‐‑‒image(縦
31px 固定)
-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒leftview-‐‑‒image(15x15
サイズ固定)
検索索バーのスタイルを指定
-‐‑‒ 例例)カカとも検索索⼊入⼒力力部分
(⽂文字の⾊色、背景画像、⼊入⼒力力
フィールドの背景画像、アイ
コンの画像)
-
TableViewStyle -‐‑‒ios-‐‑‒table-‐‑‒separator-‐‑‒color グループスタイルのテーブル
ビューBorder ⾊色指定
-‐‑‒ 例例)カカともリスト、トー
クリスト、設定など
(border の⾊色、border スタ
イル)
TableViewCellStyle border-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒
highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒
detail-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒detail-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒detail-‐‑‒
highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒detail-‐‑‒highlight-‐‑‒text-‐‑‒
alpha-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color-‐‑‒ios-‐‑‒normal-‐‑‒
background-‐‑‒alpha-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒
color-‐‑‒ios-‐‑‒selected-‐‑‒background-‐‑‒alpha(カカともり
すとでのみ使⽤用)-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒
color-‐‑‒ios-‐‑‒newcomer-‐‑‒background-‐‑‒alpha-‐‑‒ios-‐‑‒
status-‐‑‒message-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒status-‐‑‒
message-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒
alpha-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒edgeinsets(トー
クリストでのみ使⽤用)-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒
time-‐‑‒text-‐‑‒alpha
テーブルセル(リストの各要
素)のスタイル指定
-‐‑‒ 例例)カカともリスト、トー
クリストなどの各リストの
Row に対応するスタイル
(Border カラー、⽂文字の⾊色、
背景画像、アクセサリーイメ
ージ( ">"))
TableViewSectionHeaderS
tyle
-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒margin-‐‑‒
ios-‐‑‒background-‐‑‒image
テーブルのセクションヘッダ
ー(セル上部に表⽰示されるセ
クションエリア)スタイルの
指定
-‐‑‒ 例例)設定画⾯面のセクション
タイトルエリア
(⽂文字の⾊色、Shadow のスタ
イル、余⽩白サイズ、背景画
像)
NavigationBarStyle background-‐‑‒color
-‐‑‒ios-‐‑‒background-‐‑‒image(縦 45px 固定)
上部のナビゲーションエリア
のスタイル指定
(背景の⾊色、背景画像)
-
NavigationItemTitleStyle -‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒
shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha
上部ナビゲーションタイトル
のテキストスタイル指定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
MiniProfileBackgroundStyl
e
-‐‑‒ios-‐‑‒background-‐‑‒image(縦 224px 固定) ミニプロフィール全体の背景
画像を指定
MiniProfileMenuBarBackgr
oundStyle
-‐‑‒ios-‐‑‒background-‐‑‒image(縦 54px~∼100px 間に固
定)
ミニプロフィール上部のメニ
ューバーの背景画像を指定
MiniProfileUserNameLabel
Style
-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒
text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha
ミニプロフィール左側のユー
ザー名テキストスタイルの指
定
(⽂文字の⾊色、Shadow スタイ
ル)
MiniProfileStatusMessageL
abelStyle
-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha
ミニプロフィール左側のステ
ータスメッセージのテキスト
のスタイル指定
(⽂文字の⾊色)
MiniProfileButtonStyle -‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒
shadow-‐‑‒offset-‐‑‒ios-‐‑‒background-‐‑‒image(縦 44px
固定)
ミニプロフィール下部のボタ
ンスタイルを指定
(テキストスタイルと背景画
像)
MiniProfilePlusFriendHome
ButtonStyle
-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒background-‐‑‒image(128x38
サイズ固定)
-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image(7x11 サイズ固定)
プラスカカとものミニプロフ
ィールのホームへのボタンス
タイル指定
(テキストスタイルと背景画
像)
MiniProfilePhoneNumberB
uttonStyle
-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒background-‐‑‒image(縦 25px
固定)
ミニプロフィール(無料料電話
ユーザー)電話番号ボタンの
スタイル指定
(テキストスタイルと背景画
像)
-
MiniProfilePlusFriendCount
Style
-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒background-‐‑‒image(縦 21px
固定)
プラスカカとものミニプロフ
ィールのカカとも数字スタイ
ル指定
(テキストスタイルと背景画
像)
MiniProfileMenuBarAccess
oryStyle
-‐‑‒ios-‐‑‒gift-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒favorite-‐‑‒on-‐‑‒icon-‐‑‒
image-‐‑‒ios-‐‑‒favorite-‐‑‒off-‐‑‒icon-‐‑‒image -‐‑‒ios-‐‑‒edit-‐‑‒
icon-‐‑‒image-‐‑‒ios-‐‑‒close-‐‑‒icon-‐‑‒image
(全体 36x54 でサイズ固定)
ミニプロフィール上部のメニ
ューバーエリアボタン 4つの
スタイル指定
(ギフトショップ、お気に⼊入
り、編集、閉じるボタンの背
景画像)
MoreBackgroundStyle background-‐‑‒color その他の背景⾊色のスタイル指
定
MoreCellStyle border-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒highlight-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒
normal-‐‑‒background-‐‑‒color-‐‑‒ios-‐‑‒selected-‐‑‒
background-‐‑‒color
その他の上部ボタンのスタイ
ル指定
(border の⾊色、テキストと背
景の⾊色
MoreIconSetStyle -‐‑‒ios-‐‑‒account-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒notice-‐‑‒icon-‐‑‒image-‐‑‒
ios-‐‑‒settings-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒giftshop-‐‑‒icon-‐‑‒
image-‐‑‒ios-‐‑‒itemstore-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒plusfriend-‐‑‒
icon-‐‑‒image-‐‑‒ios-‐‑‒gamecenter-‐‑‒icon-‐‑‒image
(全体 36x35 に固定)
その他の上部のボタンアイコ
ン、背景画像の指定
(カカオアカウント、プロフ
ィール、お知らせ、設定、ギ
フトショップ、アイテムスト
ア、プラスカカとものアイコ
ンの背景画像)
PasscodeBackgroundStyle background-‐‑‒color
-‐‑‒ios-‐‑‒background-‐‑‒image(960x960 サイズ勧奨)
パスワードロックの背景スタ
イルを指定する(⾊色、画像の
うちのどちらか)
PasscodeTitleLabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offse-‐‑‒ios-‐‑‒text-‐‑‒
shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha
パスワードロックの上部メイ
ンタイトルのテキストスタイ
ル指定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
-
PasscodeDescLabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒
shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha
パスワードロックの上部サブ
タイトルのテキストスタイル
指定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
PasscodeBulletAndKeypad
Style
-‐‑‒ios-‐‑‒bullet-‐‑‒image(55x54 サイズ固定)
-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image(55x54 サイズ固
定)
-‐‑‒ios-‐‑‒keypad-‐‑‒(0~∼9, back, undo)-‐‑‒image
(110x54 サイズ固定)
パスワードロック⼊入⼒力力エリア
のスタイル指定
(⼊入⼒力力時 Dot 画像、⼊入⼒力力エリ
アの背景画像)
ChatInputBarSendButtonN
ormalStyle
-‐‑‒ios-‐‑‒background-‐‑‒image(26x28 サイズ固定)
-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
offset-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets
トークルーム、メッセージ送
信ボタンスタイル
(背景画像、テキストのスタ
イル)
ChatInputBarStyle -‐‑‒ios-‐‑‒background-‐‑‒image(320x38 サイズ固定)
-‐‑‒ios-‐‑‒plus-‐‑‒icon-‐‑‒image(縦 28px 固定)
-‐‑‒ios-‐‑‒emoticon-‐‑‒icon-‐‑‒image(縦 28px 固定)
-‐‑‒ios-‐‑‒keyboard-‐‑‒icon-‐‑‒image(縦 28px 固定)
トークルーム、メッセージ⼊入
⼒力力部分のアイコンと背景画像
の指定
(背景画像、+ボタン、絵⽂文字
ボタン、キーボードボタン画
像)
ChatMessageCellStyle -‐‑‒ios-‐‑‒background-‐‑‒image-‐‑‒ios-‐‑‒selected-‐‑‒
background-‐‑‒image-‐‑‒ios-‐‑‒text-‐‑‒color
-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒title-‐‑‒
edgeinsets-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets
トークルーム受信/送信メッセ
ージのスタイル指定
(吹き出し背景⼀一般/選択時の
背景画像、⼀一般/選択時のテキ
ストの⾊色、
テキストエリア EdgeInset、
画像のエリア EdgeInset)
-
ChatMessageCellUserNam
eLabelStyle
-‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
offset
トークルーム受信メッセージ
の送信者名の部分のスタイル
指定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
TabBarTitleStyle -‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒
offset-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒
alpha-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒offset
タブバーテキストスタイル指
定
(⽂文字の⾊色、透明度度、
Shadow のスタイル)
TabBarItemStyle -‐‑‒ios-‐‑‒background-‐‑‒image(320x49 サイズ固定)
-‐‑‒ios-‐‑‒selection-‐‑‒indicator-‐‑‒image(78x44 サイズ固
定)
-‐‑‒ios-‐‑‒friends-‐‑‒normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒chats-‐‑‒
normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒recommendees-‐‑‒normal-‐‑‒
icon-‐‑‒image-‐‑‒ios-‐‑‒more-‐‑‒normal-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒
friends-‐‑‒selected-‐‑‒icon-‐‑‒image-‐‑‒ios-‐‑‒chats-‐‑‒selected-‐‑‒
icon-‐‑‒image-‐‑‒ios-‐‑‒recommendees-‐‑‒selected-‐‑‒icon-‐‑‒
image-‐‑‒ios-‐‑‒more-‐‑‒selected-‐‑‒icon-‐‑‒image(アイコンイ
メージ 30x30 に固定)
タブバー背景画像とアイコン
のスタイル指定
(背景画像は、選択時
Indicator 画像、アイコン⼀一般
/選択時のイメージ)
DefaultProfileStyle -‐‑‒ios-‐‑‒profile-‐‑‒small-‐‑‒image(32x32 サイズ固定)
-‐‑‒ios-‐‑‒profile-‐‑‒large-‐‑‒image(110x110 サイズ固定)
-‐‑‒ios-‐‑‒groupchat-‐‑‒small-‐‑‒image(32x32 サイズ固定)
プロフィール画像のサムネイ
ルのスタイル(カカともリス
ト、トークルームなどで表⽰示
されるユーザープロフィール
のサムネイル画像)