【ConoHa】ファイルマネージャーの検索ボックスを拡大するCSS

2025年1月26日WordPress

この記事では、PCウェブサイト版「ConoHa WINGコノハ・ウィング」の管理ツールのファイルマネージャーにある右上の検索ボックスを好きな横幅に拡大して使いやすくするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

僕はブログを公開するためにレンタルサーバー「ConoHa WING」を契約しています。本サービスには「WordPress」のデータ（画像やプラグイン）などを確認できるファイルマネージャー機能が搭載されています。

ファイルマネージャー画面の右上には検索ボックスがあるんですがかなり小さいです。僕が何か変な拡張機能とか設定をしているせいでこんな状態になっているのかな？と思うくらい小さくて見にくいです。おま環だったらどうしよ…。

マウスフォーカスすると少しは横に広がりますが、それでも狭くて長い文字列を検索した時文字が見切れてしまいます。

そもそもマウスフォーカスした時だけ広くなるんじゃなくて最初から広げてほしいなと思いました。マウスを移動するたびにアニメーションでごちゃごちゃするのも少し気になりました。

「ConoHa WING」のファイルマネージャーにある検索ボックスにマウスホバーしているGIF画像

勝手に僕が思っているだけで「ConoHa WING」様には頭が上がらないため、CSSを使って自分の環境上変えてみます。見た目上だけの反映で他人には影響しません。いつでもオンオフして元に戻せます。

本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

1. インストール方法
2. ConoHaのファイルマネージャーにある検索ボックスのカスタマイズCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

ConoHaのファイルマネージャーにある検索ボックスのカスタマイズCSS

「ConoHa WING」の管理画面にアクセスします。上部の「WING」タブを選択して左側サイドバーの「サイト管理」をクリックします。「ファイルマネージャー」をクリックします。

新しいタブでファイルマネージャーのページが表示されます。この状態でインストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

CSS

/*右上の検索ボックスカスタマイズ*/
div.elfinder-toolbar {
    /*上部のツールバーの余白具合*/
    padding: 4px 0 0px 320px !important;

    /*右上の検索ボックスの横幅と高さ*/
    &>div.elfinder-button-search {
        width: max-content !important;

        &>input {
            height: 40px !important;
        }

        /*右上の検索ボックス内にある「×」ボタンの位置*/
        & span.ui-icon-close {
            right: -26px !important;
        }
    }
}

/*検索ボックスフォーカス時のサーチメニュー*/
.elfinder-ltr .elfinder-button-search-menu {
    transform: scale(1.4) !important;
    right: 48px !important;
    top: 68px !important;
}