2020年6月4日

Blogger 使用錨點的操作方式(新版文章編輯器)

Blogger 使用錨點的操作方式(新版文章編輯器)

Wayne Fu 0 A+
blogger-post-editor-anchor.jpg-Blogger 使用錨點的操作方式(新版文章編輯器)如果不熟悉 HTML 語法的話,要製作出錨點效果不太容易。Blogger 新版文章編輯器增加了不少功能,其中「錨點」算是非常實用的一個,就算不懂語法也能實現這個效果。

本篇會說明錨點的原理,以及如何在新版文章編輯器做出錨點。

(圖片出處: hippopx.com)


一、錨點的原理


1. 錨點效果

如果不知道什麼是錨點效果,可以看本站的每篇文章,開頭往下捲一點會看到一個獨立區塊「本文索引」,包含了該篇文章的大綱標題,點擊標題字串後就會跳到對應的文章區塊,這就是錨點效果:

  • 「本文索引」的每個大綱都是超連結,但不是對外的超連結,而是該頁面的「錨點連結」
  • 而文章裡的每個大綱標題都是對應的「錨點定位點」,也就是點擊錨點連結後,螢幕會捲動到達的位置。
  • 分別做出一個「錨點連結」、一個「錨點定位點」,就能實現錨點功能

如果想知道錨點的 HTML 語法,請見以下說明。


2. 「錨點連結」語法

在想要放置「錨點連結」的地方,輸入以下語法:

<a href="#anchor1">這裡是錨點連結</a>
  • 紅字 "#anchor1" 是為錨點設定的 ID 字串,每個錨點都需要使用獨一無二的字串,必須以井字號 "#" 開頭
  • 錨點 ID 字串有其規則限制,這裡不詳述,建議使用 "英數字串" 比較保險
  • 藍字可改為自訂文字


3. 「錨點定位點」語法

在想要放置「錨點定位點」的地方,輸入以下語法:

<a id="anchor1">這裡是錨點定位點</a>
  • 紅字請輸入前面設定的錨點 ID 字串,但去除井字號 "#" 即可
  • 藍字可改為自訂文字



二、Blogger 新版文章編輯器操作


如果熟悉 HTML 語法,可在「HTML」模式下直接輸入語法即可。如果不懂語法也沒關係,Blogger 新版文章編輯器新增了「錨點」功能可設定,以下流程供不熟悉 HTML 語法的站長參考:


blogger-post-editor-anchor-1.jpg-Blogger 使用錨點的操作方式(新版文章編輯器)

上圖兩處紅框的位置,分別描述了「錨點定位點」、「錨點按鈕」的定義,點擊了下方的「錨點按鈕」,畫面就會捲到上方「錨點定位點」。

我們一一說明如何操作,首先用滑鼠選取文字「這裡是前往錨點的按鈕」,然後點擊錨點圖示 → 「建立/編輯網址」


blogger-post-editor-anchor-2.jpg-Blogger 使用錨點的操作方式(新版文章編輯器)

  • 可自訂要顯示的文字
  • 點選「連結至網址」
  • 設定「連結的網址」,如上圖輸入 "#anchor1",這是為錨點設定的 ID 字串,每個錨點都需要使用獨一無二的字串,必須以井字號 "#" 開頭
  • 錨點 ID 字串有其規則限制,這裡不詳述,建議使用 "英數字串" 比較保險
  • 最後按「確定」


blogger-post-editor-anchor-3.png-Blogger 使用錨點的操作方式(新版文章編輯器)

接著用滑鼠選取文字「這裡是錨點位置」,然後點擊錨點圖示 → 「建立/編輯錨點」,會出現上圖畫面:

  • 編輯顯示的文字
  • 名稱請輸入前面設定的錨點 ID 字串,但去除井字號 "#" 即可
  • 最後按「確定」



三、錨點的應用


文章裡使用錨點有很多不錯的應用,除了前面提到的「大綱索引」區塊,效果可參考「Blogger 文章自動產生大綱索引錨點區塊」。

另外就像實體書籍的「註解」功能,有些詞彙需要特別解釋、但又不想影響文章閱讀的流暢度時,使用註腳錨點就非常實用了,這部分的效果可參考「專業又有質感的網頁文章註解外掛 BigFoot」。


更多 Blogger 使用技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

2 則留言:

  1. 我本身不會語法,您的教學淺顯易懂,馬上就學會可以應用錨點在最新的文章。太好了!非常感謝

    回覆刪除
  2. 不好意思,為什麼我用了blogger內建的錨點,都會導到最上面呢?
    不然想說是從目錄按連結點下去單元,結果都從單元導到目錄去...XD

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP