Scrapboxのスタイルシート変更例


〈目次〉


設定のしかた

Scrapboxに独自のスタイルシートを適用する手順はこちらに説明されています。

備考

下記の各スタイルシートmax-widthとあるのは横幅の最大値を指定するものですが、そこをwidthに変えれば、横幅を固定できます。

スタイルシートの例

ダークテーマ

外観

〈各ページの本文〉
f:id:ichbin:20181009133133p:plain
入力中の文字色は、普通の本文と同じ(灰色)です。
内部リンクは青色、コンテンツが作成されていない内部リンクはオレンジです。
入力中のカーソルは白です。
テロメア(更新された行を示す行頭の色)のうち、最近更新されたものは水色で表示します。最近に更新されていないものは無色(背景色と同じ)にしてあります。

〈各ページの下に表示される関連ページおよび、トップページに表示される各ページ〉 f:id:ichbin:20181003141800p:plain

下準備

Scrapboxの設定画面で、Themeとして“Hacker 1”を選択しておきます。
f:id:ichbin:20181003141829p:plain

CSS

※最終更新:2018/10/09
CSSの作成には、塩澤一洋さんの「黒いUserCSS」を参考にし、CSSの一部をそのまま使用させて頂いています。

 .page, .page a, .page video, .page iframe,
 .code-block-start, .code-block-start span {
    filter: invert(100%);
 }

/*各ページの本文が入る領域*/
 .page {           
    box-shadow:none;
    background-color: #dad5cf;
    border:solid 1px #888;
      }

/*各ページの本文の文字色*/
.editor{
    color:#282828 !important;
}

/* 入力時の文字色と背景色*/
 textarea#text-input:focus {
    background: #dad5cf;
}

