[Blogger] 建立格狀相片縮圖

方法：

Blogger 主題設計工具 > 進階 > 新增 CSS

.SquareThumbnail img{     width: 200px;     /*圖片的寬度, 可以自己改看看*/     height: 200px;    /*圖片的高度, 可以自己改看看*/     object-fit: cover;   /*讓圖片可以center crop於上面的長寬當中*/     padding: 0px;   /*圖片的留邊, 目前為0, 可以自己改看看*/     border: 0px;       /*圖片的邊框, 目前為0, 可以自己改看看*/ }   .SquareThumbnail .separator{ display: inline; font-size: 0px; }

 

上傳所有照片後開啟 HTML 檢視，將下面程式碼置於開頭和結尾：

<div class="SquareThumbnail"> ... </div>

        參考:

[Blogger] 讓文章圖片看起來像縮圖相簿

 

若圖片仍上下排列, 檢視程式碼中是否有 block-level element 或斷行等換行元素：

<1> 斷行 (<br />) 指令，或 <br style="text-align: left;" />
<2> <div style="text-align: center;"></div>，或 <div></div>
<3> <p></p>

將其刪除 (若有許多圖，先拷貝至其他編輯器修改後再貼回來較方便）

 

 換行元素刪除後即可水平排列：

  

 

結語/心得：

[1] 新增一 CSS 規則給 <div>，指定其大小、排列方式
[2] 將所有圖片置於此 <div> 中
[3] 對影響效果的 HTML 修改：例如此例中的刪除 <br />