[Blogger]如何將首頁文章的自動顯示縮圖變更為自己喜歡的圖片/change-pic-of-article

最近想一想，想說應該要來優化一下部落格。

決定從「首頁文章的自動顯示縮圖」開刀。

「首頁文章的自動顯示縮圖」就是上圖這一塊一塊灰色的圖片。

每一個部落格顯示的「自動顯示縮圖」一開始設定可能都不一樣。

但都會設定成如果文章內有圖片，就會直接顯示第一張。

而如果文章內沒有圖片的話，就會直接抓佈景主題設定好的「縮圖」。

而這個縮圖其實是「佈景主題」設定好的，所以也是可以更換的。

文章的自動顯示縮圖更換方法：

＊流程：

• 準備好一張你要替換的圖
  （注意檔案大小要越小越好，網頁跑的速度才快）。
• 在替換的圖片位置點選右鍵，選擇「檢查」，抓出該圖片的位置。
  （不知道怎麼抓的人，圖片右鍵：「在新分頁中開啟圖片」，然後新分頁的網址）
• 然後你得到了一個「舊的圖片網址」，收好它
• 開一個文章，將想替換的圖片丟入後，抓出該圖片位置。
  （我個人有開一個文章叫做：「圖床用」。這個文章是不公開永遠是草稿狀態的，我任何常用到的圖片、LOGO都丟在這個文章裡面。）
• 然後你得到了一個「新的圖片網址」，收好它。
• 前往部落格的「主題」，以防萬一先「備份」一次佈景主題的程式碼。
• 打開佈景主題的程式碼，將所有「舊的圖片網址」替換成「新的圖片網址」。
• 存擋。
• 重新整理確認是否已經替換圖片。
  （記得要用無痕視窗確認，用一般常用瀏覽器檢查的話，cookie會有暫存紀錄，可能不管如何重整都是沒更新的狀態，但其實早就更新了。）

文章的自動顯示縮圖更換方法（看圖）

假設今天我想要換掉這個灰色沒有精神的首頁縮圖。

我就

「右鍵該圖片」⥤「檢查」⥤「抓出該圖片網址」

style="background:url(這邊這一串就是該圖片的網址) no-repeat center center;background-size:cover"

取得第一個「舊的圖片網址」

然後準備了一張我想要替換的圖片

開一個專門放圖片用的草稿文章（千年隱藏不發布）。

將圖片丟上去。

複製該圖片的網址，src="這邊的資訊就是該圖片的網址"

將圖片丟上去後，圖片右鍵「在新視窗開啟圖片」，複製該「網址」，就是要替換的新網址。

前往Blogger的「設定」，先「備份」一次佈景主題，以防萬一。
（備份的佈景主題建議都收著，以防以後哪一天發現bug，不用查個老半天，直接用備份回復即可。）

於Blogger的「設定」點選「編輯HTML」

將剛剛收集到重要的「舊圖片網址」複製

於網頁HTML內搜尋（Ctrl+F），找出有出現該網址的位置。

我發現有兩個。

分別是在3514、3425行。

！注意：

不同的佈景主題，出現的數量可能會不同。但可能是電腦版、手機版，或是出現位置不同，都替換掉沒關係。

3425行的也改掉。

小心翼翼的完成後儲存更新！

在使用無痕視窗開啟網頁，確認是否有變更成功！

！注意：

如果沒有使用無痕視窗，因為cookie會有暫存紀錄，可能怎麼更新都無法成功唷。