携帯の配色変更

[hasegawa]

■機能概要

携帯版の配色を管理画面から設定できる機能を追加する。

■仕様

• 仕様書​
• インターフェースは 配色・CSS設定ページ（m=admin&a=page_edit_c_sns_config）にあわせる
• 設定できる項目は、edit_color_ktaiに従う
• DB内の項目値は、 #1352 の仕様に従う
• テンプレート内の配色のうち、固定値にするものは以下の通り
  • （PNEBIZ）スケジュールの曜日部分、「土」：#0000ff
  • （PNEBIZ）スケジュールの曜日部分、「日」：#ff0000
• 用意するプリセットカラーについては、以下の表に従う

配色名	レッド	ベージュ	イエロー	グリーン	ブルー	ネイビー	パープル
color_0	E66161	DDBD58	F9D80D	339966	0D6DDF	0035AA	663399
color_1	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	EEFFFF	FFEEFF
color_2	CC0000	DDBD58	F9D80D	339966	0D6DDF	0035AA	663399
color_3	AAAAAA	DDDD99	FFEE99	EEEE22	DDDDDD	CCCCCC	FFFFFF
color_4	FFEEEE	FFFFDD	FFFFDD	EEFFEE	EEEEFF	DDEEFF	EECCFF
color_5	CC3333	996633	BBBB66	99AA77	7DDADF	006699	6666FF
color_6	FFDDFF	FFEECC	FFFFAA	FFFFCC	E0EAEF	AAEEFF	CCBBEE
color_7	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFEEFF
color_8	999999	DDCC66	F9D80D	CCDD77	C49FFF	00CCCC	CC6666
color_9	EEEEEE	FFEECC	FFFFAA	FFFFCC	DCD1EF	CCEEFF	FFCCCC
color_10	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFFFFF	FFEEFF
color_11	CC0000	DDBD58	F9D80D	339966	0D6DDF	0055AA	663399
color_12	FF9999	996633	BBBB66	99AA77	B3CEEF	AACCCC	9999FF
color_13	CCCCCC	DDCC66	F9D80D	CCDD77	BFA4EF	99EEEE	CC9999
color_14	000000	000000	000000	000000	000000	333333	333333
color_15	6600CC	CC6600	FF6600	6666CC	0000FF	0066FF	006666
color_23	9966FF	CCCC33	FFFF00	9999EE	67F7AF	33CCFF	33CCFF
color_17	333366	665544	666677	663399	800080	666666	666666
color_18	FFFFEE	665544	000000	EEFFEE	EEEEEE	EEEEEE	EEFFEE
color_19	996633	999966	999966	666666	999966	999966	999966
color_20	0C5F0F	CC6666	0C5F0F	EE6622	0C5F0F	009999	009999
color_21	999999	DDCC66	BBBB66	CCDD77	C49FFF	00EEEE	6666FF
color_22	FF0000	FF0000	FF0000	FF0000	FF0000	FF0000	FF0000
color_24	000000	000000	000000	000000	000000	333333	333333
color_25	000000	DDDDCC	000000	000000	000000	EEFFEE	333333
color_26	000000	665544	000000	000000	000000	333333	333333
color_27	AAAAAA	DDDD99	FFEE99	EEEE22	DDDDDD	CCCCCC	FFFFFF
color_28	000000	000000	000000	000000	000000	333333	333333

■関連情報

• #1353 携帯のプリセットカラーをPCと同じ数そろえる
• #1391 携帯：配色設定の項目追加
• #1322 携帯：配色設定の再検討
• #1352 PC・携帯の配色設定の内部設計を変更する

[takanashi]

2.8では開発リソースが足りず。
先送りします。

[ebihara]

やります

[ebihara]

r3775で画面仕様書を作成しました。

[ebihara]

画面仕様書内の携帯版レイアウト色設定一覧を以下に示します。

色名	色番号	主な用途
bg01	#0d6ddf	ページタイトル背景色、フッタメニュー背景色
bg02	#dddddd	サブタイトル背景色
bg03	#eeeeff	c_homeコミュニティ説明部分の背景色
bg04	#7ddadf	奇数番新着リスト見出し背景色
bg05	#e0eaef	奇数番新着リスト項目背景色
bg06	#c49fff	偶数番新着リスト見出し背景色
bg07	#dcd1ef	偶数番新着リスト項目背景色
border01	#0d6ddf	主な罫線の色
border02	#b3ceef	奇数番新着リスト罫線色
border03	#bfa4ef	偶数番新着リスト項目罫線色
font01	#eeeeee	白抜き時の文字色（ページタイトルなど）
font02	#999966	新着リスト日付部分文字色
font03	#0c5f0f	⇒の色

画面仕様書内のDB設計を以下に示します。

【DB設計案】新規にc_sns_config_ktaiテーブル追加

以下の構造のテーブルを作成する
携帯版配色設定関連ページのみの変更で済む
PC版配色設定用テーブル（c_sns_config）と構造を合わせる形

フィールド名	型	備考
c_sns_config_ktai_id	int	primary key
key_name	text	配色名
bg01	text	bg01の色コード（16進数）
bg02	text	bg02の色コード（16進数）
bg03	text	bg03の色コード（16進数）
bg04	text	bg04の色コード（16進数）
bg05	text	bg05の色コード（16進数）
bg06	text	bg06の色コード（16進数）
bg07	text	bg07の色コード（16進数）
border01	text	border01の色コード（16進数）
border02	text	border02の色コード（16進数）
border03	text	border03の色コード（16進数）
font01	text	font01の色コード（16進数）
font02	text	font02の色コード（16進数）
font03	text	font03の色コード（16進数）

