BotUIを本サイトのAboutページに埋め込んだが，会話が長くなると二重にスライドバーが表示されて使いづらい．そこで，BotUIのCSSを修正することにした．

2018/02/11追記：このあと，本サイトのJekyll themeをEasyBookからCentrariumに変更した．詳細はJekyll themeをCentrariumに変更する - Memotaroを参照されたい．

以下は修正前の動作．他に何か質問ありますかあたりから，二重にスライドバーが表示されてしまう．

以下は修正後の動作．他に何か質問ありますか以降もスライドバーが出現することはない．

関連記事はこちら：

環境

  • Easybook：本サイトで利用しているJekyllのテーマ．
  • BotUI：JavaScriptだけで動くチャットボットライブラリ．

手順

BotUIのCSSとJavaScriptをローカルに保存

ローカルでBotUIを実行するのに必要なファイルをGitHubからダウンロードする．公式ドキュメントによると，botui.min.cssとbotui-theme-default.cssとbotui.min.jsがあれば良さそう1．Easybookのディレクトリ構造を鑑み，それぞれcss/およびjs/配下に保存する．

botui.min.cssを修正

.botui-app-containerのheight:500pxをコメントアウトし，高さ制限をなくす．

_include/head.htmlを修正

CDNではなく，ローカルのbotui.min.cssとbotui-theme-default.cssを参照する．

_layouts/bot.htmlを修正

CDNではなく，ローカルのbotui.jsを参照する．

結果

こんな感じになった．

参考

  1. 試行錯誤の結果，botui.min.cssをいじるだけで問題は解決できることが判明したので，全てをダウンロードする必要はなかった． ↩