解決Blogger插入圖片置左問題
一次兩篇教學筆記~
寫心得文遇到一些技術問題 雖然沒什麼大礙
但龜毛的我還是想趁機一次處理一下這些問題
這次要解決的是我之前一直超不解的問題
就是Blogger裡插入圖片後想要置左
但接下來換行後會出現文繞圖的情況
每次都要用一直換行到剛好超過圖的方法寫下一段文字
我問我姊她好像就從來沒遇過這個問題
明明我看她操作跟我差不多R
首先當然是插入一張圖片
就以上一篇的圖做例子
之後按靠左
你以為真有那麼簡單嗎
我就是每次都用這個方法 然後就會文繞圖
就像這樣 文字會靠在圖片的右邊
如果想要換行就到圖片的下面的話
再插入完圖片 就要用點工具列上"對齊"的地方靠左靠左的方法
我也不知道這什麼奇妙的設定
反正這樣靠左跟點圖片後靠左圖的效果一樣
還能達到原本希望文字換行後排在圖下面的效果
不過還有一點 其實大部分時候圖片插入進來都是直接調成"特大"
這樣不管有沒有置左 圖片的大小都會橫向的塞滿
下一行會自然的出現在圖下面 所以沒差
所以其實這方法用的地方是在小圖想靠左時用的
還有這個方式就不能在圖下新增說明文字 也是不知道為什麼
兩小時候的更新
抱歉上面的方法挺爛的
第一是圖不會向左靠到底 雖然可以利用取消超連結的方式解決
但不能解決第二個問題
就是不能兩張圖並排的問題
之後是找到另一種解法 可是超麻煩 要改html程式碼
找到貼圖的程式碼 可以大致分析成這樣
最外層是用<div>包起來的
裡面則是<a>和<img>兩段組成
根據我反覆的嘗試 就是把<div>包起來的部分去頭去尾砍掉
還有<a>的最後面有一個style的描述 好像是在給圖片位置的屬性
整個刪掉好像就會變回預設的
反正不確定就每張都刪這兩個點 基本上就能解決
2017.5.22更新
上面的方法都是在blogger編輯器中"撰寫"模式裡插入圖片的方式
之後發現比較好的方式還是在html編輯
語法熟悉的話其實很好控制版面配置 不像撰寫中會有很多格式什麼的看不到
要預覽後才會發現問題
但要熟悉html語法又不是網頁工程師或專業的部落客
在重點部分改用html編輯就好了 就像新增圖片的部分
最好是切到html模式下再點工具列的新增圖片
我的話是用最右邊的來自網路 貼上圖床的網址(題外話: google相片真的好用
確定加入後不同於撰寫模式 html新增時會多這個畫面可以選擇
發現只有a包起來的語法
不會有div的語法 img前的style也會消失 預設圖片就會置左
想要兩張並排就保持大小為"中" 兩張圖片就會並排了
如果在html語法裡修改圖片大小甚至可以並排更多張
這樣圖片置左的問題就解決了
不過如果是要加入特大的圖片的話我還是會選擇在撰寫模式下新增
特大圖片有沒有靠左並不是很明顯
另外如果在撰寫模式下再新增說明文字的話圖片又會變回置中狀態
因為他會自動再<a>包的圖片外加一個table 也就是表格
只是這表格在檢視頁面中是看不到的 看起來就像說明文字貼著圖片一樣
這個table加入後就會破壞原本的無對齊方式
解決方式就要變回上一次更新提到的辦法
把table裡的style敘述整個刪掉
然後回到撰寫中選圖片 然後用一開始的方法選工具列的對齊→置左
這樣雖然不能像先前的完全靠左 但也是不會差太多了
雖然對我這種很龜毛的人來說有點不能接受就是了....
上面刪除table裡的style 精確來講是刪掉margin-left: auto;這行敘述
透過改這個或許能更貼近先前那麼貼左側的程度吧(例如改成-1px之類的我猜
這個就沒試了 反正不那麼龜毛也是堪用啦
寫心得文遇到一些技術問題 雖然沒什麼大礙
但龜毛的我還是想趁機一次處理一下這些問題
這次要解決的是我之前一直超不解的問題
就是Blogger裡插入圖片後想要置左
但接下來換行後會出現文繞圖的情況
每次都要用一直換行到剛好超過圖的方法寫下一段文字
我問我姊她好像就從來沒遇過這個問題
明明我看她操作跟我差不多R
首先當然是插入一張圖片
就以上一篇的圖做例子
之後按靠左
你以為真有那麼簡單嗎
我就是每次都用這個方法 然後就會文繞圖
就像這樣 文字會靠在圖片的右邊
如果想要換行就到圖片的下面的話
再插入完圖片 就要用點工具列上"對齊"的地方靠左靠左的方法
我也不知道這什麼奇妙的設定
反正這樣靠左跟點圖片後靠左圖的效果一樣
還能達到原本希望文字換行後排在圖下面的效果
不過還有一點 其實大部分時候圖片插入進來都是直接調成"特大"
這樣不管有沒有置左 圖片的大小都會橫向的塞滿
下一行會自然的出現在圖下面 所以沒差
所以其實這方法用的地方是在小圖想靠左時用的
還有這個方式就不能在圖下新增說明文字 也是不知道為什麼
兩小時候的更新
抱歉上面的方法挺爛的
第一是圖不會向左靠到底 雖然可以利用取消超連結的方式解決
但不能解決第二個問題
就是不能兩張圖並排的問題
之後是找到另一種解法 可是超麻煩 要改html程式碼
找到貼圖的程式碼 可以大致分析成這樣
最外層是用<div>包起來的
裡面則是<a>和<img>兩段組成
根據我反覆的嘗試 就是把<div>包起來的部分去頭去尾砍掉
還有<a>的最後面有一個style的描述 好像是在給圖片位置的屬性
整個刪掉好像就會變回預設的
反正不確定就每張都刪這兩個點 基本上就能解決
2017.5.22更新
上面的方法都是在blogger編輯器中"撰寫"模式裡插入圖片的方式
之後發現比較好的方式還是在html編輯
語法熟悉的話其實很好控制版面配置 不像撰寫中會有很多格式什麼的看不到
要預覽後才會發現問題
但要熟悉html語法又不是網頁工程師或專業的部落客
在重點部分改用html編輯就好了 就像新增圖片的部分
最好是切到html模式下再點工具列的新增圖片
我的話是用最右邊的來自網路 貼上圖床的網址(題外話: google相片真的好用
確定加入後不同於撰寫模式 html新增時會多這個畫面可以選擇
發現只有a包起來的語法
不會有div的語法 img前的style也會消失 預設圖片就會置左
想要兩張並排就保持大小為"中" 兩張圖片就會並排了
如果在html語法裡修改圖片大小甚至可以並排更多張
這樣圖片置左的問題就解決了
不過如果是要加入特大的圖片的話我還是會選擇在撰寫模式下新增
特大圖片有沒有靠左並不是很明顯
另外如果在撰寫模式下再新增說明文字的話圖片又會變回置中狀態
因為他會自動再<a>包的圖片外加一個table 也就是表格
只是這表格在檢視頁面中是看不到的 看起來就像說明文字貼著圖片一樣
這個table加入後就會破壞原本的無對齊方式
解決方式就要變回上一次更新提到的辦法
把table裡的style敘述整個刪掉
然後回到撰寫中選圖片 然後用一開始的方法選工具列的對齊→置左
這樣雖然不能像先前的完全靠左 但也是不會差太多了
雖然對我這種很龜毛的人來說有點不能接受就是了....
上面刪除table裡的style 精確來講是刪掉margin-left: auto;這行敘述
透過改這個或許能更貼近先前那麼貼左側的程度吧(例如改成-1px之類的我猜
這個就沒試了 反正不那麼龜毛也是堪用啦
留言
張貼留言