【Stylus】文字数カウントをパネル登録、CSSでカスタマイズしてみよう!

2022年1月27日Stylebot&Stylus

Stylusのアイコン

この記事では、リアルタイムで文字数を計測してくれるサイト「文字数カウント」をパネルに登録、CSS(Chrome拡張機能Stylus)でカスタマイズする方法について書きます。

文字数カウントのスクリーンショット

文字数カウントとは、文字数を計測してくれるWebサービスです。

任意の文字(日本語でも英語でもOK)を入力欄に入力すると、リアルタイムで文字数を表示してくれます。

普通の文字数だけでなく、改行を除いた文字数、バイト数、行数なども一緒に表示してくれます。

文字制限などもないため、大学の字数制限があるレポートを書く時に役に立ちます。Wordでもいいのですが、200字程度の感想文の時は、こちらのサイトを利用した方が早いです。

誰でも無料で利用できます。

本サイトは、Vivaldiブラウザのサイドバーにウェブパネルとして登録できます。記事を見ながら、パネルでサクッと文字数を計測できます。

しかし、サイドバーで使う分には、若干いらない要素が多いので、CSSで使いやすいようにカスタマイズするのがおすすめです。

提供元:Sundry Street

前提

この記事は、既にStylus をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Stylusのインストール

似たような拡張機能で「Stylebot」というのもありますが、こちらは、ウェブパネル内に適用することはできません。

参考:【Stylebot】サイトにCSSを適用できるChrome拡張機能の使い方 | ナポリタン寿司のPC日記

僕が知っている限り、ウェブパネル内のサイトにCSSを適用できるのは本拡張機能のみです。

名前が似ているので、間違えないようにインストールしましょう。

ウェブパネルに登録する方法

文字数カウントを開きます。

サイドバーを表示して、ウェブパネル追加アイコンをクリックします。デフォルトだとF4で表示します。

パネルの登録ボタンをクリック

現在開いているタブのURLが自動で入力されているので、そのまま「+」をクリックします。

ウェブパネルを追加

ウェブパネルとして登録されます。

文字数カウントがサイドバーに登録される

ウェブパネルは、Shiftを押しながらマウスのドラッグ&ドロップで並べ替えできます。

Shiftを押しながらドラッグ&ドロップでウェブパネルの項目を並べ替え

ショートカットキーを設定する時に、順番が関係してきます。上から順に1、2、3…となっています。

より詳しいパネルの使い方については、下記記事を参考にしてみてください。

参考:【Vivaldi】サイドバーの使い方。ウェブパネルが便利! | ナポリタン寿司のPC日記

CSS

パネルに登録するだけでも使えますが、サイドバーで見る分には、不要な項目が多い気がします。

具体的には、ヘッダー、ナビゲーションバー、タイトル、「テキストボックスに入力された~」という説明文、文字数だけでいいのに、余計に表示されるバイト数(〇〇)…などなどです。

サイドバーに文字数カウントサイトを登録すると少し不要な項目が目立つ

CSSを使うことで、ごっそり自分がいらないと思った項目を非表示にできます。あくまで自分のPCだけの話なので、他の方に迷惑がかかることはありません。

運営元にとっては、広告や宣伝文句を非表示にされると迷惑ですけどね…。ほどほどに…。

文字数カウントを開いて、StylusのアイコンStylus アイコンをクリックします。

「次のスタイルを書く」の「sundryst.com」をクリックします。

次のスタイルを書く sundryst.com

スタイルシートが開くので、CSSを書き込んでいきます。

スタイルを編集画面が開くのでCSSを書いていく

CSS 知っている人は、自分で好きなように書き込めばいいのですが、わからない人のために用意しました。

下記コードを適用すると、ごっそり見た目が綺麗になります。

/*ヘッダー非表示*/
nav.navbar.navbar-expand-lg.navbar-light.bg-light {
  display: none !important;
}

/*ナビゲーションバー非表示*/
nav[aria-label="breadcrumb"] {
  display: none !important;
}

/*タイトル非表示*/
.page-header {
  display: none !important;
}

/*タイトル下の説明文非表示(結果欄は表示させる)*/
p:not(#converted) {
    display: none !important;
}

/*入力欄下の広告非表示*/
div#div-gpt-ad-1593164128223-0 {
  display: none !important;
}

/*アンカー広告非表示*/
.ad-overlay {
  display: none !important;
}

/*使い方などの説明文非表示*/
.d-flex {
  display: none !important;
}

/*『「すぐ使える便利ツール」一覧に戻る』非表示*/
.back-link {
  display: none !important;
}