[ebihara]

r3778

で対応しました。

ご確認ください。

update用SQLを実行する必要があることにご注意ください。

[ogawa]

確認します。

[ogawa]

テンプレート内で固定色が指定されている部分が残っているので、調査お願いします。

[ebihara]

固定値で指定されている色は、

• #ff0000
• #b3ceef
• #ffffff

の三つです。

以下のテンプレートで固定値が使われています。

• c_bbs.tpl
• c_com_topic_find.tpl
• c_edit_member.tpl
• c_event_add.tpl
• c_event_edit.tpl
• c_event_list.tpl
• c_event_mail.tpl
• c_event_member_list.tpl
• c_home.tpl
• c_invite.tpl
• c_join_request.tpl
• c_member_list.tpl
• c_topic_add.tpl
• c_topic_list.tpl
• f_com_list_common.tpl
• f_intro_edit.tpl
• f_link_request.tpl
• f_message_send.tpl
• fh_com_list.tpl
• fh_diary_list.tpl
• fh_diary.tpl
• fh_friend_list.tpl
• fh_intro.tpl
• h_ashiato.tpl
• h_bookmark_list.tpl
• h_com_category.tpl
• h_com_comment_list.tpl
• h_com_find_all.tpl
• h_com_find_result.tpl
• h_com_topic_find_all.tpl
• h_config_access_block.tpl
• h_config_easy_login.tpl
• h_config_mail.tpl
• h_config_password_query.tpl
• h_config_password.tpl
• h_config_prof.tpl
• h_config.tpl
• h_confirm_list.tpl
• h_diary_comment_list.tpl
• h_diary_edit.tpl
• h_diary_list_all.tpl
• h_diary_list_friend.tpl
• h_free_page.tpl
• h_friend_find_all.tpl
• h_home.tpl
• h_invite.tpl
• h_manage_friend.tpl
• h_message_box.tpl
• h_message_send.tpl
• h_message.tpl
• h_pc_send.tpl
• h_ranking.tpl
• h_regist_address.tpl
• h_regist_ktai_id.tpl
• h_regist_prof.tpl
• h_set_public_flag_all_confirm.tpl
• h_taikai_confirm.tpl
• inc_f_home_h_prof.tpl
• o_free_page.tpl
• o_login.tpl
• o_login2.tpl
• o_password_query.tpl
• o_regist_input.tpl
• o_regist_ktai_id.tpl

[ebihara]

固定値になっている箇所の用途をまとめました。

#fffff

背景色が交互になっている部分の背景色

#ff0000

エラーメッセージ 注意文言 「※」

#b3ceef

奇数番の罫線 ※リストが一個だけのページのみに固定値が残っている。border02とするべき

#b3ceefを使っている箇所はborder02に置換します。

#ff0000はfont4、#ffffffはbg8という設定項目を作った上で、それぞれ置換します。

[ebihara]

r3828

#b3ceefをborder_02に置換しました。

[ebihara]

r3832

font_4、bg_8という設定項目を作成し、#ff0000をfont_4、#ffffffをbg_8に置換しました。ご確認ください。

[ogawa]

あとはデフォルトの文字色と背景色を指定するかどうか。

[ogawa]

デフォルトの文字色と背景色を指定できるようにしてください。

[ebihara]

やります。

<body text="" bgcolor="">で指定します。

追加する設定項目は、

• font_05：デフォルトの文字色
• bg_09：デフォルトの文字色

[ebihara]

<body link="" alink="" vlink="">

の文字色も指定します。

• font_06 : link
• font_07 : alink
• font_08 : vlink

で。

ただしauとSoftBankはalinkとvlinkには対応していません。

CSSで指定すれば可能だと思いますが、調査が必要なのでとりあえず保留とします。

[ebihara]

r3854, r3855で標準の文字色と背景色、リンク関連色の配色設定に対応しました。

ご確認よろしくお願いします。

[ogawa]

管理画面の携帯版配色設定（edit_c_sns_config_ktai）下部のテキストエリアの中身が

bg_01:#0D6DDF
bg_02:#DDDDDD
bg_03:#EEEEFF
bg_04:#7DDADF
bg_05:#E0EAEF
bg_06:#C49FFF
bg_07:#DCD1EF
border_01:#0D6DDF
border_02:#B3CEEF
border_03:#BFA4EF
font_01:#EEEEEE
font_02:#999966
font_03:#0C5F0F
bg_08:#FFFFFF
font_04:#FF0000
bg_09:#FFFFFF
font_05:#000000
font_06:#0000FF
font_07:#0000FF
font_08:#800080

順番おかしいので修正してください。

また、管理画面はいちおうXHTMLですので<input />ちゃんと閉じてください。っていうのと、</div>が多いよって警告出てます。

[ebihara]

直します。

[ebihara]

r3883でXHTMLの修正と、テキストエリア内色設定一覧の順序を訂正しました。

[ogawa]

ksort() もよいのですが、DB内のフィールドの順番をソートしておいて欲しいです。ALTER TABLEで、AFTERキーワードを使えば順番変えられます。

[ebihara]

やります。

[ebihara]

r3890で対応しました。