"Read more" deformed type of Blogger - "繼續閱讀"導致變形
Blogger 的 " Read more", 繼續閱讀功能很實用.
但是,它的字體大小是跟著"連結"的設定; 看起來太小.
我習慣按下標題的連結,(比較大). read more 的連結好像沒什麼作用.
所以以前沒有注意到 "read more" 會導致版型變形 !
昨天做了一個替代 "繼續閱讀" 的圖片, 準備在版型中更改.
先紀錄更改方法. 因為我可能會忘記...
♦ Step 1. 準備圖片網址 A
♦ Step 2. 修改 Blogger 版面 ►
Design ►Edit Html ►勾選"展開小裝置範本" (Expand Widget Templates) ►
使用瀏覽器 "尋找" 功能, 尋找 " jump". 會看到一段程式碼
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/></a>
</div>
</b:if>
將圖片網址 A 替代 <data:post.jumpText/>. 變成 ►
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<img src='A' /></a>
</div>
</b:if>
或是不用圖片,直接用html的替代文字.
我以為這樣就 OK. 但是問題出現了 !
按下 "Read more",卻發現有些文章版型變形.
以為是因為更換圖片造成的; 換回 <data:post.jumpText/> 還是一樣.
去除 <div> 段落標籤,對首頁有效; 不再變形. 對於分類卻無效.
只要按下 "標籤" 分類的文章, 就會看到 "恐怖的" 部落格變形.
除非把所有的文章中的 <div> 標籤全部編輯移除.
只要其中有一篇沒有移除,後面的文章版型全部變形.
而且 <div> 在編排文章時非常有用; 對搜尋引擎的索引也有用處.
最好不要移除 <div> 標籤. 也沒有這麼多時間去改.
最快速的方法是將 " + "#more" " 這個定位碼移除.
等於標題連結的效果. 從文章的起頭開始看.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img src='A' /></a>
</div>
</b:if>
♦ 或是嘗試重整模組 ► Click here
嗯? 這一篇的標籤為什麼是 "Design" ? haha...