/*フッターのコピーライト非表示*/
footer {
  display: none !important;
}

/*入力欄の「カウントしたい文字列を入力もしくは貼り付けてください。」非表示*/
.form-control::placeholder {
  color: transparent;
}



/*----------------------------
好みに応じて利用してください
----------------------------*/
/*入力欄を少し下に移動する*/
form.form-horizontal {
  margin-top: 100px !important;/*好きな数値にしてください*/
}
/*----------------------------
好みに応じて利用してください終了
----------------------------*/



/*-----------------------------------------------------------------------
以下、全部を適用するのではなく、自分が非表示にしたい項目だけを利用してください。
-------------------------------------------------------------------------*/
/*「改行を除いた文字数」非表示*/
div.form-group:nth-of-type(5) {
  display: none !important;
}

/*「改行、空白を除いた文字数」非表示*/
div.form-group:nth-of-type(6) {
  display: none !important;
}

/*「バイト数 (UTF-8)」非表示*/
div.form-group:nth-of-type(7) {
  display: none !important;
}

/*「バイト数 (UTF-16)」非表示*/
div.form-group:nth-of-type(8) {
  display: none !important;
}

/*「バイト数 (Shift-JIS)」非表示*/
div.form-group:nth-of-type(9) {
  display: none !important;
}

/*「バイト数 (EUC-JP)」非表示*/
div.form-group:nth-of-type(10) {
  display: none !important;
}

/*「バイト数 (JIS)」非表示*/
div.form-group:nth-of-type(11) {
  display: none !important;
}

/*「行数」非表示*/
div.form-group:nth-of-type(12) {
  display: none !important;
}

/*「原稿用紙」非表示*/
div.form-group:nth-of-type(13) {
  display: none !important;
}
/*-----------------------------------------------------------------------
自分が非表示にしたい項目だけを利用してください。終了
-------------------------------------------------------------------------*/

コードを書き込めたら、「保存」ボタンを押して、パネル内ページをリロードします。

スタイルを編集 保存

上記コードを適用すると、以下のようになります。

CSSで不要な項目を非表示にした前と後の比較画像

入力欄と文字数の結果欄のみという、シンプルな表示になっています。

当然ですが、文字カウント機能は、今まで通り利用できます。

CSSで非表示にした後でも問題なく文字カウントできる

少し下にずらすCSSについて

タイトルや説明文を非表示にすると、自動的に入力ボックスが一番上に配置されます。

余白0の上ぴったりの配置になったので、少し使いにくいです。

そこで、「入力欄を少し下に移動する」のコードで、入力ボックス、その下の結果欄を少し下にずらしています。これで見やすくなります。

適用前と適用後の画像を貼っておきます。

「入力欄を少し下にずらすCSS」適用前と適用後の画像

数値は「100px」にしていますが、好みに応じて、「30px」とか「150px」にしてみましょう。

特定の項目について

「以下、全部を適用するのではなく、自分が非表示にしたい項目だけを利用してください。」より下のコードについては、好みもあると思うので、好きなように取捨選択してみましょう。

例えば、「改行を除いた文字数」は表示させたいなーという時は、以下のコードを書かなければ、非表示になりません。

/*「改行、空白を除いた文字数」非表示*/
div.form-group:nth-of-type(6) {
  display: none !important;
}

サイドバー内だけに適用する

タブで開いた時は、いつも通りのデザインにして、サイドバーで開いた時だけ変更したい場合は、以下のコードの間に、CSSを書き込むようにします。

/*サイドバー(パネル内)だけで動作*/
@media screen and (max-width: 700px) {
  /*ここにコードを書いていく*/
}

例えば、「サイドバー内だけで、入力欄を少し下にずらしたい」という場合は、以下のコードになります。

/*サイドバー(パネル内)だけで動作*/
@media screen and (max-width: 700px) {
  /*ここにコードを書いていく*/
  /*入力欄を少し下に移動する*/
  form.form-horizontal {
    margin-top: 100px !important;/*好きな数値にしてください*/
  }
}

サンドイッチしてあげるイメージです。

上記コードは、特定の横幅(700px以下)の時に適用するという意味です。

サイドバーは、大体横幅700px以下だと思うので、普通のタブで開いたときは通常デザイン、サイドバーで開いた時だけCSSが反映されたデザインになります。

本来は、スマホで見たときのデザインを変更するためですが、サイドバーにも応用できます。

感想

以上、ブロガーに便利なツール「文字数カウント」をウェブパネルに登録する方法、CSSで不要な項目を非表示にする方法についてでした。

Posted by ナポリタン寿司