table的表頭固定，內容可捲動的解法

參考文章：HTML table 表格 thead 表頭固定，tbody 滾動

css解法可用，以下是改良，他原本用 > 主要是避免表格內又包表格。但我需要用捲軸的通常不會再包表格，所以可以直接用空格就好。

thead tr{
display: table;
width: 100%;
table-layout: fixed;
}
tbody{
display: block;
height: 271px;
overflow-y: scroll;
}
tbody tr{
display: table;
width: 100%;
table-layout: fixed;}

然後table-layout的說明看這篇：善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

裡面提到
「CSS 的 table-layout 屬性有兩個可以設定的值：
automatic 表格的總寬度決定於每一個儲存格(Cell)的最大值。( 此為預設值 )
fixed 表格的總寬度決定於表格 width 屬性的定義，以及各欄位(Column) width 屬性的定義」

簡單來說預設值 automatic  要整個表格讀完，瀏覽器才能確認總寬度。
fixed 代表如果你有定義寬，那就直接用定義的寬度。

所以後者顯示速度會比較快。這個有沒有加不影響上述css把表格變成有捲軸。但可以加快網頁成像的速度。

然後讓表格底下有捲軸而且正常顯示的關鍵是要針對tr下 display: table;跟width: 100%;

感覺應該是把tr模擬成表格

總之真的是蠻神奇的設定，可以用就對了。

用css自訂radio btn / checkbox 與 css選擇器

實做技巧參考這篇

重點摘要：

  1. html內radio btn對應的要加上label，裡面可以加入span比較好做後續設定
  2. 用這段隱藏原本的樣式（單選type就改radio）
    input[type="checkbox"] {
        display:none;
    }
  3. 用這段設定新樣式（未選擇），搭配after跟before就可以做到替換框框的效果。
    input[type="checkbox"] + label span
  4. 用這段設定已選擇時的樣式
    input[type="checkbox"]:checked + label span

然後第一次看到+，使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器，css選擇器可以參考這篇

然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul  跟 .aaa ul 的差異是：

後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul，這層就不會被套用。

AE如何讓短影片自動播放 & AE動畫流程整理

AE如何讓短影片自動播放

解法來自這個討論串

  1. 將兩秒鐘可循環的composition置入一分鐘的另一composition
  2. 點選兩秒鐘的comp，點選選單中Layer–> Time –> Enable Time Remapping ，
    選完以後會兩秒鐘的composition在頭跟尾會各有一個keyframe
  3. 將layer拉滿要跑的長度，例如一分鐘。拉的時候記得不要移動到關鍵影格的位置
  4. 點一下圖層底下展開的Time Remap字樣，兩個keyframe點會顯示被選取狀態
  5. 接下來點選選單中 Animation —> Add Expression
  6. 在時間軸 Expression 視窗貼上 loopOut(type = “cycle”, numKeyframes = 0)
  7. 兩秒鐘片段就會一直循環了

AE動畫流程整理

把目前做順的流程跟注意事項整理一下

  1. 先寫好腳本跟口白
  2. 錄好口白並剪好
  3. 用AI把腳本分鏡做出來。最好一個Comp對應一個ai檔，這樣元件匯入的時候才不會一大堆。
  4. 同一個Comp有好幾個分鏡時，AI內可用不同工作區域區隔，才知道到時候元件要放什麼位置，腳本間變化如何。但匯入元件的話，AE只吃單一工作區域，多工作區域圖層匯入會是空的沒東西，所以等分鏡畫完，要另外存一個AI檔，裡面只有一個工作區域，然後只放元件，可以趁這機會也整理一下元件讓每個元件不重複。
  5. 做一個Comp就把一組AI的元件跟對應的口白匯入。做好之後AE裡面把元件再整理到資料夾裡面。

然後如果有整體的背景音效。記得要另外做一個包容全部的Comp，把其他小Comp串接起來以後，在大Comp內才放背景音效，這樣才能貫串。

解決iphone、ipad 無法顯示自訂英文字體的問題

解法說明：https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad

