ios theme guide JP...

オリジナルテーマを制作テーマファイルを制作する場合、以下の⼿手順に従ってください。

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 固定)






(上部タイトル右側ボタン⾮非活性化状態)


(縦 29px 固定)


-‐‑‒ios-‐‑‒text-‐‑‒alpha テキストカラー透明度度





(上部タイトル左側(Back)ボタン)


(縦 29px 固定)






(上部タイトル右側ボタン活性化状態)


(縦 29px 固定)





タブバー

(下部タブ領領域)

TabBarTitleStyle1

(テキストカラー)


-‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー透明度度




-‐‑‒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 タブバーの選択タブ画像


-‐‑‒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

(検索索バー)


(縦 44px 固定)


-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒

background-‐‑‒image

検索索⼊入⼒力力欄背景画像

(縦 31px 固定)

-‐‑‒ios-‐‑‒searchbar-‐‑‒textfield-‐‑‒leftview-‐‑‒

image

検索索アイコン

(15x15 サイズ固定)

TableViewSectionHeaderStyle1

(カカともリストセクションタイトル領領

域)





-‐‑‒ios-‐‑‒text-‐‑‒margin テキスト余⽩白位置


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-‐‑‒highlight-‐‑‒text-‐‑‒color セル選択時のテキストカラー

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒background-‐‑‒

image

状態メッセージ背景画像

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒color 状態メッセージテキストカラー

-‐‑‒ios-‐‑‒status-‐‑‒message-‐‑‒text-‐‑‒

edgeinsets

状態メッセージテキスト領領域上下左右

の余⽩白調整値

トークリスト BackgroundStyle4

(トークリスト背景)





TableViewCellStyle2-‐‑‒1 border-‐‑‒color セル領領域下部 Border カラー

(トークリストセル領領域) -‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒color セル領領域背景カラー






-‐‑‒ios-‐‑‒time-‐‑‒text-‐‑‒color 時間テキストカラー

-‐‑‒ios-‐‑‒detail-‐‑‒text-‐‑‒color 最後のメッセージテキストカラー

DefaultProfileStyle1

(トークルームサムネイル画像)

-‐‑‒ios-‐‑‒profile-‐‑‒small-‐‑‒image 1:1 トークルームサムネイル画像


-‐‑‒ios-‐‑‒groupchat-‐‑‒small-‐‑‒image グループトークルームサムネイル画像


-‐‑‒ios-‐‑‒profile-‐‑‒large-‐‑‒image ⼤大きいサムネイル画像


おすすめリスト BackgroundStyel6





TableViewSectionHeaderStyle2 -‐‑‒ios-‐‑‒text-‐‑‒color テキストカラー




-‐‑‒ios-‐‑‒text-‐‑‒margin テキスト余⽩白位置


その他 MoreBackgroundStyle1






MoreCellStyle1

(その他セル領領域)

border-‐‑‒color セル領領域下部 Border カラー

-‐‑‒ios-‐‑‒normal-‐‑‒background-‐‑‒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

(トークルーム背景)





ChatMessageCellStyle1

(⾃自分の吹き出し)

-‐‑‒ios -‐‑‒background-‐‑‒image 背景画像


-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets テキスト領領域余⽩白調整

-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets 画像領領域余⽩白調整

ChatMessageCellStyle2

(相⼿手の吹き出し)



-‐‑‒ios-‐‑‒title-‐‑‒edgeinsets テキスト領領域余⽩白調整

-‐‑‒ios-‐‑‒image-‐‑‒edgeinsets 画像領領域余⽩白調整

ChatMessageCellUserNameLabelStyle

1

(相⼿手の吹き出しの名前)





ChatInputBarStyle1

(メッセージ⼊入⼒力力欄)



-‐‑‒ios-‐‑‒plus-‐‑‒icon-‐‑‒image +ボタン画像


-‐‑‒ios-‐‑‒emoticon-‐‑‒icon-‐‑‒image 絵⽂文字ボタン画像


-‐‑‒ios-‐‑‒keyboard-‐‑‒icon-‐‑‒image キーボードボタン画像


ChatInputBarSendButtonNormalStyle

1

(送信ボタン Normal/活性化状態)


(縦 28px 固定)





–ios-‐‑‒title-‐‑‒edgeinsets タイトル領領域余⽩白調整値

ChatInputBarSendButtonDisableStyle

1

(送信ボタン Disable/⾮非活性化状態)


(縦 28px 固定)





–ios-‐‑‒title-‐‑‒edgeinsets タイトル領領域余⽩白調整値

ミニプロフィール MiniProfileBackgroundStyle1

(ミニプロフィール背景)


(縦 224px 固定)

MiniProfileMenuBarBackgroundStyle1

(ミニプロフィールメニューバー背景)


(縦 54px~∼100px 間に固定)

MiniProfileUserNameLabelStyle1

(ミニプロフィールユーザー名)





MiniProfileStatusMessageLabelStyle1

(ミニプロフィールステータスメッセー

ジ)


MiniProfilePhoneNumberButtonStyle1

(ミニプロフィール電話番号ボタン)


(縦 25px 固定)


MiniProfileButtonStyle1

(ミニプロフィール下部ボタン)


(縦 44px 固定)





MiniProfilePlusFriendHomeButtonStyl

e1

(ミニプロフィール Plus カカともホーム

へボタン)




-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image ⽮矢印画像


MiniProfilePlusFriendCountStyle1

(Plus カカともミニプロフィールカカと

もの数)



