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をコメントアウトし，高さ制限をなくす．

@media (min-width:400px){
.botui-app-container{
width:400px;/*height:500px*/;margin:0 auto}}
view raw botui.min.css hosted with ❤ by GitHub

_include/head.htmlを修正

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

<head>
<!-- 略 -->
<!--<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" /> -->
<link rel="stylesheet" href="../css/botui.min.css" />
<!--<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />-->
<link rel="stylesheet" href="../css/botui-theme-default.css" />
<!-- 略 -->
</head>
view raw head.html hosted with ❤ by GitHub

_layouts/bot.htmlを修正

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

---
layout: default
---
<div class="botui-app-container" id="self-intro">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<!-- <script src="https://unpkg.com/botui/build/botui.min.js"></script> -->
<script src="../js/botui.min.js"></script>
<script src="../js/bot.js"></script>
</body>
view raw bot.html hosted with ❤ by GitHub

結果

こんな感じになった．

参考

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