本篇會說明錨點的原理,以及如何在新版文章編輯器做出錨點。
(圖片出處: hippopx.com)
一、錨點的原理
1. 錨點效果
如果不知道什麼是錨點效果,可以看本站的每篇文章,開頭往下捲一點會看到一個獨立區塊「本文索引」,包含了該篇文章的大綱標題,點擊標題字串後就會跳到對應的文章區塊,這就是錨點效果:
- 「本文索引」的每個大綱都是超連結,但不是對外的超連結,而是該頁面的「錨點連結」
- 而文章裡的每個大綱標題都是對應的「錨點定位點」,也就是點擊錨點連結後,螢幕會捲動到達的位置。
- 分別做出一個「錨點連結」、一個「錨點定位點」,就能實現錨點功能
如果想知道錨點的 HTML 語法,請見以下說明。
2. 「錨點連結」語法
在想要放置「錨點連結」的地方,輸入以下語法:
<a href="#anchor1">這裡是錨點連結</a>
- 紅字 "#anchor1" 是為錨點設定的 ID 字串,每個錨點都需要使用獨一無二的字串,必須以井字號 "#" 開頭
- 錨點 ID 字串有其規則限制,這裡不詳述,建議使用 "英數字串" 比較保險
- 藍字可改為自訂文字
3. 「錨點定位點」語法
在想要放置「錨點定位點」的地方,輸入以下語法:
<a id="anchor1">這裡是錨點定位點</a>
- 紅字請輸入前面設定的錨點 ID 字串,但去除井字號 "#" 即可
- 藍字可改為自訂文字
二、Blogger 新版文章編輯器操作
如果熟悉 HTML 語法,可在「HTML」模式下直接輸入語法即可。如果不懂語法也沒關係,Blogger 新版文章編輯器新增了「錨點」功能可設定,以下流程供不熟悉 HTML 語法的站長參考:
上圖兩處紅框的位置,分別描述了「錨點定位點」、「錨點按鈕」的定義,點擊了下方的「錨點按鈕」,畫面就會捲到上方「錨點定位點」。
我們一一說明如何操作,首先用滑鼠選取文字「這裡是前往錨點的按鈕」,然後點擊錨點圖示 → 「建立/編輯網址」
- 可自訂要顯示的文字
- 點選「連結至網址」
- 設定「連結的網址」,如上圖輸入 "#anchor1",這是為錨點設定的 ID 字串,每個錨點都需要使用獨一無二的字串,必須以井字號 "#" 開頭
- 錨點 ID 字串有其規則限制,這裡不詳述,建議使用 "英數字串" 比較保險
- 最後按「確定」
接著用滑鼠選取文字「這裡是錨點位置」,然後點擊錨點圖示 → 「建立/編輯錨點」,會出現上圖畫面:
- 編輯顯示的文字
- 名稱請輸入前面設定的錨點 ID 字串,但去除井字號 "#" 即可
- 最後按「確定」
三、錨點的應用
文章裡使用錨點有很多不錯的應用,除了前面提到的「大綱索引」區塊,效果可參考「Blogger 文章自動產生大綱索引錨點區塊」。
另外就像實體書籍的「註解」功能,有些詞彙需要特別解釋、但又不想影響文章閱讀的流暢度時,使用註腳錨點就非常實用了,這部分的效果可參考「專業又有質感的網頁文章註解外掛 BigFoot」。
更多 Blogger 使用技巧:
沒有留言:
張貼留言注意事項:
◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢」
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。