- はじめに -
デフォルトのWorkplaceは「人気の投稿」や「チャット」が常に画面内に表示されており、見辛く辛い部分が多いので、それらを解決するTipsを書いておく。
Workplaceユーザ向け。
- Chrome拡張を導入する -
以下のChrome拡張によって、Workplaceの視認性が向上する。
以下GithubのReadmeに解説が載っている。
また以下記事の筆者が作成している。
導入するだけで変化が見られるので楽。
Workplaceを社内で使うなら導入しておいた方が生産性が100倍高い。
- Chrome拡張でさらにCSSを触る -
Chrome拡張によってブラウザで見ているWebサイトの見た目を書き換える方法はいくつかある。
私は適当にStylishを使っているので以下。
導入後は拡張から「スタイルを作る」
スタイル設定画面で見るべきは以下赤枠の4つ
左上から
- スタイルの名前の設定と保存
- CSSコード記述フォーム
- 適応先
- セクションの追加
まずスタイルの名前を設定し、適応先を「ドメイン上のURL:facebook.com」とする。
私がfacebook.comドメイン上に適応しているCSSは以下
ありとあらゆる情報を消して、自分が「お気に入り」に登録しているグループ以外表示しない設定。
._3pk8 {display: none;} .sidebarMode .fbChatSidebar{display:none;} #contentArea { width: 100% !important; min-width: 502px; } #headerArea{ width: 100% !important; min-width: 502px; } .sidebarMode #globalContainer{padding-right: 0px;} ._2yq ._2t-d, ._2xk0 ._2t-d{width: calc(100% - 100px);} .timelineLayout #contentArea { width: calc( 100% - 330px) !important; min-width: 502px; } ._5nb8 { width: calc(100% - 345px); min-width: 512px; } li._4lh .fbTimelineTwoColumn[data-type="s"] { width: calc(100% - 345px); min-width: 512px; } .timelineLayout #contentArea { max-width: 100% !important; width: calc( 100% - 150px)!important; } ._4_7u { max-width: 100% !important; width: calc( 100% - 350px)!important; } .fbTimelineUnit { max-width: 100% !important; width: 100% !important; } .fbTimelineTwoColumn { max-width: 100% !important; width: 100% !important; } .timelineUnitContainer { max-width: 100% !important; width: calc( 100% - 25px)!important; } .fbTimelineUFI { max-width: 200% !important; width: calc( 100% + 20px)!important; } .letterboxedImage { max-width: 200% !important; width: 100% !important; } @media screen and (max-width: 1400px) { #globalContainer { width: calc( 100% - 100px) !important; min-width: 500px; } } @media screen and (min-width: 1401px) { #globalContainer { width: 1200px !important; } } @media screen and (max-width: 2000px) { .sidebarMode ._50tj{ padding-right: 20%; padding-left: 20%; } } @media screen and (max-width: 1600px) { .sidebarMode ._50tj { padding-right: 10%; padding-left: 10%; } } @media screen and (min-width: 2001px) { .sidebarMode ._50tj{ padding-right: 25%; padding-left: 25%; } } h4.navHeader { background-color: #999; padding: 3px; } h4.navHeader .sectionDragHandle {color: #fff;} ._1cwg { color: #fff; font-size: 9px; } ._5vb_, ._5vb_ #contentCol {background-color: #ccc;} h4.navHeader {padding: 3px;} ._1cwg {font-size: 9px;} ._bui .sideNavItem .imgWrap .img {display: none;} #leftCol{position: fixed;} ._wmx .homeSideNav .navHeader .sectionDragHandle{color: black;} ._2xk0._5vb_.hasLeftCol #leftCol{width: 240px;} html ._2xk0._5vb_.hasLeftCol #contentCol{margin-left: 240px;} ._wmx ._bui ._5afe .linkWrap{ margin-left: 10px; max-width: 228px; } ._55y4 ._bui .sideNavItem .linkWrap {margin-right: 2px;} ._wmx ._bui ._5afe .linkWrap.hasCount{max-width: 220px;} ._wmx .homeSideNav#pinnedNav ._bui ._5afe{padding-left: 20px;} #pagelet_company_logo{display:none;} #appsNav {display: none;} #navItem_230259100322928{display: none;} #navItem_4748854339{display: none;} #navItem_1434659290104689{display: none;} #navItem_2344061033{display: none;} #workGroupsTeamNav{display: none;} #workGroupsTeamNav{display: none;} #workGroupsAnnouncementNav{display: none;} #workGroupsFeedbackNav{display: none;} #workGroupsSocialNav{display:none;} ._wmx._wmx .homeSideNav .navHeader{display:none;} ._55y4 ._bui .sideNavItem .linkWrap{font-size: 13px;} ._wmx._wmx ._bui ._5afe .linkWrap {max-width: 100%;} #rightCol ._5zny{display:none;} div._4-u3._5dwa._5dwb{ display:none; padding:0px; } #rightCol ._i7m{display:none;} .uiBoxWhite{border:0px;}
上記CSSだけでは所謂本家のFacebookページに弊害が出たり、グループページで適応されない場合があるので、グループページに対してのみ以下を設定する。
先程の「他のセクションを追加」して、以下のようにコード2を設定。
適応先は「正規表現に一致するURL:.*facebook.com/groups/.*」とし、グループの情報ページに適応させている。
#rightCol ._4-u2._3-96._4-u8:nth-of-type(n+2) {display: none;} #rightCol { width: 100% !important; min-width: 502px; float:left; display:block; } #pagelet_rhc_footer {display: none;} .fixed_elem { position: absolute !important; top: 0px !important; } ._5ks6{ height:40px; width:40px; padding:0px; } #groupsRHCMembersFacepile, .profileBrowserGrid, ._5ks4{ height:40px; width:100%; } #groupsNewMembersLink div:nth-of-type(3){display:none;} #groupsNewMembersLink{display:none;}
上記に加えてグループフィードの中でも適度にCSSを書き換えて閲覧。
新しいセクションを作り、適応先を「正規表現に一致するURL:.*facebook.com/(?!.*groups).*」とすることで、グループフィードのページにCSSを適応。
#rightCol{display:none;} .timelineLayout #contentArea{width:100% !important;} ._4gt0{display:none;} .fbTimelineStickyHeader .stickyHeaderWrap{display:none;}
ほとんどの情報が消えるので気になるなら所々display:noneにしてあるところを外していく。