id= 属性が割り振られていることがわかります。| sect-projects | スペース一覧 |
| sect-bookmarks | ブックマーク |
| sect-date-select | 期間選択 |
| sect-drafts | ドラフトモード |
| sect-work | 下書き |
| sect-proj-email | 投稿用メールアドレス表示 |
| sect-tips | ヒント |
| sect-contents | 目次 |
| sect-tags | タグ |
| sect-watchbox | 通知（ウォッチの設定） |
| sect-sidebar-entry | サイドバー記事 |
| sect-tasklist-controls | タスクの設定（完了タスクの表示/非表示切り替え） |
| sect-task-summary | タスクの集計 |
| calendar-controls | カレンダーの設定（予定やタスクなどの表示/非表示切り替え） |
| sect-following | フォローしているユーザー |
| sect-followers | フォローされているユーザー（フォロワー） |
| sect-metrics | 閲覧の多い記事（集計レポート） |
order を使って並び順を指定します。数字が大きいほど下に配置されます。order の初期値は 0 ですので、-1 を指定したボックスは一番上に表示されます。
/* サイドバーのボックスたちが入っているコンテナを並び替え可能にする */
#local-nav {
display: flex;
flex-direction: column;
}
/* ブックマークのボックスの order を -1 にする */
#sect-bookmarkds {
order: -1;
}
/* 期間選択ボックスの order を -2 にする */
#sect-date-select {
order: -2;
}
/* スペース選択ボックスの order を 2 にする */
#sect-projects {
order: 2;
}
image01.png
image02.png
image03.png
image04.png
