![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdE7q1EBrsGRPTk8Y0fV_u8lJxt98nDud8OrObwueuBzmcCInBXa_av6O8weQukLi_5GFNHnGYDOeeuJN1FznzIA8E7oTR6HFE9DQS5sIRh4kWdbGVgFzE-tK8STA5sBnhy7HEdu8GL55Z/s1600/%25E5%259C%2596%25E7%2589%2587%25E8%25AE%258A%25E5%25A4%25A7%25E4%25BA%2586%2528RGB%2529s.jpg)
因為部落格改版之後,
文章區域的寬度增加了,
開始把部落格的圖片都加大了,
從原本固定600像素寬度的圖片,
都增加為寬度800像素。
800像素寬度圖片網誌看起來的樣子:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1OBvp04eUx2f_UxOp3EapT-V-D2NuGUlPT6KVI9WGtr-m4z0QRicuhvcfbISiXuCHPfJoqxoJ7jePV3tvHl2Rb3dUPCTUYgTr8FTHGqBKpp6_LoTB16xuSpsZFZToBM389uvxchcjTR_/s1600/171029-blog-01.jpg)
600像素寬度圖片網誌看起來的樣子:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-kol5WKLtQTuCtllRM_XCjEdmBeYJ3jzqy1CmUgqlFdVUFhQbmJrmrCfN-ng0MMtNO5tNKKgPmTXF2KvZb9bZSB8KfGv_by7ZWR5UcJQOZTvDGY6BFsodKLEoePpvEzT845dbh1jDDmke/s1600/171029-blog-02.jpg)
如果看網頁感覺不出差異的話,
下面就直接擺上兩張圖片做對比。
600px
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0E-hwtayueH9BjUs9_twHlaPtcA_-bBh6M9chGxw8Cas5_ihj3a71plOOmCb5gSJKLZMTqCSkwReuMi7I5yQbdM-WF0l4c5qQ9F6wMKE-w7isI4hyowRsnmENj6QIOjCbufWCXt0LcYL/s1600/600.jpg)
800px
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEc1NAxoo6lvWdy7xl47NVT5CltSPAv9KTfv7TXEUgG-RtLUlExHhmgymxg9MDE2eNYQPlPPTFwCD9WvyER1UqUR731wWFTGA0_9W5zaRyOba9Oqjowh2q4zo0Lkg3iLg_zo0K2PbDrzg/s1600/800.jpg)
是不是大圖看得比較清楚了呢?哈
不過圖片變大也衍伸出一個問題,
那就是Blogger在編輯文章時,
編輯區域太小了...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD5aAVhBKd9yPPg0-TchSmpl9w6lYSaRqIXBJfnw09q_ZEtfMHXURgsaTvwUoZgpHDGJHIA7LDAcH-QS257ol6XF0fHBeVo93OIdBp26ExtqYO8cYZdazPdEQHCxrITh9wVY23dTDcPSga/s1600/171028-06.jpg)
所以會造成這種情況,
圖片寬度比編輯區域還大,
明明整個編輯區域都還很空啊~
為什麼就限制這麼小一塊呢?
雖然對編輯文章沒什麼影響,
但就覺得不是很順眼。
沒想到在問了綜合口味之後,
他剛好知道怎麼解決!
那就是利用Chrome的擴充功能 User CSS。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibu_oKwqH5DpB6BCveyyLmVuat6IziGsq-YRSvGUFeCOXRcohzumtyEWcwmpHRGvMzqELuBlBS43MKFW-v1iHGSSvdP-OnbqEyAYDbXOHTc0M8tV-EKeVZGAz6QN-5eXRT-5sEtElY6e5P/s1600/171028-03.jpg)
這個外掛可以在你的瀏覽器上面設置自己的CSS,
來更改你所看到的頁面,
理論上來說可以做很多事,
不過今天要做的只是修改blogger的編輯區域。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcADFlqw0R8tT_lfiuF-O9Q86KMR29uSjIi-tEJWD8omNxEhy-KxkyOEMIYBHyAv6WFc77g4w0XqjYI6etJPvlsn5qd73Q0J5QrMeRf1G_k03uPll8XTdAcNgPf5w2Q_UzgDkjJk7hQcC_/s1600/171028-01.jpg)
User CSS 擴充功能安裝完成之後,
在Chrome右上角會出現小圖示。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYmMzVMvYPLGtcgN76wmf2ifH7-Ug9bhxateBler-jWhxz2i-whE-HmFsIkRNd33vxgjBPytUmEXWVURAnZzBckPBkNQ7NeuVz0LhMbNlBoesEpgIce15rIJpI8NUSFsgQ-RHEmf9G-v5/s1600/171028-02.jpg)
在Blogger的編輯畫面,
點選一下 User CSS 的小圖示,
然後貼上這一段CSS:
.editor .composeBox{ max-width:1024px!important; }
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNi2OIwpbMDHdmWQ3uh66U09W-GlESkWUY1-XNHCPfkVGyoVnPZdH2YIYJIoPIsXti9rt0owNFcdkQvq1zejxNJxpb2v_ydWDQr20G9I2DlI3mes_RE8w3_4yMYrfym6ZYzxweURDeAfo/s1600/171028-05-2.jpg)
就可以看到編輯區域變大啦!!!
當然可以隨著喜好更改數字,
就可以顯示不同的寬度,
像我後來是調整為900px覺得差不多。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYdhE-OTcsDr55EprA0k5SvTv24jRiqPYr5szbgYdwu_N_I3PY4ZcyMR0cPBLebDBTRZK4WWkFjcQj8oQpDnOuFOvBxq1ZLJ1D7bj6H6qUhfLaistFxGK5UMQHwUWhXiVaatAqBxurjj-D/s1600/171028-04.jpg)
以上,感謝綜合口味技術協力,
也請大家慢慢地欣賞,
提高解析度的四小折繪本日誌吧!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9yrhJ5C7FVn-ArRj0FVO5N4LEvQBoCmyxdBzGiZf8LfouRD34ebev772gXTEbXisyJE2-SL3TUBCNDkyD6mDlm9gcXcoEz4ZxWmCspGwbyXU-88-W6X3_YR8-TewMpGeUn-2z7n6nWJb/s1600/%25E5%259C%2596%25E7%2589%2587%25E8%25AE%258A%25E5%25A4%25A7%25E4%25BA%25862%2528RGB%2529s.jpg)
![](https://lh5.ggpht.com/-QOedlOivk9k/UbJmykyUWZI/AAAAAAAAGe0/jgDFoO-Q0dU/s1600/1085395362.jpg)
TAG:四小折 off60 365天挑戰 天天更新 blog User CSS 綜合口味 Blogger 編輯
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXiNlL02T-sAkVtzqj41ycekAKyvxvjiiDu6d3cSvptf-U5vtVu-6So13NhJJlB8n2vJpHc-shLgZvIVat_cKZ3uqY6HOoKQ78yYy_iOAtEHS7Mk9PFshoHvRIxOETTkyZr0AxYpobG20/s1600/%E6%8E%A8%E6%8E%A8%E5%9C%96130626.jpg)
留言
張貼留言