Blogger 標題圖片如何正確上傳呈現 以及 修正手機橫式螢幕圖片無法置中滿版的自適應解法
很多站長在建立 Blogger 部落格時，都會想設計一個專屬的網站招牌（Header Banner）。但常常遇到兩個問題： 1.不知道該去哪裡上傳、怎麼設定才能讓圖片完全取代文字標題？ 2.好不容易上傳了，在手機「直式」看很完美，但手機一轉成「橫式」，圖片下半部卻硬生生被切掉一半？ 本篇教學將帶你從零開始，一步步完成 Blogger 標題圖片的上傳設定，並透過「編輯 HTML」直接植入一行神奇的 CSS 語法，徹底解決手機橫螢幕圖片被裁切的長年老症頭！ 第一步：在 Blogger 後台正確上傳標題圖片: 當你設計好一張 Banner 圖片後（建議寬高比例約為 2.5 : 1，例如 800 x 320 px 可以請Gemini 協助製圖 或 裁切 ），請照著以下步驟上傳： A.登入 Blogger 後台，點選左側選單的 版面配置 。 B.找到最上方的 標頭 ，點擊該區塊右下角的 編輯 （鉛筆圖示）。 C.彈出「 設定標題 」視窗後，往下滾動到 選取圖片上傳方式： 你可以選擇 輸入圖片網址 或 上傳位於電腦中的圖片 將檔案送上去。 【最關鍵的設定】 在 圖片位置 欄位中，請務必勾選： [V] 圖片取代標題和說明 註：勾選這個選項，你的設計圖片才會完美變成網站的招牌，而不會跟原本的文字標題疊在一起變亂碼。 檢查預覽圖無誤後，點擊右下角的 儲存。 第二步：修改 HTML 原始碼，解決手機橫螢幕裁切問題: 上傳成功後，當手機切換成橫螢幕時，Blogger 為了強行把圖片寬度拉滿，網頁外框的高度卻被系統死死固定住，導致圖片下半部直接被「切掉（Crop）」。 因為目前後台的「自訂 CSS」區塊可能會有無法新增的狀況，我們直接用最根本、一定有效的方法：將語法寫進主題的 HTML 原始碼中。 請依照以下步驟操作： A.進入 Blogger 後台，點選左側的 主題 。 B.找到 「自訂」按鈕旁邊的 下拉選單箭頭 ，點擊並選擇 編輯 HTML 。 滑鼠請在程式碼視窗裡面任意地方點一下 ( 讓游標停在程式碼視窗內上面任何地方 )，按下鍵盤上的快捷鍵 Ctrl + F（Mac 電腦請用 Cmd + F）喚出搜尋框。在搜尋框中輸入 </head> 並按下 Enter 進行搜尋。 找到 </head> 標籤後，在它的 前一行（也就是正上方），完整貼上以下這段...