管理画面のみため、変えてみよう。 @WBKyoto

WordPress の管理画面のCSSを色々弄って見た目を大幅に変えることに挑戦しようとして失敗する半LT風セッション

＠ WordBench Kyoto 2016年04月号 管理画面再入門＆Global Translation Day

Transcript

1. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ؅ཧը໘ͷΈͨΊɺม͑ͯΈΑ͏ɻ 8PSE#FODI
   ,ZPUP
   
   ݄߸
   
   
   
   !
   DPXPSLJOHTQBDF
   DPUP
2. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP $"65*0/ ͜͜Ͱ঺հ͢Δ΋ͷΛ࣮Ҋ݅Ͱ࢖༻͢Δͷ͸ ةݥͳͷͰ΍Ί·͠ΐ͏ɻ ΫϥΠΞϯτ͕ࠞཚ͢ΔݪҼͰ͢
3. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ͩΕʁ 81೔ຊޠϑΥʔϥϜͰكʹճ౴ͯͨ͠ژ౎ͷֶੜ
4. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ͸͍ɻ
5. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ຊ୊
6. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ؅ཧը໘ͷΧελϚΠζ
7. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ࠓճ࿩͢͜ͱ w 8PSE1SFTT
   ͷ؅ཧը໘ͷݟͨ໨ͷΧελϚΠζ $44తͳΞϨ
8. 
   8PSE#FODI
   ,ZPUP
   XCLZPUP ࿩͞ͳ͍͜ͱ w ؅ཧը໘ͷ ߲໨ɾίϯςϯπͷΧελϚΠζ
   w &Y
   μογϡϘʔυɺϝχϡʔɺઃఆը໘ʜʜʜ
9. Α͘ݟ֮͑ͷ͋Δ؅ཧը໘ 
   8PSE#FODI
   ,ZPUP
   XCLZPUP
10. ࢲͷ؅ཧ͢Δ͋ΔαΠτͷ؅ཧը໘ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
11. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͳΜ͔৭ʑҧ͏
    Ұ෦่ΕͯΔ͠X
12. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ΧελϚΠζ͠Α͏
13. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP $PEFYʹ͋Γ·͢ IUUQTXQEPDTPTEOKQ؅ཧը໘ςʔϚͷ࡞੒
    ͨͩ͠ ೔ຊޠ൛͸͔ͳΓ ݹ͍
