1.在對樣板做任何修改前請先備份,以免發生改不回來的情況
2.本文圖片如果太小可以點選圖片來放大

看起來好像還不錯,只是圖片似乎右邊被切掉了?

造成上述情況的原因 ↓

可以看到第一個選項
第二個選項
(換句話說就是以上面的對齊方式為基準向四方延伸)
不管你有沒有懂,換換看選項就知道了



我們可以看到圖片置中了,可是下方出現空白 (代表圖片不夠大)
我們再來看看這張圖片

看起來似乎遠超過所需的大小? (這也是選這張做說明的原因)
俗話說做事要追根究柢,所以回憶一不做二不休把網頁原始碼的圖片抓下來看看

恩... 看來存在圖片太大被壓縮的可能 (抑或是 Blogger 自動把圖片縮小了)
那我們試著取消勾選

很明顯看到圖片依然有部分被截掉了
此時圖片是固定的
那換個方式,直接上傳到圖床如何?
Google 圖床 ↓ Imgur 圖床↓




附上原圖做比較:

可以看到兩圖床都有一定的裁切,另外依然會有圖不夠大的問題。
如果要堅持使用 隨頁面捲動 目前回憶想到的方法只有一個
去找 (或製作) 一張很長的圖 長寬比大概 4:1
這樣才夠覆蓋整個 BLOG
什麼? 你說你要範例? 回憶的 BLOG就是了....
檔案較大的圖建議上傳到圖床,使用內建上傳很可能會模糊
因為使用了非內建的功能,我們需要更改一些程式碼
什麼? 你說你不懂語法? 沒關係我也不懂
儘管沒有完全懂,但修改一些簡單的項目還是做得到的
首先,我們先隨意換一張內建的圖片 (隨便一張都可)


在這裡我們選擇

將滑鼠點擊紅色區塊任意地方後按下
在新出現的 Search 欄位中填入

將 url (...) 括號中換成你圖片的網址
在這裡解釋一下紅框中四個參數的意義
第一個參數可用選項: 第二個參數可用選項: 第三個參數可用選項: 第四個參數可用選項: 在了解上述程式碼的意思,就可以改成你自己想要的啦~
在這裡回憶選擇的是 no-repeat fixed top center
問一下,為什麼我放的圖片只出現在頂端?
回覆刪除