kurage.cc マストドンのwebUIを透過色にして壁紙を適用する方法 kurage.cc

ぜま✅クラゲ丼鯖缶 2018年2月12日(月)
こんにちは。
マストドンの鯖缶さん向けに、webUIの外観を手軽にイメージチェンジするために壁紙を使う方法をご紹介します。全体を透過させて壁紙が透けて見えるようになっているのがミソです。
  • コンフリクトとか面倒なので既存のファイルの改変は最小限にして、新たにカスタムテーマを一つ増やしそこに壁紙を適用します。
  • マストドンは執筆時点の最新版(2.2.0)前提ですが、前のバージョンでもたぶんいけると思います。
  • 白背景への対応は今回は想定していません。暗めの色の壁紙を使ったほうが見やすいです。
  • 過去の参考記事

    tumujinさん mastodon のテーマカラーの変更は簡単だよ - Qiita 7_nanaさん Mastodon(v1.4.4)を白くする追加CSS

    壁紙の適用例

    壁紙の適用例1壁紙の適用例2

    やりかた

    1 テーマを増やします。config/themes.yml に1行追記します。テーマの名前はなんでもいいですがここではcustomとします。
    default: styles/application.scss custom: styles/application_custom.scss
    2 新しく追加したほうのテーマをデフォルトにするため config/settings.yml の31行目あたりをcustomに書き換えます。
    ... noindex: false theme: 'custom' notification_emails: ...
    3 app/javascript/styles/application.scss をもとに次のように変更(末尾2行は追記)したものを application_custom.scss の名前で同じ app/javascript/styles ディレクトリに保存します。background.jpg のところは使用する壁紙のファイル名に変えて下さい。
    @import 'mastodon/mixins'; @import 'custom/variables'; @import 'fonts/roboto'; ... ... @import 'mastodon/rtl'; $wallpaper: "custom/background.jpg"; @import 'wallpaper';
    4 以下の内容のファイルを新規に作成し app/javascript/styles/wallpaper.scss の名前で保存します。透過色などの設定がここに書いてあり、特に変更しなくてもだいたいいい感じになると思います。
    ::-webkit-scrollbar-thumb { background: lighten($ui-base-color, 20%); } ::-webkit-scrollbar-thumb:hover { background: lighten($ui-base-color, 28%); } ::-webkit-scrollbar-thumb:active { background: lighten($ui-base-color, 20%); } body { &.app-body { background: url($wallpaper) no-repeat fixed center top; } &.about-body { background: url($wallpaper) no-repeat fixed center top; } &.tag-body { background: url($wallpaper) no-repeat fixed center top; } &.admin { background: url($wallpaper) no-repeat fixed center top; } &.error { background: url($wallpaper) no-repeat fixed center top; } } .focusable { &:focus { .detailed-status, .detailed-status__action-bar { background: rgba(lighten($ui-base-color, 8%), 0.3); } } } .detailed-status { background: rgba(lighten($ui-base-color, 4%), 0.3); } .detailed-status__action-bar { background: rgba(lighten($ui-base-color, 4%), 0.3); } .account__header { background: rgba(lighten($ui-base-color, 4%), 0.3); } .column { > .scrollable { background: rgba($ui-base-color, 0.3); } } .ui { background: rgba(darken($ui-base-color, 15%), 0.3); } .drawer__inner { background: rgba(lighten($ui-base-color, 13%), 0.3); } .drawer__inner__mastodon { background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto; } .drawer__header { background: rgba(lighten($ui-base-color, 8%), 0.3); } .tabs-bar { background: rgba(lighten($ui-base-color, 8%), 0.3); } .column-back-button { background: transparent; } .column-header__back-button { background: transparent; } .column-link { background: rgba(lighten($ui-base-color, 12%), 0.3); &:hover { background: rgba(lighten($ui-base-color, 22%), 0.6); } } .column-subheading { background: rgba($ui-base-color, 0.3); } .getting-started__wrapper, .getting_started { background: rgba($ui-base-color, 0.3); } .getting-started { background: rgba($ui-base-color, 0.3); } .column-header { background: rgba(lighten($ui-base-color, 4%), 0.3); } .column-header__button { background: transparent; &.active { background: rgba(lighten($ui-base-color, 8%), 0.6); &:hover { background: rgba(lighten($ui-base-color, 14%), 0.6); } } } .column-header__collapsible-inner { background: rgba(lighten($ui-base-color, 8%), 0.6); } .empty-column-indicator, .error-column { background: rgba($ui-base-color, 0.3) } .account-section-headline { background: rgba(lighten($ui-base-color, 2%), 0.3); } .landing-page { p, li { color: lighten($ui-primary-color, 10%); } em { color: lighten($ui-primary-color, 20%); } h1 { small { color: darken($ui-secondary-color, 20%); } } .header-wrapper { background: transparent; &.compact { background: transparent; } } .header { .links { a { color: lighten($ui-primary-color, 20%); } } .hero { .simple_form, .closed-registrations-message { background: rgba(lighten($ui-base-color, 8%), 0.7); } } } .about-short { background: rgba(darken($ui-base-color, 15%), 0.3); } .information-board { background: rgba(darken($ui-base-color, 15%), 0.3); .panel { background: rgba(darken($ui-base-color, 15%), 0.3); } } .features { background: rgba(darken($ui-base-color, 15%), 0.55); #mastodon-timeline { background: transparent; } } .extended-description { background: rgba(darken($ui-base-color, 15%), 0.55); } .footer-links { background: rgba(darken($ui-base-color, 15%), 0.55); } @media screen and (max-width: 675px) { .header { .links { background: transparent; } .hero { .simple_form, .closed-registrations-message { background: transparent; } } } } &.tag-page { .features { .container { .about-mastodon { .about-hashtag { background: transparent; } } } } } } .table { & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { background: rgba($ui-base-color, 0.5); } } .admin-wrapper { .sidebar-wrapper { background: transparent; } .sidebar { ul { a { &.selected { background: rgba($ui-base-color, 0.4); } } ul { background: rgba(darken($ui-base-color, 4%), 0.6); } } } .content-wrapper { background: rgba($ui-base-color, 0.4); } }
    5 app/javascript/styles の下にテーマと同じ custom という名前でディレクトリを作ります。 6 app/javascript/styles/mastodon の中にある variables.scss をいま作った custom ディレクトリに同じ名前のままコピーします。配色を変えたくなった場合はこのファイル中の値を書き換えて下さい。 7 壁紙にしたい画像ファイル(background.jpg 等) を同じ app/javascript/styles/custom ディレクトリにコピーします。 8 以上で終わりです。git add、git commit (git push) して assets:precompile です。お疲れさまでした。 9 さらにテーマを増やしたい場合はcustomを別の名前にして1からやり直します。2はどれか一つのテーマを選びます。4は一度作ってあれば飛ばして大丈夫です。 複数のテーマがある場合の切り替えはアカウントごとに 設定 → ユーザー設定 → サイトテーマ から行うことができます。

    過去の記事:マストドンで学術インスタンスみたいなものをやろうとしたらわりと異端だった 次の記事:マストドンに日本語対応の全文検索を導入 クラゲ丼 (kurage.cc)