線上產生自訂英文字形的 svg 字體檔：https://www.fontsquirrel.com/tools/webfont-generator

簡單來說，iphone系列不吃普通 .ttf 字體格式，所以你把這個丟到自己空間，只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files，就會 GG。

不過我在測試的時候遇到很奇怪的事情，後來回去看 stackoverflow 裡面，解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。

簡單來說就是我套用失敗，但我的狀況比較奇葩，就是我用線上svg字體產生檔他產生的範例檔案，在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候，卻又一直卡關。我交叉測試確認路徑是否正確，跟電腦還有安卓手機吃到的是否是我產生出來的檔案，都確認沒問題，但就是 ipad 上怎麼看都看不到，用無痕視窗開也一樣。

stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)

我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。

所以結論是有兩種解法

  1. 轉成 SVG format font files ，用上述工具會轉出 .woff 跟 .woff2 兩種。然後我測試的結果是如果手機曾經連到該網頁，莫名的還是會吃不過去。後來換瀏覽器好了以後才都好。感覺是 iphone 針對字體的快取這塊吃的有點難清除的感覺。
  2. 轉成 .otf。但這方法我沒用，所以不知道效果如何。

大概是這樣。

blogger 套用付費樣版 & 自訂 amp 版本

最近接了幾個案子都用 blooger ，有些之前不知道現在才知道原來可以這樣的東西記錄一下。

[教學] 自訂 Blogger 行動版範本與自適應設計原理

我本來以為 AMP 版本是自帶不能改。但看這裡寫是可以，只是要先從「主題 > 行動服務」那裡切換。他可以切換成不要用 AMP，直接用網頁本身手機版（其實就還是電腦版啦，只是有做RWD的顯示就會是手機版），或是用 AMP 但可以自訂樣版內容，但就要在行動版內的「主題」選擇自訂。這樣在自訂範本的時候，裡面才匯出現對應的原始碼讓你自己調整。

wordpress 架站樣板哪裡買？外掛推薦與踩雷紀錄

最近很常用 wordpress 架站，也因此用了一些 plugin 跟踩到一些以前沒踩過的雷。趁還有印象做一下紀錄

【web theme 網站樣板去哪買】

如果你跟我一樣主要要架的是「媒體站」，推薦可以到 wordpressplugintheme 買樣板，比起其他站他的樣板選擇其實不多，但重點是很便宜且沒有限制只能使用在幾個網址上。我這次幾個站都用 Newspaper9 這個樣板，可調整性蠻高的。因為在這裡買 theme 或 plugin 便宜太多，之後別的站我應該會考慮在這裡買一些 plugin 來玩玩試用。

【plugin 外掛要裝哪些？】

因為這次有個業主有一些要求，所以我有特別多找了一些外掛。但也因為以前沒裝過，踩了一些雷，在這裡就一起記錄一下。這裡我只列自己額外裝的，搭配樣板 Newspaper9 必要裝的我就不在這裡列出。

有雷外掛

All In One WP Security

有雷是後來發現裡面有個防火牆的設定，造成google機器人完全無法爬網站以至於不收錄內容。這根本宣判網站死刑….一開始我完全搞不清楚為什麼，跑去找 seo 大手朋友求救。後來自己重新去比照兩個站，想到有問題的站有多裝這個外掛，就去用英文搜了一下找到這篇 AIOWP security plugin blocks google from indexing site.

