如何善用 Google 免費圖示增強文章內容?為死板的文字加上圖形,提供更明確的操作提示

不管你從事什麼行業,只要你有使用 3C 產品,應該都有上網找教學文章的經驗。當資料內出現需要你操作軟體或網頁的時候,如果這時他的文字敘述沒有很明確,不只是你,就算是我也很容易會卡關。

而因為我們寫的是死板的教學文章,不像 YouTube 影片那樣可以用各種動態的特效來指示觀眾,所以自然的,作者在文章中必須下更多的功夫,免得讓別人看的一頭霧水。當然最基本的還是文筆練習,但其實還有個更容易提昇訪客閱讀效率的方法,就是加入「圖像」。

我要在這邊介紹一個名為「Material Design Icon」的東西給你,他是 Google 提供的一套以 Material Design 原則進行設計圖示包,並且免費提供給任何人用於產品、作業或網站等商業與非商業用途。而我們的重點就在於它能以「字型」的方式加到網頁當中,可以直接在段落文字之間加入「圖示」文字,進而豐富你的文章。

當然啦!如果你用來寫文章的平台沒辦法自己新增字型來源,Material Design Icon 還有提供 PNG、SVG 的圖像格式下載,還是可以折衷一點直接給它插入圖片,強化效果還是有的。

偷偷給還在用痞客X、隨X窩等平台的作者個建議,是時候該來了解 WordPress 了吧?

編輯原始碼,在 <head> 中加入圖示字型資源

這邊一律以 WordPress 來說明,我們現在要在網頁原始碼的 標籤中加入新的代碼,雖然你可以直接編輯佈景主題的 header.php,但我會搭配 Header and Footer ScriptsAd Inserter 之類的外掛來快速嵌入程式碼。

總之,請想辦法在 </head> 之前加入以下這段程式碼。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

WordPress 就是這麼方便,表單填一填就設定好了。

BwhE7EM

編輯文章內文,加入圖示文字

接下來呢…就是最重要的編輯文章啦!這邊你就得要懂一點基礎 HTML 才行了。
首先請先選中你的段落區塊,依序點擊右上角的 more_vert編輯 HTML 程式碼,切換為原始碼模式。

slhW5op

然後直接在要加入圖示的文字旁貼上這串程式碼:

<i class="material-icons">face</i>

最後請開個瀏覽器新分頁,到 Material.io 網頁中找出你要的圖示名稱,並將剛剛貼上程式碼當中的 face 改掉。

比如說我現在要的是這個 3d_rotation

pzvw9bF

那我改過的程式碼就會是:

<i class="material-icons">3d_rotation</i>

整個文字段落的程式碼可能長這樣:

<p>你知道<i class="material-icons">3d_rotation</i>圖示嗎?</p>

最後出來的就是:

「你知道3d_rotation圖示嗎?」。

這樣應該 OK 吧?如果他的圖示太大或太小的話,你還可以透過 CSS 去修改他的尺寸。
樣式代碼如下,剩下就交給你自己去微調囉…

.material-icons {
    font-size: 20px;
}
訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言