14. બ୒ࢶ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࣗ෼Ͱ$44Λॻ͘ طଘͷςʔϚϓϥάΠϯΛೖΕΔ
15. બ୒ࢶ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࣗ෼Ͱ$44Λॻ͘ طଘͷςʔϚϓϥάΠϯΛೖΕΔ
16. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ΍Γํ͑͞Θ͔Ε͹ා͘ͳ͍ ͨͩ͠$44ڪා঱ͷํ ཁ͢Δʹࣗ෼ ʹ͸ݫ͍͠
17. ݁ہ͸ϓϥάΠϯͷ؅ཧը໘ͷ$44ॻ͘ͷͱಉ͡ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP GVODUJPO
    NZ@BENJO@UIFNF@TUZMF
    \
    
    XQ@FORVFVF@TUZMF NZBENJOUIFNF
    QMVHJOT@VSM XQBENJODTT
    @@'*-&@@ 
    ^
    
    -PBE
    BT
    BENJO
    TDSFFO
    UIFNF
    BEE@BDUJPO BENJO@FORVFVF@TDSJQUT
    bNZ@BENJO@UIFNF@TUZMF` 
    
    -PBE
    BT
    -PHJO
    4DSFFO
    5IFNF
    BEE@BDUJPO MPHJO@FORVFVF@TDSJQUT
    NZ@BENJO@UIFNF@TUZMF 
    
18. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͳΔ΄ͲΘ͔ΒΜ
19. ͱΓ͋͑ͣ༻ҙ͢ΔϑΝΠϧ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP αϯϓϧͱͯ͠ 4BTTͱ͔4UZMVTͱ͔࢖͍͖ͨΌ࢖͑͹͍͍ΜͩΑ ˡXQDPOUFOUQMVHJOTʹ์ΓࠐΜͰ͓͘
20. ϓϥάΠϯϔομ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP  QIQ
    
    1MVHJO
    /BNF
    ࢲͷ"ENJOςʔϚ
     ࠷௿ݶ͔͠ॻ͍ͯͳ͍ͷͰ͓޷ΈͰ
21. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP $44ΛಡΈࠐΉ w Ωʔϫʔυɿ
    w BEE@BDUJPO
    ˡ
    ϑοΫΛֻ͚ΔͨΊͷؔ਺
    w BENJO@FORVFVF@TDSJQUT
    ˡ͜͜ʹϑοΫΛֻ͚Δ
    w XQ@FORVFVF@TUZMF
    ˡ$44ΛಡΈ͜·ͤΔͱ͖ͷ͓໿ଋ
22. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP $44ΛಡΈࠐΉ ͦΜͳ͜ͱઆ໌͢Δඞཁͳ͍ΑͶʂʢ
23. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP $44ΛಡΈࠐΉ w ͱΓ͋͑ͣ͜Ε͚ͩॻ͍͓͚ͯ͹$44͸ಡΈࠐΊΔ͸ͣ BEE@BDUJPO
    BENJO@FORVFVF@TDSJQUT
    GVODUJPO \
    
    
    XQ@FORVFVF@TUZMF
    NZBENJOUIFNF
    QMVHJOT@VSM
    BENJOUIFNFDTT
    @@'*-&@@
    
    ^ 
24. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ༗ޮԽ͢Δ w ͱΓ͋͑ͣ༗ޮԽ
25. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ༗ޮԽͨ͠ w ҧ͍͕Θ͔Βͳ͍
 ʢͦΕ΋ͦ͏ʣ
26. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͱΓ͋͑ͣશ෦Ӆͥ͢ w ߟ͑Δͷ͕ΊΜͲ͔ͬͨ͘͞ͱ͔ݴ Θͳ͍ͷʂ
27. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͱΓ͋͑ͣશ෦Ӆͥ͢
28. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͱΓ͋͑ͣશ෦Ӆͥ͢ ਅͬനʜʜʹ͸ͳΒͳ͔͚ͬͨͲ ͱΓ͓̺͋͑ͣ
29. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP /05& w ͪͳΈʹطଘͷελΠϧͱ͔ΠϯεϖΫλͰݟΔͱ͖͸
 XQDPOpHQIQͰEFGJOF 4$3*15@%&#6( USVF ͓ͯ͘͠ ͱḿΔ
30. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP .&.0 ࣍ͷϖʔδҎ߱ͷαϯϓϧ͸$44ઃܭͱ͔࣮ࡍʹ࢖͍෺ʹ
 ͳΔ͔ͱ͔શ͘ߟ͑ͣʹॻ͍͍ͯΔͷͰྃ͝ঝ͍ͩ͘͞
    શ෦ೖΓͷΧΦεͳ$44͸HJTUʹ
    IUUQTHJUJPWX7

31. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ྫ͑͹ɺαΠυϝχϡʔΛ޿͘ʜʜ
32. ྫ͑͹ɺαΠυϝχϡʔΛ޿͘ʜʜ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
33. ྫ͑͹ɺαΠυϝχϡʔΛ޿͘ʜʜ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
34. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ྫ͑͹ɺαΠυϝχϡʔͷΞΠίϯΛ จࣈͷӈʹʜʜ
35. ྫ͑͹ɺαΠυϝχϡʔͷΞΠίϯΛจࣈͷӈʹʜʜ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
36. ྫ͑͹ɺαΠυϝχϡʔͷΞΠίϯΛจࣈͷӈʹʜʜ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
37. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ྫ͑͹ɺ
    μογϡϘʔυΛؙ֯ʹ
38. ྫ͑͹ɺμογϡϘʔυΛؙ֯ʹ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
39. ྫ͑͹ɺμογϡϘʔυΛؙ֯ʹ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
40. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ྫ͑͹ɺ
    ઃఆͷೖྗ߲໨ΛແବʹσΧ͘
41. ྫ͑͹ɺઃఆͷೖྗ߲໨ΛແବʹσΧ͘ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
42. ྫ͑͹ɺઃఆͷೖྗ߲໨ΛແବʹσΧ͘ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
43. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ྫ͑͹ɺ
    μογϡϘʔυΛϑϥοτʹ
44. ྫ͑͹ɺμογϡϘʔυΛϑϥοτʹ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
45. ྫ͑͹ɺμογϡϘʔυΛϑϥοτʹ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
46. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͳͲͳͲ
47. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ଟ෼ແݶʹ৭ʑ͍͡ΕΔͷͰ
    ΠϯεϖΫλͱ͔ΈͯΈΕ͹ૣ͍ͱࢥ͏ ࢲʹ͸σβΠϯͱ͔Α͘Θ͔Βͳ͍
48. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ΍ͬͺط੒඼Ͱ͍͍΍
49. બ୒ࢶ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࣗ෼Ͱ$44Λॻ͘ طଘͷςʔϚϓϥάΠϯΛೖΕΔ
50. બ୒ࢶ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࣗ෼Ͱ$44Λॻ͘ طଘͷςʔϚϓϥάΠϯΛೖΕΔ
51. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ςʔϚϓϥάΠϯΛೖΕΔ ެࣜσΟϨΫτϦͰλά
 ʮBENJOUIFNFʯͰݕࡧ͢Δͱ৭ʑ
52. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP 4MBUF
    "ENJO
    5IFNF CZ
    SZBOTPNNFST
53. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP 'MBUUZ
    
    'MBU
    "ENJO
    5IFNF CZ
    .JDIFMF
    .BSSJ
54. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP .BUFSJBM
    "ENJO
    5IFNF CZ
    DINMO
55. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP 6MUJNP
    81 XJUI
    3FEVY
    'SBNFXPSL
    CZ
    "SJOEP
    %VRVF
    
    
56. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP 'BODZ
    "ENJO
    6* CZ
    #PC
    0SDIBSE
57. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͳͲͳͲ
58. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ॴײ w શମతʹϑϥοτ΍ϚςϦΞϧσβΠϯʹ͢Δ ςʔϚϓϥάΠϯ͕ଟ͍
59. ͦͷଞɿσϑΥϧτςʔϚͰ͍͍͚Ͳ
 ɹؾʹೖͬͨ഑৭͕ͳ͍ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
60. "ENJO
    $PMPS
    4DIFNFS 
    8PSE#FODI
    ,ZPUP
    XCLZPUP 8PSE1SFTTίΞνʔϜʹΑΔϓϥάΠϯ
61. "ENJO
    $PMPS
    4DIFNFS 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
62. "ENJO
    $PMPS
    4DIFNFS 
    8PSE#FODI
    ,ZPUP
    XCLZPUP Կ΋ߟ͑ͣʹબΜͩΒ΋ͷ͘͢͝ݟʹ͍͘৭ʹͳͬͨʘ ?P? ʗ
63. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࣗ෼Ͱબ͹ͳͯ͘΋
    ΧϥʔεΩʔϚΛఏڙͯ͘͠ΕΔϓϥάΠϯ͸৭ʑ
64. "ENJO
    $PMPS
    4DIFNFT 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ΍ͬͺΓίΞͷਓͱ͔͕ܞΘͬͯΔϓϥάΠϯ
65. "OE
    0UIFSʜʜ 
    8PSE#FODI
    ,ZPUP
    XCLZPUP
66. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP Լखʹ͍͡ΔͷΞϨ w ࣗ෼ͰςΩτʔʹ࿔ͬͯ͠·͏ͷ͸୭ಘײ͕͍͢͝
 ɹࢲ͕खΛग़͢ʹ͸೥ૣ͔ͬͨΑ͏Ͱ͢ʜʜ
    w μογϡϘʔυͷελΠϧͱ͔͸ͪΌΜͱߟ͑ΒΕͯΔ
 ɹͪΌΜͱͨ͠σβΠφʔ͕ߟ͑ͯΔΜͰ͢ɺࢲ͕ఢ͏Θ͚͕ͳ͍
67. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ࿔Γա͗͸/( ׳Ε͍ͯΔਓͳΒͱʹ͔͘
 ԿΒ͔ͷࢀߟॻݟͳ͕Β͜Θ͝Θ࢖͏ਓͱ͔
 ઈରࠞཚ͢Δ͚ͩͳͷͰૉͷ··ೲ඼͠·͠ΐ͏
68. 
    8PSE#FODI
    ,ZPUP
    XCLZPUP ͓ΘΓʂ