bingo！跟我用一樣的外掛，遇到一樣的問題。不過我沒有停用這個外掛，因為這個外掛有很多功能，讓我可以裝了他一個就夠。後來有找出擋掉 google bot 的設定大概在哪裡，最後解決問題。這裡來說說為什麼我還是保留這個外掛。

  1. 調整 .htaccess 加強網站安全性
    這是這個外掛最大的優點，他有很多設定，設定完他會給你一個數字，讓你知道現在整個網站的安全性提升到什麼程度。像我不是工程師，對 .htaccess 根本不熟悉，但其實在 .htaccess 增加一些調整，可以提高 wp 網站的安全性。這時候這個外掛就很方便，後台直接提供圖形介面，讓你勾一勾選一選就可以設定完畢，不用去了解語法要怎麼寫。
  2. 方便的匯出匯入功能
    直接提供 .htaccess 跟 wp-config.php 的匯出匯入功能
  3. 提供後台防護的相關功能
    我這裡直接寫我透過這個外掛設定跟可以查看的幾個東西

    • 隱藏 WP version info：不要讓人輕易就知道你這個站是用哪個版本的 wp 架設的
    • 限制後台最多連續登入次數
    • 設定強制登出時間
    • 查看目前有登入的帳號，可手動強制把這些帳號登出
    • 所有帳號的登入紀錄
    • 把預設wp-admin網址改成別的
    • 在後台登入加上 google 驗證碼：要自己先去申請 google api 金鑰，回來這裡勾選填寫後，後台就可套用 Google reCAPTCHA

這幾個是我覺得這個外掛好用且方便的地方，因為如果不是用這個外掛，我得另外找別的好幾個外掛才可以把上述設定都處理好。用這個外掛一次就可以解決很方便。

但這個外掛實際上可以做的設定更多，這個就請要裝的自己去研究吧！

然後踩到雷的部分，我後來推敲應該是在 firewall 那裡的設定，但因為我實在是太害怕網站不被 google 收錄了，所以這部分我索性直接把防火牆裡面所有設定都讓他恢復預設，就是都沒有勾，等於不設防火牆。這樣做以後 google 收錄的部分就恢復正常。但至於到底是哪些設定造成擋掉，我沒有那個實驗精神所以也不確定。只能說確定一定是 firewall 裡面的設定造成的。

所以這個外掛我還是會推薦下載安裝，只是設定的時候自己要多注意。

無雷外掛

Cloudflare Flexible SSL

最近我手上兩個媒體網站都是在 linode 上架站，使用 cloudflare 的免費 ssl。但是在 wp 上使用 cloudflare 的免費 ssl 是會有雷的。簡單來說就是如果直接使用 Cloudflare Flexible SSL ，會出現幾種狀況：

  1. 整個網站只要切到 https 路徑就會完全不對，以致於 css 跟 js 都會路徑錯誤，造成跑版跟使用不能。
  2. 網站無限 loop 死掉：如果自己在網站上用 .htaccess 強制把 http 轉 https，並且使用 Cloudflare Flexible SSL 的時候會發生。

我手上兩個站一個遇到1一個遇到2，兩者使用的解法也不同，基本上擇一種方法使用即可。在這裡簡單寫給大家參考，詳細的就請自己去找 cloudflare 的說明囉。

  1. 使用 Flexible SSL：如果要用這個SSL，必須要搭配使用 Cloudflare Flexible SSL 外掛
  2. 使用 Full SSL：如果不另外弄外掛，另外一種解法是自己主機上要先用自簽CA搭配 .htaccess 強制把 http 轉 https，然後使用 Cloudflare Full SSL。參考文章「使用 CloudFlare SSL 憑證後出現過多重新導向的問題」
  3. 其他參考：使用 Really Simple SSL 外掛：這個方法我沒用過，但是寫這篇文章的時候搜到。放在這裡給大家參考看看。參考文章「WordPress使用CloudFlare免費SSL快速教學」

Google XML Sitemaps

這是無心插柳裝的，但推薦裝一下，簡單來說就是自動生成可以提交給 google 的 sitemap，還不錯用。

Heartbeat Control by WP Rocket

因為一開始裝的時候發生一些狀況，所以去找了幾個跟效能調校有關的 plugin ，這是其中之一。參考文章「WordPress 效能調教心得」。下載外掛

Hyper Cache

網頁快取外掛，加速瀏覽者讀取網站的速度，同時可以降低主機負擔。
參考文章「Hyper Cache 效果非常好的WordPress快取外掛！」

Revision Control

wp有自動把文章不斷儲存版本的功能，但是我覺得這個實在太吃空間跟效能了。所以找了這個，可以自訂要儲存幾個版本，以及手動把多餘的版本刪除。

Simple Tooltips

因為網站文章有註解的需求，最後選了這個，簡單好用。