網頁

2014年11月1日

|

網誌因應瀏覽器; 自動修正排版位置

Views:
Blogger 的標準範本, 是一個固定的版面.
以我所用的那個為例, 整個寬度是 960px, 而右邊的 widget 行是 310px, 固定在瀏覽器中間. 不論你如何改變瀏覽器的大小, 它也是不會改變.

這個相信有它的原因, 一旦改變, 所有的圖片位置, 或是文字排版, 都有可能完全走位.
但是我想改變, 因為我用了上次介紹的 "圖片自動空間調整" 方法.


如果是用"標準範本", 又是 2 行架構, 一行網誌, 一行 widget.
只要到後台 HTML, 簡單的修改 3 句, 大功告成.

[設計]> [範本]> [HTML]>
找到 "template-skin" 把內容打開,
把 content.width 的預設值由 960px 改成 100% ;
把 main.column.right.width 的預設值由 310px 改成 40% ;
把 padding-righ 的預設值由 $(main.column.right.width) 改成 30% ;
存檔完成.


影片看看成果




9 則留言:

  1. 你好,用咗哩個改動後,桌面版好看得多。
    但一用手機而我用cutom mobile template,咁就會右邊空咗一啲位,睇post都係咁,有無方法用哂啲位,好似default mobile template咁呢?
    我要用cutom mobile template,因為我加咗個mobile=only嘅html/javascript widget喺頂同底,係個listbox用嚟揀label之用。請問可以喺mobile view時做得靚呢?
    你可去我個blog就睇到依家個效果,頂個listbox無底嗰個咁醒目,其實兩個係同樣code。

    http://kimmynet.blogspot.hk/?m=1

    回覆刪除
    回覆
    1. 你好, 多謝使用這個工具.
      我明白你的要求, 但是這個設定方法, 是一個強行式, 直接用數值指定, 所以 mobile 版面時也會受它的影響.
      所以我選擇用"簡單"的 mobile 介面, 才不會出現你現時的問題.
      而你是需要在 mobile 介面時用 Javascript, 那麼必須用上"自訂"mobile 介面.
      我需要時間, 看看可以如何改善.

      刪除
  2. 你好,用咗哩個改動後,桌面版好看得多。
    但一用手機而我用cutom mobile template,咁就會右邊空咗一啲位,睇post都係咁,有無方法用哂啲位,好似default mobile template咁呢?
    我要用cutom mobile template,因為我加咗個mobile=only嘅html/javascript widget喺頂同底,係個listbox用嚟揀label之用。請問可以喺mobile view時做得靚呢?
    你可去我個blog就睇到依家個效果,頂個listbox無底嗰個咁醒目,其實兩個係同樣code。

    http://kimmynet.blogspot.hk/?m=1

    回覆刪除
  3. 你好,噚日唔覺意貼咗兩次同一問題添……
    你以上嘅修改喺mobile mode已修正右邊闊度問題,多謝。
    見你頂頭用嘅drop down menu喺desktop同mobile都顯示得好好,難整嗎?

    回覆刪除
    回覆
    1. 你現時所改的是不完整方法, 請用對上一個留言裡, 所列出的新方法, 效果更好.
      你的 drop down menu 是"標籤:,
      而我用的是"網頁", 可以在[設計]裡找到, blogspot 完全支援, 不用修改.

      刪除
    2. 多次測試後, 一個安全, 不算完美, 但是適合你所用.

      [設計]> [範本]> [HTML]>
      找到 "template-skin" 把內容打開,
      把 content.width 的預設值由 960px 改成 100% ;
      而 main.column.right.width 的預設值 310px 不用修改;
      而 padding-righ 的預設值 $(main.column.right.width) 也不用修改;
      存檔完成.

      刪除
    3. 請問點可以set全部圖片default係left justify呢?

      刪除
    4. 要圖片 default 喺 left justify, 唔喺一個好方案.
      因為, 某些情況下, 圖片需要排版設計,
      一旦 default , 沒法改變, 還是由寫網誌時同步設好. :-bd

      刪除

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