/*ページ本文でのリンクの色*/
.page a, .page a.link:hover{color:#7c9ff7 !important}
.line a.empty-page-link{color:#fd7373 !important}
.line a.empty-page-link:hover{color:#fd7373 !important}
a.page-link:hover{color:#7c9ff7 !important}
span.quote a.page-link, span.quote a.page-link:hover{color:#88A7F7 !important}

/*各ページの下に表示される関連ページ一覧における本文のフォントサイズ*/
div.col-page .grid li.page-list-item a .description{font-size:13px !important;color:#ccc}

/*関連ページ および トップページにおける各ページの背景色*/
.grid li.page-list-item a {background-color: rgba(57, 60, 70, 0.6)}

/*関連ページ一覧やトップページで各ページにマウスオーバーしたときの背景色変更をしない*/
.grid li.page-list-item a .hover{background-color:rgba(0,0,0,0) !important}

 /* スリムなテロメア */
 .line .telomere .telomere-border, .line .telomere .telomere-border.unread {
    transition: none;
    box-sizing: content-box; border-color: #252A30 
}
 .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
    box-sizing: border-box; width: auto;
    border-color: #252A30; background-color: transparent ;
}
 
 /* 新着以外のテロメアの色と太さ */
 .line .telomere .telomere-border {
    background-color: #252A30; width: 2px;
}
 
 /* 新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread {
    background-color: #4DC3FA; width: 5px;
}
関連情報

各ページの下に表示される関連ページの大きさを変える

各ページの下に表示される関連ページの大きさを変えるものです。
関連ページ一覧の1個目(左上)に表示されるキーワードのカードも、同じ大きさに揃えてあります(こちらの大きさを変えないことも可能です)。 f:id:ichbin:20180921160741p:plain

div.related-page-list li.grid-style-item, div.related-page-list li.relation-label{
    width:190px !important;  /* 横幅を190pxにする */
    height:280px !important;  /* 縦の長さを280pxにする */
    }

関連キーワードのカードの大きさを変えたくない場合は、, div.related-page-list li.relation-labelの部分を消します。

トップページに表示される各ページを1行ずつに細く表示する

トップページに表示される各ページを、タイトルと本文を1行ずつ表示する細いサイズにします。各ページのアイコンは表示されません。
各ページのタイトルの下には、本文の1行目が表示されます。 f:id:ichbin:20180828133801p:plain

div.page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.page-list  div.icon{
    display:none
    }
div.page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

各ページの下に表示される「関連ページ」を各1行ずつに細く表示する

各ページの下に表示される「関連ページ」のそれぞれを、タイトルと本文を1行ずつ表示する細いサイズにします。リンク先ページのアイコンは表示されません。
内部リンクしているキーワードの見出し部分はデフォルトのままになっており、見出しのあるところだけは行が短くなります。 f:id:ichbin:20180828132138p:plain

div.related-page-list li.page-list-item{
    width:auto !important;
    height:80px !important;  /* この数値を変えれば各ページの高さが変わる */
    float:none
    }
div.related-page-list div.icon{
    display:none
    }
div.related-page-list  div.description{
    padding:0 12px !important
    }
li.ellipsis{
    float:none
    }

トップページで、ページ一覧が表示される領域の横幅の最大値を変える

div.page-list{
    max-width:900px;  /* 900pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828112312p:plain:w300

〈適用後〉
f:id:ichbin:20180828112253p:plain:w300

各ページのタイトルと本文が入る領域の横幅の最大値を変える

div.page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828103744p:plain:w300

〈適用後〉
f:id:ichbin:20180828103813p:plain:w300

各ページの下の「関連ページ」一覧が表示される領域の横幅の最大値を変える

div.related-page-list{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828121036p:plain:w300

〈適用後〉
f:id:ichbin:20180828121048p:plain:w300

各ページのタイトル・本文・関連ページが表示される領域の横幅の最大値を変える

div.col-page{
    max-width:800px;  /* 800pxにする場合 */
    margin-left:auto;
    margin-right:auto
    }

〈適用前〉
f:id:ichbin:20180828122319p:plain:w300

〈適用後〉
f:id:ichbin:20180828122332p:plain:w300

Cinnamon 3.6のnemo(ファイルマネージャー)でGoogle Driveに接続する方法

Linuxのデスクトップ環境がCinnamon 3.6である場合に、ファイルマネージャーのnemoでGoogle Driveに接続する方法を紹介します。Manjaro Linux Forumに掲載されているHow toを和訳し再構成・加筆したものです。

インストールするもの

※Arch Linux系のLinuxを使っている場合は、3つともパッケージマネージャーからインストールできます。コマンドラインからはsudo pacman -S gnome-online-accounts gvfs-goa gvfs-googleと実行すればインストールできます。

設定の手順

「システム設定」の中のOnline Accountsの項目を開き、 f:id:ichbin:20180819172832p:plain

Gmailのアドレスとパスワードを入力してGoogleにログインし、 f:id:ichbin:20180819172847p:plain

GNOMEGoogleアカウントへのアクセス許可を与える。 f:id:ichbin:20180819172927p:plain

f:id:ichbin:20180819172903p:plain

最後の画面では、「ファイル」の選択欄をオンにしておく必要があるでしょう(下記)。 f:id:ichbin:20180819173013p:plain

ここまで済ませてからLinuxを再起動すると、nemoのサイドバーの「ネットワーク」のところに自分のGmailアドレスが表示され、それをクリックするとnemoでGoogle Driveに接続できます。

【PCブラウザ版】Twitterの「○○さんがフォローしています」をタイムラインに表示させない方法

機能

PCのFirefoxまたはChromeTwitterのタイムラインを閲覧している場合にのみ、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに表示させないようにすることができます。

設定の手順

“うみの さち”さんのブログ「ツイッター:「○○さんがいいねしました」を非表示にする - 知らなきゃ絶対損するPCマル秘ワザ」で紹介されている方法を応用します。このリンク先で説明されている「導入手順」を実行すると、ブラウザ(FirefoxまたはChrome)にStylusというアドオン(拡張機能)がインストールされます。

Stylusの設定画面を開きます。Firefoxの場合は、「アドオン」を一覧する画面を開き、Stylusのアイコンの右側にある「設定」をクリック。 f:id:ichbin:20180818191404p:plain

次の画面で、一番下にある「スタイル管理」をクリック。 f:id:ichbin:20180818191416p:plain

次の画面に、“「○○さんがいいねしました」を非表示にする”という名前のリンクがあるはずですので、それをクリック。 f:id:ichbin:20180818191440p:plain

次の画面で、右側には、それぞれ「コード1」と「コード2」というタイトルが付いた2つの入力欄があるはずです。 f:id:ichbin:20180823082136p:plain

「コード2」の入力欄には、

div[data-component-context="suggest_activity_tweet"]
  {
    display: none !important;
  }

という4行があらかじめ入力されているはずです。これは、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させないようにするためのものです(上述の"うみの さち"さんが作成なさったもの)。

もしも、「○○さんがいいねしました」という但し書き付きのツイートをTwitterのタイムラインに表示させるようにしたい場合は、その4行を消します。

次に、「コード2」の入力欄の最後の行に、半角で

 div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }

と入力。*1

入力すると、「コード2」のところはこのようになります。 f:id:ichbin:20180823082849p:plain

入力し終わったら、その画面の左上にある「保存」ボタンをクリック。設定はこれで終わりです。Stylusの画面は閉じても構いません。

この設定をおこなったFirefoxChromeTwitterのタイムラインを閲覧中は、「○○さんがフォローしています」という但し書き付きのツイートが表示されなくなります。

タイムラインに再び表示させる方法

上述の設定を終えた後で、「○○さんがフォローしています」という但し書き付きのツイートをタイムラインに再び表示させるようにするには、上述の入力内容の前後を、半角の/**/という文字で囲んで、下記のようにします。

 /*div[data-component-context="tweet-context with-icn"]
     {
     display:none !important;
      }*/

画面はこのようになるはずです。 f:id:ichbin:20180818192059p:plain

この状態で、左上の「保存」ボタンを押せば完了です。

*1:行頭の字下げは、しなくてもかまいません。この4行の中での改行も、必須ではありません。

Linuxの音楽再生ソフト・動画再生ソフトをAndroid端末で操作する方法

Linuxで起動している音楽再生ソフトや動画再生ソフトを、Android端末から操作する方法を紹介します。

〈目次〉


機能

Android端末から、これらの操作ができます

  • 再生/一時停止
  • 早戻し/早送り
  • 前の曲(ファイル)/次の曲への移動
  • 曲(ファイル)の特定の位置への移動(シークバーの操作)
  • 音量の変更(操作対象である個別のソフトウェアの音量のみを変更できる)

必要なもの

Linux側にはこの2つのソフトをインストールします。

  • KDE Connect
  • KDE Connect Indicator

ただしLinuxのデスクトップ環境がKDE Plasmaである場合は、Linux側へのこれらのソフトのインストールはおそらく不要です。また、デスクトップ環境がGNOMEである場合は、GSConnectというGNOME Shell Extensionで代用できます

Android端末にはこちらをインストールします。

LinuxAndroid端末は同じLANに接続している必要があります。

設定の手順

デスクトップ環境がKDE Plasmaである場合は、下記の説明とは手順が異なるかもしれません。また、デスクトップ環境がGNOMEであり上述のGSConnectを使う場合は、設定の手順と使い方についてはLinux Fanさんの記事をお読み下さい。

LinuxのソフトウェアセンターやパッケージマネージャでKDE ConnectとKDE Connect Indicatorを検索し、インストールします。

f:id:ichbin:20180722101503p:plain
(例えばManjaro Linuxのパッケージマネージャ(Pamac manager)で“kde connect”と検索すると、このようにヒットします)

端末(Terminal)からインストールする場合のコマンドは、Linuxディストリビューションによって異なります。

Linuxファイアウォールに設定を加えます(設定の詳細)。ファイアウォールufwであれば、Terminalでこのコマンドを実行します。

sudo ufw allow 1714:1764/udp
sudo ufw allow 1714:1764/tcp
sudo ufw reload

Google Play Storeから、Android端末にKDE Connectをインストール。

f:id:ichbin:20180722114343p:plain

LinuxKDE Connect Indicatorを起動すると、画面内のいわゆる「タスクバー」などにKDE Connect Indicatorのアイコンが表示されますので、これを右クリックして現れる“Configure”をクリック。

f:id:ichbin:20180722101821p:plain
(縦長のスマートフォンのような形のアイコン。この画像では右から6番目。)

すると、このような画面が出ます。

f:id:ichbin:20180722101940p:plain

“Refresh”というボタンの上側の欄に、KDE Connectをインストール済みのAndroid端末が表示されます。この画像では“BNT-71”という端末が表示されていますので、これをクリック。すると、この画面の右側に“Request pair”というボタンが出ます。これをクリック。

すると、Android端末に“Pairing request from ○○”という通知が来ます。

f:id:ichbin:20180722102215p:plain

この通知内の“ACCEPT”をクリック。すると、この画面になります。

f:id:ichbin:20180722102304p:plain

そしてこのときLinux側でも、このAndroid端末と連携できたことを示す画面になります(下記のように端末名の左側にアイコンが付くなど)。

f:id:ichbin:20180722102001p:plain

この画面で“Available plugins”と書いてあるところの下に複数のアイコンが並んでいます。音楽や動画の操作をするためには、必ず“Multimedia control receiver”にチェックを入れておきます(他の項目へのチェックは必須ではありません)*1。そして画面下の“OK"をクリック。

次に、Android端末のKDE Connectの画面で下記のように“Multimedia control”が表示されていることを確認します。

f:id:ichbin:20180722102304p:plain

もしそこに“Multimedia control”が表示されていなければ、その画面の右上にある「︙」のアイコンをタップし、“Plugin settings”の画面に入ります。

f:id:ichbin:20180722102501p:plain
(最下段に“Multimedia controls”)

“Plugin settings”の画面で“Multimedia controls”にチェックを入れておきます(他の項目へのチェックは必須ではありません)。

設定はこれで終わりです。

使い方

上述のとおりLinux側にはKDE ConnectとKDE Connect Indicatorという2つのソフトをインストールしましたが、音声/動画の操作をAndroid端末から行おうとする際に、後者(KDE Connect Indicator)を起動する必要はありません。また前者はLinuxの起動時に自動で起動するしくみになっているようです。Android側のKDE Connectも、デフォルトでは自動で起動するはずです。従って、KDE ConnectとKDE Connect Indicatorのインストール後は、特に下準備などを必要としません。

Linuxで音声や動画を再生するソフトを起動し再生を始めると、Android端末に通知が出ます。この通知からは〈再生・一時停止・前の曲へ移動・次の曲へ移動〉という操作ができます。Android端末の画面ロック中にも通知を表示する設定にしておけば、画面ロック中でも通知からの操作ができます。

f:id:ichbin:20180722102556p:plain

同じく、再生中にAndroid端末のKDE Connectを起動し、“Multimedia control”をタップすると、このような画面になります。より多くの操作ができます。

f:id:ichbin:20180722102654p:plain

この画像ではGoogle Play Music Desktop Playerを操作しており、操作対象のソフトの名前が中央あたりに表示されています。Linux側で他のソフト(例えばVLCメディアプレイヤー)を同時に起動していれば、下記のように操作対象のソフトを選択欄で切り替えることができます。

f:id:ichbin:20180722102712p:plain

*1:使用しない項目(機能)からはチェックを外しておいたほうが快適です。

記事にするほどでもない小技集(5)

〈目次〉


Google Play Musicで歌詞を表示する方法

Google Play Music Desktop Playerを使うと、曲によっては歌詞を表示できます。 f:id:ichbin:20180922094050p:plain
(歌詞表示中の画面。曲の進行に連動してスクロールされます。色は黒地に白字で固定されているようです)

各曲のタイトルの右あたりにある「︙」の形のアイコンをクリックすると、「歌詞を表示(Beta)」というメニューが表示されるので、それをクリックすれば歌詞が表示されます。

Ubuntu 18.04.1がロゴ画面から先へ進まなくなったときの対処法

起動中にUbuntuのロゴが表示されたところから先へ進まなくなった場合、こちらの方法を実行すると、正しく起動できる可能性があります。

文中でviを使う部分では、

「vi」で編集する場合は、以下のコマンドを実行します。

vi /etc/gdm3/custom.conf

ファイルが開いたら、以下の行を探します。

#WaylandEnable=false

行頭の「#」を削除し、以下のように編集します。

WaylandEnable=false

と説明があります。行頭の#の削除はdeleteキーを押せばできます。その後、Control + xとキーを押せば、テキストエディター(vi)の編集モードが終了します。

LinuxでHDDやパーティションが「読み取り専用」でマウントされたときの対処法

そのハードディスク(パーティション)がWindowsと共用である場合には、Linuxを一旦シャットダウンし、Windowsを一度起動してそれをシャットダウンしてから再びLinuxを起動してマウントすると、「読み取り専用」の状態が直る場合があります。

Manjaro LinuxShutterのアップデート後に編集ボタンが機能しなくなった場合の対処法

perl-Goo-Canvasを再インストールすれば解決すると思います。