普段Misskey.ioに定住していますが、サブ運用でmastodonベースインスタンスのfedibirdにも登録しています。
Misskeyデッキ表示ライクになるようデッキ表示をいじってみました
- Misskeyと同じようにメニューを左側へ移動
- 幅広で邪魔なのでアイコンのみの表示
- アイコンを丸くするなど全体的に丸みを帯びたデザイン
- 投稿カラムは常に一番左
前提
Stylus
Chrome拡張機能。
fedibirdにはカスタムCSSは無いので外部からCSSを変更できるツールを使用。
テーマ
使用するテーマに合わせてフォント/背景色等は調整。
適用イメージ
Before
After
コード
以下のコードはPC表示でデッキ運用想定です。
モバイル表示には対応していないのでご注意ください。
/* fedibirdをMisskeyスタイルに変更するCSS */
/*
PC版fedibirdに適用するカスタムCSSです。
使用する際はGoogleChrome拡張機能「Stylus」をインストールして適用してください。
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
このCSSを適用した際の不具合、誤作動については保証できません。
使用は自己責任でお願いします。
＜連絡先＞
Misskey：@osakanafishsan@Misskey.io
*/
/* カラムの順序変更設定 */
/* 一番左のカラムにメニュー幅のmargin追加 */
.column:nth-child(2) {
margin-left: 73px;
}
/* 投稿カラムを最後尾に変更 */
.drawer {
order: 10;
padding: 10px 5px;
}
/* 既存CSSの上書き(上記CSSに統一) */
.column:first-child, .drawer:first-child {
padding-left: 5px;
}
/* drawerカラムのみになった場合marginを適用 */
.columns-area:not(:has(.column)) .drawer {
margin-left: 73px;
}
/* ナビゲーションパネル設定 */
/* ナビゲーションパネルを固定 */
.columns-area__panels__pane {
height: 100% !important;
min-width: 70px;
position: fixed;
z-index: 100!important;
padding: 0 0 0 3px;
background: #191b22;
overflow: visible;
}
/* 横幅をアイコンのみの幅に変更 */
.columns-area__panels__pane > .columns-area__panels__pane__inner {
width: 100%;
}
/* 文字を非表示 */
.columns-area__panels__pane > .columns-area__panels__pane__inner > .navigation-panel > .column-link > span {
display: none;
}
.column-link {
position: relative; /* 疑似要素の配置基準 */
visibility: visible;
text-decoration: none;
color: inherit;
}
.column-link::after {
position: absolute;
visibility: hidden; /* 初期状態では非表示 */
opacity: 0; /* 初期状態では透明 */
transition: opacity 0.3s ease;
top: 30%;
left: 90%;
background-color: #282c37; /* 背景色 */
color: white; /* 文字色 */
padding: 4px 5px;
border-radius: 5px;
white-space: nowrap; /* テキストを1行で表示 */
font-size: 10px; /* テキストサイズ */
}
.column-link[href="/web/timelines/home"]::after {
content: "ホーム";
}
.column-link[href="/web/notifications"]::after {
content: "通知";
}
.column-link[href="/web/timelines/public"]::after {
content: "連合";
}
.column-link[href="/web/accounts/2"]::after {
content: "Fedibirdインフォメーション";
}
.column-link[href="/web/timelines/tag/fedibird"]::after {
content: "ハッシュタグ";
}
.column-link[href="/web/timelines/direct"]::after {
content: "DM";
}
.column-link[href="/web/favourites"]::after {
content: "お気に入り";
}
.column-link[href="/web/bookmarks"]::after {
content: "ブックマーク";
}
.column-link[href="/web/emoji_reactions"]::after {
content: "リアクション";
}
.column-link[href="/web/lists"]::after {
content: "リスト";
}
.column-link[href="/web/circles"]::after {
content: "サークル";
}
.column-link[href="/web/group_directory"]::after {
content: "グループディレクトリ";
}
.column-link[href="/web/directory"]::after {
content: "ディレクトリ";
}
.column-link[href="/web/suggestions"]::after {
content: "おすすめユーザー";
}
.column-link[href="/web/trends"]::after {
content: "トレンド";
}
.column-link[href="/settings/preferences"]::after {
content: "ユーザー設定";
}
.column-link[href="/relationships"]::after {
content: "フォロー・フォロワー";
}
/* マウスオーバー時に表示 */
.column-link:hover::after {
visibility: visible; /* 表示する */
opacity: 1; /* 不透明にする */
z-index: 200!important;
}
.navigation-panel {
overflow: visible;
}
/* ナビゲーションパネルのアイコン調整 */
.navigation-panel > .column-link {
display: flex;
flex: auto;
justify-content: center;
}
.navigation-panel > .column-link > .column-link__icon {
margin: auto;
}
/* ベルだけ別設定 */
.navigation-panel > .column-link > .icon-with-badge > .fa-bell {
margin: auto;
}
.navigation-panel > .column-link > .icon-with-badge {
margin: auto;
max-height: 16px;
}
/* 表示アイコン設定 */
/* アイコンを丸くする */
.account__avatar {
border-radius: 50px;
}
.account__avatar-overlay-base {
border-radius: 50px;
}
.account__avatar-overlay-overlay {
border-radius: 50px;
}
/* カラムの見た目 */
/* カラムの角を丸くする */
.column-header {
border-radius: 10px 10px 0 0 !important;
}
.search > label > .search__input {
border-radius: 10px;
}
.drawer__header {
border-radius: 10px;
}
.drawer__inner {
border-radius: 10px;
}
/* スクロールバー設定 */
/* スクロールバーを細くする */
.scrollable::-webkit-scrollbar {
width: 6px;
}
.column > .scrollable {
border-radius: 0 0 10px 10px;
}
.status__action-bar {
margin: 15px 0 10px;
}
/* 投稿欄設定 */
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
color: #fff;
background: #282c37;
}
.compose-form .compose-form__modifiers {
background: #282c37;
}
.compose-form .compose-form__buttons-wrapper {
background: #313543;
}
最後に
Misskeyメイン、fedibirdサブでタブを反復横跳びしてるためメニュー位置が違うと使いづらいので統一してみた。
見た目キレイだがメニューの縦スクロールができなかったり(レスポンシブ対応)、カラムをメニュー下の左端まで移動できてしまったりと粗はあるので後々修正したい。モバイル表示もそのうち…
このコードを作った後に知ったが、CSS記法にネストが使用できるようになったそうなのでそれに合わせて書き直したいところ。