【教學】親愛的，我把框框變大了!

前言

在即將上路的新病歷系統下，

閱讀的介面被受限在小小的框架中

在資訊系統進一步改善介面之前，

身為讀者的我們有沒有辦法自行調整呢?

答案是可以的!

只要安裝這個chrome的插件:  Stylebot

那應該如何設定呢?

首先，先講最快速套用的方法!!

安裝完Stylebot插件之後，

打開設定的選項

選擇備份→導入

並導入以下文字

{"intraweb.server.kmuh.org.tw":{"css":"div.tab-content.data-content {\n  height: 850px;\n}\n\n#iframFormOnlyNote {\n  height: 850px;\n}","readability":false,"enabled":true}}

導入完成之後，就成功套用了，

在樣式的地方，可以看到導入的設定，

病歷的介面底下的框架也就被成功放大。

Before ↓

After ↓

以下介紹Stylebot一般的用法

首先，打開stylebot的調整視窗

(剛安裝完如果打不開，可以把整個chrome關掉再打開)

接著，到【選擇】的頁面，點選左上角的箭頭圖式

此時可以滑鼠移動到你想修改的地方，底下會被反白，並且會提示頁面標籤

點選後，在stylebot的視窗可以直接調整/修改，例如我改了字體大小、背景顏色、外框樣式等

修改後，左邊的視窗也會實時的改變

切換到【代碼】的標籤頁，可以看到剛剛修改後實際對網頁修改的代碼

如果想恢復原狀，直接刪除即可恢復

敗惹未，一開始導入的代碼，就是上面1~7行的部分

也就是去修改底下框架的大小

直接選取的話，會發現裡面的 "iframFormOnlyNote" 是不能選取的

但是還是可以透過編寫代碼的方式修改

如果螢幕的預設解析度不是1920*1080的話，

上面850的寬度可能還是不適合你的螢幕畫面

此時你可以再修改成適合你的高度

寫在最後

修改網頁樣式的擴充插件在Chrome上有很多，

但是對於不懂網寫頁代碼的我們來說，

Stylebot是相對平易近人的，

只要點選想修改的部分就可以直接修改

雖然預設的選項有限，但是也夠用了

對於懂寫CSS的人，可以切換到代碼模式做更細緻/個人化的修改

有興趣的人，可以再進一步研究或搜索相關資料。