ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Opened 14 years ago

Closed 14 years ago

Last modified 13 years ago

#374 closed enhancement (fixed)

携帯の配色変更

Reported by: hasegawa Owned by: ebihara
Priority: blocker Milestone: OpenPNE2.10alpha1
Component: pne-ktai Version: 2.10.x
Keywords: Cc:

Description (last modified by ebihara)

■機能概要

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

■仕様

  • 仕様書​
  • インターフェースは 配色・CSS設定ページ（m=admin&a=page_edit_c_sns_config）にあわせる
  • 設定できる項目は、edit_color_ktaiに従う
  • DB内の項目値は、 #1352 の仕様に従う
  • テンプレート内の配色のうち、固定値にするものは以下の通り
    • （PNEBIZ）スケジュールの曜日部分、「土」：#0000ff
    • （PNEBIZ）スケジュールの曜日部分、「日」：#ff0000
  • 用意するプリセットカラーについては、以下の表に従う
配色名レッドベージュイエローグリーンブルーネイビーパープル
color_0E66161DDBD58F9D80D3399660D6DDF0035AA663399
color_1FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEEFFFFFFEEFF
color_2CC0000DDBD58F9D80D3399660D6DDF0035AA663399
color_3AAAAAADDDD99FFEE99EEEE22DDDDDDCCCCCCFFFFFF
color_4FFEEEEFFFFDDFFFFDDEEFFEEEEEEFFDDEEFFEECCFF
color_5CC3333996633BBBB6699AA777DDADF0066996666FF
color_6FFDDFFFFEECCFFFFAAFFFFCCE0EAEFAAEEFFCCBBEE
color_7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEEFF
color_8999999DDCC66F9D80DCCDD77C49FFF00CCCCCC6666
color_9EEEEEEFFEECCFFFFAAFFFFCCDCD1EFCCEEFFFFCCCC
color_10FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEEFF
color_11CC0000DDBD58F9D80D3399660D6DDF0055AA663399
color_12FF9999996633BBBB6699AA77B3CEEFAACCCC9999FF
color_13CCCCCCDDCC66F9D80DCCDD77BFA4EF99EEEECC9999
color_14000000000000000000000000000000333333333333
color_156600CCCC6600FF66006666CC0000FF0066FF006666
color_239966FFCCCC33FFFF009999EE67F7AF33CCFF33CCFF
color_17333366665544666677663399800080666666666666
color_18FFFFEE665544000000EEFFEEEEEEEEEEEEEEEEFFEE
color_19996633999966999966666666999966999966999966
color_200C5F0FCC66660C5F0FEE66220C5F0F009999009999
color_21999999DDCC66BBBB66CCDD77C49FFF00EEEE6666FF
color_22FF0000FF0000FF0000FF0000FF0000FF0000FF0000
color_24000000000000000000000000000000333333333333
color_25000000DDDDCC000000000000000000EEFFEE333333
color_26000000665544000000000000000000333333333333
color_27AAAAAADDDD99FFEE99EEEE22DDDDDDCCCCCCFFFFFF
color_28000000000000000000000000000000333333333333

■関連情報

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

Change History (37)

comment:1 Changed 14 years ago by takanashi

Milestone: OpenPNE2.6開発 → OpenPNE2.8機能仕様

comment:2 Changed 14 years ago by takanashi

Component: owner【オーナー向け機能】 → ktai@OpenPNE
Type: defect → enhancement

comment:3 Changed 14 years ago by takanashi

Owner: changed from tejimaa to openpne

comment:4 Changed 14 years ago by takanashi

Milestone: OpenPNE2.8.0 → いつかどこかで

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

comment:5 Changed 14 years ago by tejimaa

Keywords: pne-ktai added; 携帯 removed

comment:6 Changed 14 years ago by tejimaa

Milestone: → OpenPNE2.10
Version: 2.4 → 2.9.x

comment:7 Changed 14 years ago by tejimaa

Component: ktai@OpenPNE → pne-ktai
Keywords: pne-ktai removed

comment:8 Changed 14 years ago by tejimaa

Priority: minor → critical
Reporter: changed from Hasegawa to hasegawa

comment:9 Changed 14 years ago by tejimaa

Priority: critical → major

comment:10 Changed 14 years ago by ebihara

Owner: changed from openpne to ebihara
Status: new → assigned

やります

comment:11 Changed 14 years ago by ebihara

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

comment:12 Changed 14 years ago by 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進数）

comment:13 Changed 14 years ago by ebihara

Owner: changed from ebihara to kunitada
Status: assigned → new

r3778

で対応しました。

ご確認ください。

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

comment:14 Changed 14 years ago by kunitada

Priority: major → critical

comment:15 Changed 14 years ago by kunitada

Priority: critical → blocker

comment:16 Changed 14 years ago by ogawa

Milestone: OpenPNE2.10 → OpenPNE2.9.3
Owner: changed from kunitada to ogawa
Status: new → assigned

確認します。

comment:17 Changed 14 years ago by ogawa

Owner: changed from ogawa to ebihara
Status: assigned → new

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

comment:18 Changed 14 years ago by 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

comment:19 Changed 14 years ago by ebihara

Status: new → assigned

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

#fffff
背景色が交互になっている部分の背景色
#ff0000
エラーメッセージ 注意文言 「※」
#b3ceef
奇数番の罫線 ※リストが一個だけのページのみに固定値が残っている。border02とするべき

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

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

comment:20 Changed 14 years ago by ebihara

r3828

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

comment:21 Changed 14 years ago by ebihara

Owner: changed from ebihara to ogawa
Status: assigned → new

r3832

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

comment:22 Changed 14 years ago by ogawa

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

comment:23 Changed 14 years ago by ogawa

Owner: changed from ogawa to ebihara

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

comment:24 Changed 14 years ago by ebihara

Status: new → assigned

やります。

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

追加する設定項目は、

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

comment:25 Changed 14 years ago by ebihara

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

の文字色も指定します。

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

で。

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

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

comment:26 Changed 14 years ago by ebihara

Owner: changed from ebihara to ogawa
Status: assigned → new

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

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

comment:27 Changed 14 years ago by ogawa

Owner: changed from ogawa to ebihara

管理画面の携帯版配色設定（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>が多いよって警告出てます。

comment:28 Changed 14 years ago by ebihara

Status: new → assigned

直します。

comment:29 Changed 14 years ago by ebihara

Owner: changed from ebihara to ogawa
Status: assigned → new

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

comment:30 Changed 14 years ago by ogawa

Owner: changed from ogawa to ebihara

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

comment:31 Changed 14 years ago by ebihara

Status: new → assigned

やります。

comment:32 Changed 14 years ago by ebihara

Owner: changed from ebihara to ogawa
Status: assigned → new

r3890で対応しました。

comment:33 Changed 14 years ago by ogawa

Owner: changed from ogawa to ebihara

comment:34 Changed 14 years ago by ogawa

Resolution: → fixed
Status: new → closed

comment:35 Changed 13 years ago by ebihara

Description: modified (diff)

comment:36 Changed 13 years ago by ebihara

Description: modified (diff)

comment:37 Changed 13 years ago by ebihara

Description: modified (diff)
Note: See TracTickets for help on using tickets.