パネルアクション

Last-modified: 2026-03-21 (土) 15:00:53

パネルアクションはペインやウィンドウの上下にある自由なボタンを置けるエリア。Sikiウィンドウ上のあらゆる場所で自由にボタンを設置/再配置/撤去できる。


パネルアクションについて

大半のコマンドや操作をアイコンボタン化してヘッダーとフッターに配置する機能。
『設定 > レイアウト > アクション > =パネル設定エリア=』から設定箇所を選択。0.25.12以降は各ヘッダー/フッターの右クリックメニューからも設定画面を開くことができる。

新規ボタン作成時と編集欄の🖊クリックからは基本となるコマンドしか選択できないが、実行されるコマンド欄にあるコマンド名をクリックすることで編集画面が開かれ設定可能な全てのコマンドを選択できるようになる。ただし実行コマンド欄が🚫の場合は🚫をクリックしても編集画面へは入れない。(例1
そのため基本となるコマンドにはない任意のコマンドを追加したい時は「** 空のコマンド枠 **」を選択して設定し始めるとよいだろう。(例2

大半のコマンドをボタン化することが可能だが、選択文字列系のコマンド(※選択範囲を認識できない)など何かしらの理由で期待した動作にならないものがある点には注意。

編集画面内にはコマンド一覧のすぐ上に検索欄もあり、ここから項目名やコマンド名によるフィルターもできる。

例1:次スレ作成ボタンを作成

  1. =パネル設定エリア=から設定箇所を選択。
  2. 下部の「+」をクリック > 「次スレ作成」を選択 > 保存。アイコンを変えたい場合は、アイコンをクリックして種類と色を設定。

    siki-panelaction-add-simple.png

例2:基本コマンド以外のボタンを作成

  1. =パネル設定エリア=から設定箇所を選択。
  2. 下部の「+」をクリック > 「** 空のコマンド枠 **」を選択 > 保存。

    スクリーンショット 2023-07-16 22.50.36.png

  3. 実行されるコマンドとアイコンを設定。

    スクリーンショット 2023-07-16 22.49.38.png
    ※ 現在は「位置」は矢十字ボタンとなっている


パネル内でのボタンの位置は、設定画面にある矢十字ボタンをドラッグして動かすか、0.25.7以降は配置済のボタンを「Ctrl+左ドラッグ」すれば変更できる。
ドラッグで別のパネルへボタンを移動させることは現時点ではできない。

パネルアクションのCSSカスタマイズ

CSSによる調整については「カスタムCSS」を参照。

パネルアクションフッターをパネルヘッダー下に配置

.bd-container .content {
  position: absolute;
  bottom: 0;
}
.th-container .content {
  position: absolute;
  bottom: 0;
}

コンテンツ側を下げている。
「*.content {」のみで板スレ一括指定。

パネルアクションが端を越えたら折り返し表示

.bd-container .action-panel {
  flex-wrap: wrap;
}
.th-container .action-panel {
  flex-wrap: wrap;
}

「*.action-panel {」 のみで板スレ一括指定。

新しいボタンの自作

パネルアクションに登録されたボタンはcomponents/action.jsに保存されており、このファイルを直接編集することでオリジナルのボタンを追加することもできる。

以下は『設定 > 画像/映像 > スレ内画像 > 未取得画像を自動でダウンロード』(user.interface.thread.image_auto_download)を「自動」と「何もしない」でトグル切り替えするボタンを追加する例:

"20": [
  "image_load_switch", "", 20, null,
  {
    "role": "toggle",
    "info": "画像ロード切り替え",
    "icon": "fas fa-images",
    "propvalue": [
      "interface",
      "thread.image_auto_download"
    ],
    "toggleopts": [
      {
        "value": 0,
        "action": ["system:settings.update.value","user.interface.thread.image_auto_download","2"]
      },
      {
        "value": 2,
        "action": ["system:settings.update.value","user.interface.thread.image_auto_download","0"],
        "add_icon": "on"
      }
    ],
    "label": ""
  }
]

Font Awesome(fas)のアイコンIDや設定項目IDなどを自力で取得して記述する必要がありハードルは高い。分かる人向け。

https://egg.5ch.io/test/read.cgi/software/1749431376/753-755

755: RomTenma sage 2025/07/21(月) 23:32:06.62 ID:wdWmV2Hv0
他の設定でも同じようなボタンを作ることが出来るものもありますが、色々大変だと思います

siki-copy-setting-id.png

ボタンを追加したい位置へSikiの設定画面上でダミーのボタンを追加してアイコンも設定し、Sikiを終了させてaction.jsの該当部分を書き換えると多少楽かもしれない。