(縦 21px 固定)

MiniProfileMenuBarAccessoryStyle1

(ミニプロフィールメニューバー右側メ

ニューボタン)

-‐‑‒ios-‐‑‒gift-‐‑‒icon-‐‑‒image ギフトショップアイコン画像


-‐‑‒ios-‐‑‒favorite-‐‑‒on-‐‑‒icon-‐‑‒image お気に⼊入り Onアイコン画像


-‐‑‒ios-‐‑‒favorite-‐‑‒off-‐‑‒icon-‐‑‒image お気に⼊入り Off アイコン画像


-‐‑‒ios-‐‑‒edit-‐‑‒icon-‐‑‒image 編集アイコン画像


-‐‑‒ios-‐‑‒close-‐‑‒icon-‐‑‒image 閉じるアイコン画像


パスワード PasscodeBackgroundStyle1

(パスワード画⾯面背景)









PasscodeDescLabelStyle1

(案内⽂文テキスト)





PasscodeBulletAndKeypadStyle1

(パスワードボックス)

-‐‑‒ios-‐‑‒bullet-‐‑‒image ⼊入⼒力力時 Dot 画像


-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image Input ボックス画像


PasscodeBulletAndKeypadStyle1

(キーパッド画像,Normal 状態)

-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒normal-‐‑‒

image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒

normal-‐‑‒image

Normal 状態時の数字 0~∼9 キーパッ

ド


-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒normal-‐‑‒image Normal 状態時の削除キーパッド


-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒normal-‐‑‒image Normal 状態時のキャンセルキーパッ

ド


-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒normal-‐‑‒image Normal 状態時の空⽩白キーパッド


-‐‑‒ios-‐‑‒keypad-‐‑‒number0-‐‑‒highlight-‐‑‒

image~∼-‐‑‒ios-‐‑‒keypad-‐‑‒number9-‐‑‒

normal-‐‑‒image

Pressed 状態時の数字 0~∼9 キーパッ

ド


-‐‑‒ios-‐‑‒keypad-‐‑‒back-‐‑‒highlight-‐‑‒image Pressed 状態時の削除キーパッド


-‐‑‒ios-‐‑‒keypad-‐‑‒cancel-‐‑‒highlight-‐‑‒image Pressed 状態時のキャンセルキーパッ

ド


-‐‑‒ios-‐‑‒keypad-‐‑‒blank-‐‑‒highlight-‐‑‒image Pressed 状態時の空⽩白キーパッド


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

上部ナビゲーションタイトル

のテキストスタイル指定



MiniProfileBackgroundStyl

e

-‐‑‒ios-‐‑‒background-‐‑‒image(縦 224px 固定) ミニプロフィール全体の背景

画像を指定

MiniProfileMenuBarBackgr

oundStyle

-‐‑‒ios-‐‑‒background-‐‑‒image(縦 54px~∼100px 間に固

定)

ミニプロフィール上部のメニ

ューバーの背景画像を指定

MiniProfileUserNameLabel

Style


-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒

text-‐‑‒shadow-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha

ミニプロフィール左側のユー

ザー名テキストスタイルの指

定

（⽂文字の⾊色、Shadow スタイ

ル）

MiniProfileStatusMessageL

abelStyle


-‐‑‒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-‐‑‒alpha-‐‑‒ios-‐‑‒background-‐‑‒image(128x38

サイズ固定)

-‐‑‒ios-‐‑‒arrow-‐‑‒icon-‐‑‒image(7x11 サイズ固定)

プラスカカとものミニプロフ

ィールのホームへのボタンス

タイル指定


像）

MiniProfilePhoneNumberB

uttonStyle


-‐‑‒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-‐‑‒


その他の上部ボタンのスタイ

ル指定

（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-‐‑‒


パスワードロックの上部メイ

ンタイトルのテキストスタイ

ル指定



PasscodeDescLabelStyle -‐‑‒ios-‐‑‒text-‐‑‒color

-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒offset-‐‑‒ios-‐‑‒text-‐‑‒


パスワードロックの上部サブ

タイトルのテキストスタイル

指定



PasscodeBulletAndKeypad

Style

-‐‑‒ios-‐‑‒bullet-‐‑‒image(55x54 サイズ固定)

-‐‑‒ios-‐‑‒bullet-‐‑‒background-‐‑‒image(55x54 サイズ固

定)

-‐‑‒ios-‐‑‒keypad-‐‑‒(0~∼9, back, undo)-‐‑‒image


パスワードロック⼊入⼒力力エリア


（⼊入⼒力力時 Dot 画像、⼊入⼒力力エリ

アの背景画像）

ChatInputBarSendButtonN

ormalStyle

-‐‑‒ios-‐‑‒background-‐‑‒image(26x28 サイズ固定)


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


color-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset

トークルーム受信メッセージ

の送信者名の部分のスタイル

指定



TabBarTitleStyle -‐‑‒ios-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒text-‐‑‒alpha-‐‑‒ios-‐‑‒text-‐‑‒shadow-‐‑‒

offset-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒color-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒

alpha-‐‑‒ios-‐‑‒selected-‐‑‒text-‐‑‒shadow-‐‑‒offset

タブバーテキストスタイル指

定



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 サイズ固定)

プロフィール画像のサムネイ

ルのスタイル（カカともリス

ト、トークルームなどで表⽰示

されるユーザープロフィール

のサムネイル画像）

ios theme guide JP...

Documents

Transcript of ios theme guide JP...