如果你想要自己架設網站，或是使用 WordPress 進行架站，就會需要購買雲端主機或虛擬主機，以品質和 CP 值來說，Cloudways 是經過多種主機商比較之後，最完美的主機首選！

( 延伸閱讀：部落格平台推薦：唯一推薦自由度最高的 WordPress.org )

而比較了網路上的折扣碼之後，我推薦由獺斯特釋出的免費折扣優惠碼【otta75】最頂級！

Cloudways 折扣碼 otta75

由於獺斯特是做基礎網頁設計和架設網站的教學老師，他與 Cloudways 談到【前 3 個月 75 折】的超高優惠，優惠碼是【otta75】，完全免費索取！

如何使用？

只要在 Cloudways 免費註冊頁，Promo Code 欄位輸入折扣優惠碼【otta75】，並且出現綠色勾勾，這樣就完成使用優惠碼的資格囉！

詳細使用方式也可以前往獺斯特官方釋出的文章：最新 Cloudways 優惠碼，頂級折扣碼免費索取！立即 1 鍵複製！

總結

大部分能談到的 Cloudways 優惠碼落在前 2 個月七折到九折之間，能夠談到前 3 個月 75 折真的是頂級折扣優惠碼。

對於想要自己架設網站、架設 WordPress 網站非常推薦 Cloudways 主機，立即使用最頂級的折扣碼【otta75】吧！

延伸閱讀：

• 部落格平台推薦：唯一推薦自由度最高的 WordPress.org
• 同時經營部落格和自媒體的小技巧
• 【課程推薦】零基礎網頁設計教學！帶你從入門到轉職

如果還沒看上一篇，可以從下方連結去看內容行銷的重點整理文章喔！
( 延伸閱讀：內容行銷是什麼？官網必做的3個內容行銷重點 )

這篇我們則會透過影片劇本、劇情安排的另類角度切入，讓你能充分了解到如何撰寫文章的方式會更好！

劇情的安排

高潮放在最前面

一部好看的電影，劇情的安排能決定大家是否想繼續看下去。像是現在的 Youtuber 為了吸住大家的眼球，會把整部影片的精華剪在影片前 5 秒，這都是為了留住手機世代沒耐性觀看者的眼睛。

文章也是這樣，起承轉合雖然仍然是不變的劇情定律，但可以把重點往上提，先講重點、解決到讀者的問題，再進行說明，這樣會讓人有一種「我先獲得解答了，真棒！那我再來看看是為什麼！」的感覺。

劇情安排的範例

人都會很急迫性地想要知道心裡想知道的那個最終的答案，好比有位 朋友A 問你說：「青椒、黃椒、紅椒是不同品種呢？還是是同一顆長出來的？」

你一上網查，最想回答 朋友A 的是什麼呢？就是最終的那個「是」或「不是」的答案！

因此如果我們查詢這個問題，文章中前面卻一直寫青椒、黃椒、紅椒的營養觀念、挑選採買準則等等內容，你是不是會很想趕快離開那個文章並找下一篇呢？

(p.s. 青椒、黃椒、紅椒 是同一顆喔！是因為種植時間長短不同而有不同顏色和營養成分喔！ )

劇本的共鳴

讓人感受到共鳴的因素

一部好看的劇情讓你有感受到共鳴，主有可以分為兩個因素：

第一、我們會在看影片的同時，會不自覺將自己套入劇情，把自己當成是影片中的主角，因此容易產生共鳴；

第二、劇情內容讓你產生情緒，會讓你更能投入在影片中。最常見的影片開頭通常是一個事件的發生，帶起我們的喜怒哀樂以及好奇心。

激起讀者的情緒

而文章的撰寫就可以朝著第二點：產生情緒的這個方向來思考，因為我們選擇查詢並找到一篇文章時，通常已經是把自己套入這個問題的主角了，我們需要做的事情是用文字來激起讀者的任一情緒。

或許可以試著在文章中多一些口語化的文字、表情貼圖，或是多用「我」、「小編」等脫離專業感、增加親和力的字眼，讓讀者覺得我是在跟一個活生生的人對話，引起讀者心情更放鬆、跟隨你文字情緒的狀態，而不是冷冰冰的文章讓人一直處在完全理智的狀態。

總結

這篇我們從劇本的角度出發，以及激起讀者情緒的撰文方式，剖析文章該如何撰寫可以更讓人能夠想要繼續閱讀下去。

撰寫文章就像撰寫劇本一樣，每個環節都是巧思，在吸引目光的同時還要能撰寫出精彩的內容，這就是文案能力的充分展現了！

延伸閱讀：

• 內容行銷是什麼？官網必做的3個內容行銷重點
• 同時經營部落格和自媒體的小技巧
• 部落格平台推薦：唯一推薦自由度最高的 WordPress.org

但如果你的網站包含了許多提供價值的文章，讓別人在搜尋他們想要的內容時，找到你的文章，進而從文章中對你產生信任，這樣不僅讓網站流量更高，也讓更多人看見你提供的服務。

今天這篇就來說明，內容行銷究竟是什麼？ 還有內容行銷的 3 個重點一次看！

內容行銷是什麼？

內容行銷的核心，就是產出好的內容！

而何謂好的內容呢？簡單來說，每個搜尋文章的人都有目的，可能是對某件事情的定義、可能是想找哪裡可以吃喝玩樂等等，而你就是要提供能夠解決他們需求的內容，它就是一個好的內容。

內容行銷的 3 個重點

內容行銷最主要可以整理成以下 3 個重點特色：

• 內容原創性
• 價值提供
• 文章豐富性

內容原創性：專業和經驗

有時候我們查詢會發現有幾篇根本在互抄，這種內容如果大量製造來洗 Google 搜尋頁的版面，是很有可能受到 Google 演算法的懲罰，最後讓文章沉落海底，也就是所謂的黑帽 SEO。

因此內容的原創性相當重要，雖然很多時候我們在解釋專有名詞時，確實大家寫的都一定會大同小異，但解釋完之後，我們可以選擇接著寫出不同的範例、寫出不同的見解，又或是我們可以寫出我們專業和經驗的想法，那就會是獨特且原創的內容。

價值提供：解決觀看者的問題

我們撰寫出來的文章就是要提供價值給別人，例如有人想知道內容行銷 是什麼？重點是什麼？而他們點進來這篇文章後，能夠透過文章內容獲得他們想要的答案，這就是我們提供給人的價值。

因此重點在於，思考目標客群會想看什麼樣的文章？會有什麼相關的問題？思考觀看你文章的人想要得到什麼答案，而非單純我們想要寫出什麼文章！而當你撰寫的大量文章富有價值性，且觀看你文章的人他們的問題都有被你的文章解決，這樣就能讓 Google 演算法覺得你的文章很有價值，進而提高 SEO 的排名。

文章豐富性：筆記式文章

一篇文章最好可以包含文字、圖片，甚至表格、列表等內容，這種筆記式的文章最能讓 Google 覺得你是在做重點整理，應該是一篇豐富且有價值的文章。

而且在 WordPress 的任何 SEO 工具中都顯示，文章中富有3張以上圖片，是能夠有效提高 SEO 排名。

為什麼公司官網也要內容行銷？

我們可以在寫文章之前，想想你的目標客群在 Google 搜尋欄中會想要知道哪些跟你提供的服務有相關聯的關鍵字。

舉例來說，如果你是一間提供網頁設計服務的公司，而在官網中增加了一個版面來撰寫內容行銷的文章，寫了像是「網頁設計如何做？」、「網頁設計教學」等相關文章，讓有需求的人可以除了他們內心的問題被解決，同時能夠知道你有在提供服務。

這也是為什麼每篇文章下關鍵字也相當重要，因為每組關鍵字的 每月搜尋數量 也會影響著文章的流量。

總結

當我們真的認真來撰文執行內容行銷的時候，我們才是真的能腳踏實地把自己的品牌價值呈現給到訪我們網站的人。

有些人可能會利用一些小聰明，到處去複製別人的網站內容，這樣的文章雖然能夠快速產出，而且可以騙過 Google 的演算法、提高 SEO，但因為你的文章跟別人差不多，少了那一分獨特性，你的品牌和他人的差異性就會出不來。

因此如果你也想建立你的個人品牌，甚至你是想建立公司官網的人，還是會相當建議文章務必加入自己的想法、公司品牌的核心理念等內容，讓你的內容行銷可以用最獨特的一面呈現給大家！

延伸閱讀：

• 同時經營部落格和自媒體的小技巧
• 部落格平台推薦：唯一推薦自由度最高的 WordPress.org！
• 3分鐘了解斜槓是什麼？斜槓內容如何變成被動收入？

去年一整年的時間，只有年初很積極撰寫文章，年中到年底之間每一兩個月才寫一篇，一邊忙工作一邊想要撰寫文章，那種無力感有時候會沒辦法承受得住。

尤其是我們部落格的經營除了撰寫文章，也會想要順便把自媒體給建立起來，要發 FB、IG、甚至到一些其他的部落格平台或論壇去引流，光是想起來就有點累。

這邊提供小技巧給大家，希望能讓大家可以繼續努力撰文下去，因為唯有持續性的發文，才有機會讓部落格被更多人看見，以及讓自媒體可以保持住熱度。

小技巧：一魚多吃

一魚多吃這個技巧，是我在聽了一些自由工作者演講和站長路可的免費直播課才了解到的。

只要不是罐頭文章，我們每一個人的部落格文章都是腦中的精華萃取，因此我們同一個題材其實應該要可以發佈到很多不同的地方，讓這篇文章達到最高的效益。

例如我發佈了這篇經營小技巧的文章，就可以將它這個主題，製作成 FB、IG 的貼文，透過 FB 貼文連結或 IG 首頁連結，讓有興趣的讀者，導流回到部落格中查看完整文章。

或是我們可以用一點點小小的變化後，放到 Medium 等其他平台上，例如把標題換成「一魚多吃的部落格文章寫法最高效！」，內容可以修改一些或擷取部分內容，然後導流回到你的部落格中，那麼同一個主題就可以到不同的地方去做發文，讓你想出來的一個主軸可以發揮最大的效益。

反向連結對 SEO 的重要性

一魚多吃還有一個相當棒的好處，就是對你的 SEO 是好的！

反向連結就是別人的文章中，連結到你的網站，就是一條反向連結。如果是一個 Google 信任度高 ( 也就是 DA 網站權重高 ) 的網站，例如 Dcard、Medium、BBC 等網站中，有連結連到你的部落格。這樣一來，Google 就會覺得你的網站相對有價值，因為有被信任度高的網站連結，因此讓你的部落格 SEO 提升。

但千萬不要傻傻到處去那些網站中貼連結連給自己，因為 Google 是會自動判斷是否有不正常的人為因素在干預 SEO，你的部落格如果被發現有異常舉動，可是會被 Google 封殺，你的網址基本上就永遠廢掉了。

總結

今天提到的一魚多吃經營小技巧，希望能讓大家更了解你的一個點子、一篇主題，其實是可以發揮到最大效益的，否則常常要想主題、想文章、又想圖文，平日又要上班的話，真的是相當容易疲乏的一件事情。

無論是部落格經營還是自媒體，堅持下去才是最大的重點，持續發文、持續互動，能讓你的 SEO 更好，也能讓你慢慢累積內容，變成一種成就感，最後化為動力，繼續往前邁進！

延伸閱讀：

• 文案 是什麼？開始你的第一篇文案練習，增加文案能力吧！
• 3分鐘了解斜槓是什麼？斜槓內容如何變成被動收入？
• 被動收入有哪些？最推薦6種人人能做的被動收入方式！

好處是你只需要專注在撰寫文章，其他什麼都不用管；但壞處就是你就真的只能發表文章，整體的設計樣式都還是有個框架在，即便 Medium 後來有推出過首頁排版樣式，讓自由度稍稍變高，但仍然是在一個框架中撰文。

隨著痞客邦彈出廣告越來越多影響使用者體驗、以及 Medium 演算法改變讓文章無法進入搜尋頁第一頁，出走潮也隨之而來。

這篇來解析一下為什麼部落格平台我會唯一推薦使用自架的 WordPress.org ！

你說架站很難？？以我這麼懶都能輕鬆架站，我可以很直接告訴你：使用 Cloudways 主機，現在都是一鍵架站了！

買主機不要傻傻用原價！我推薦最頂級的 Cloudways 折扣碼是【otta75】，享有前 3 個月 75 折的頂級優惠喔！下方按鈕直接幫你帶入折扣碼囉！

( 延伸閱讀：頂級 Cloudways 折扣碼免費索取！WordPress 架站優惠碼 )

部落客為何從痞客邦出走？

痞客邦曾經是非常多部落客推薦的平台，但是他們的廣告不只越插越多，後來甚至開始插入彈出式蓋板廣告、跟隨版面的廣告等，影響整體閱讀體驗。

但真的不能怪痞客邦！畢竟他們經營整個平台讓所有部落客可以免費專注在寫文章，他們的獲利方式就是靠廣告，不插廣告他們就準備倒閉了。

如果選擇出走到 WordPress.org ，雖然需要花較多時間進行排版美化，但自由度相當高，可以直接套用的模板也很多，而且你也可以自己申請 Google AdSense廣告，廣告費由你自己賺！

( 延伸閱讀：被動收入有哪些？最推薦6種人人能做的被動收入方式！ )

部落客為何從 Medium 出走？

Medium 剛出來的時候，因為 SEO 超級好，讓超多部落客推薦，撰文者也蜂擁而至。但近期卻開始發現，因為 Medium 本身的演算法變更，讓部落客寫的文章不再那麼輕易上到 Google 搜尋頁面的第一頁，開始有人選擇出走。

但出走前才突然發現，文章竟然無法整批帶走！讓很多人的心血就這樣被留在 Medium 了。

部落格平台推薦為什麼選 WordPress.org ？

每個讓你可以專心撰文的部落格平台，共同的缺點就是，當那個平台開始改變政策，你就要一直搬家！那為什麼不選擇一個你一開始雖然要花比較多時間來架站，但更自由排版，還幾乎可以再也不用搬家的平台呢？

WordPress 分為 WordPress.com 和 WordPress.org，其中 WordPress.com 是和其他平台一樣，排版相對不自由，甚至可以直接用他們的網址、不用另外申請只要登入就能開始，是一個讓你只需要專心撰寫的部落格平台，我個人沒有那麼推薦，畢竟自由度還是很低；

而 WordPress.org 是可以 99% 自由的平台，但你需要自己買虛擬主機、自己買網址，最後再按下 WordPress 著名的一鍵架站，你的網站就架好了！接著你有上千種模板可以選擇，並且可以隨心所欲排列你的部落格樣式！

優缺比較表

最後來一張比較表，讓大家比比看為什麼最推薦 WordPress.org 成為你的部落格：

而且你在其他平台上撰文，頂多只能放上自己的頭貼、Banner等個人化內容，卻沒辦法將整體樣式調整和你的品牌相同，這樣別人只會記得你是一位在痞客邦或 Medium 底下的有名部落客，而非直接記得你的樣子，因為品牌記憶點並不夠深刻。

想創造個人品牌，如果可以到 WordPress.org 擁有自己的網址、擁有自己的品牌特色、品牌顏色等等，都能夠讓你真正為自己做宣傳！

總結

建議想要經營部落格的人，一開始稍微辛苦一點自架網站沒關係，比較沒有後顧之憂啊！

虛擬主機購買我唯一推薦 Cloudways 主機！！我曾經加入過 Bluehost ，但前台網站的速度可以說是慢到你會想生氣，Cloudways 主機的穩定性高、速度快，一分錢一分貨，可以換來好的使用者體驗，你的 SEO 一定也會比較高，絕對是首選！

我推薦最頂級的 Cloudways 折扣碼是【otta75】，享有前 3 個月 75 折的超值優惠喔！下方按鈕直接幫你帶入折扣碼囉！

( 延伸閱讀：頂級 Cloudways 折扣碼免費索取！WordPress 架站優惠碼 )

斜槓薯薯

哈囉！我是斜槓薯薯，分享投資理財、優惠推薦，不錯過任何回饋和賺錢的方式，目標成為躺著也能有收入的沙發薯薯！

延伸閱讀：

• 被動收入有哪些？最推薦6種人人能做的被動收入方式！
• 3分鐘了解斜槓是什麼？斜槓內容如何變成被動收入？
• 文案 是什麼？開始你的第一篇文案練習，增加文案能力吧！

它雖然可以在瀏覽器上顯示你的網頁，但如果不想用F12模擬器模擬手機版，而是真正想要用手機來查看這個未上架的網頁時，該怎麼設定呢？

這篇就來告訴大家從安裝 Live Server 插件開始教學，最後會教大家在手機上也能預覽網頁的設定！

如果你已經知道如何安裝以及如何使用 Go Live 功能，只差不知道如何使用手機版預覽的設定，可以直接從目錄按下【 用手機預覽你的網頁該如何設定 】跳至設定教學的位置喔！

安裝 Live Server 插件

首先開啟VS Code，點選左側選單中四個方塊圖示的「延伸模組」按鈕，點下去後搜尋「 Live Server 」，並按下「安裝」。

安裝好之後，你就可以開啟你的網頁程式碼檔案，這邊以 HTML 為例。

再來就準備使用Go Live功能一鍵預覽囉！讓你不用另外安裝XAMPP或MAMP，就可以在瀏覽器上預覽你的網頁！

使用 Live Server 內建的 Go Live 功能預覽網頁

緊接著，我們把檔案存檔後，可以看到整個VS Code右下角，有一個Go Live的按鈕，就給他用力按下去！

這樣就直接自動跳出瀏覽器，並且完成網頁的預覽囉！

故障排除

故障狀況1：安裝 Live Server 插件後沒出現 Go Live 按鈕

如果你發現你的VS Code沒有Go Live按鈕，可能的狀況有兩種：

1. 可能是你剛安裝插件，所以建議把VS Code重開就可以了。
2. 如果你是早就安裝但突然有這個狀況，可能是你不是以資料夾的方式開啟，而是只有直接開啟檔案的關係。

想透過資料夾的方式開啟的話，可以到左側列表最上方的「檔案總管」圖示按鈕 > 「開啟資料夾」按鈕，並點選你檔案的整個資料夾。

選擇後再從下圖左側紅色框框的位置開啟檔案，右下角就成功出現Go Live囉！

故障狀況2：Go Live 按鈕按下去後，卻都跳之前寫的其他檔案頁面？

這個狀況是我在寫這篇的時候突然出現的問題，是熱騰騰的故障啊！！

這個原因跟檔案總管也很有關係，如果你之前在編輯A頁面，而且檔案總管是開啟A頁面的資料夾。

突然你想改一下不同資料夾的B頁面時，如果你不是從檔案總管開啟B頁面的資料夾，而是直接開啟B頁面後按下Go Live，那插件一樣會開啟的是A頁面噢！

用手機預覽你的網頁該如何設定

上面已經學會如何使用Live Server插件，並且成功在網頁上直接預覽你的網頁了。

想使用真正的手機來預覽網頁的話，有兩個要件：

1. 手機和電腦要連同一個Wifi
2. 到VS Code中的設定輸入一行程式碼

要輸入什麼程式碼呢？
首先點選上方選單的「檔案」 > 「喜好設定」 > 「設定」。

設定列表中，找到 Live Server 插件，並且找任一個「在settings.json內編輯」按鈕點下去，就能開啟設定的程式碼要撰寫的位置。

開啟後，打上以下程式碼：

"liveServer.settings.useWebExt": true

務必記得你在設定檔中，

每一個項目之間要有「,」逗號當作間隔噢！

存檔後，你就可以透過你的IP位置，用手機連上你的網頁囉！

我們來試試看吧！

實作用手機開啟測試網頁

我們確認過手機和電腦連的是同一個Wifi後，可以先開啟命令提示字元（CMD）來查找自己的IP位置是多少。

開啟命令提示字元後，直接打上 「ipconfig」 並按下Enter鍵。

上圖的IPv4就是你的IP位置了，因此只要到你的手機上打上192.168.XXX.XXX（每台電腦皆不同），後面接:5500（因為Live Server插件預設就是:5500）

也就是你在手機的網址列輸入：
192.168.XXX.XXX:5500
並按下Enter，你就可以順利在手機上預覽你的網頁囉！。

總結

之前我都使用F12手機模擬器來模擬，有時候還是會覺得沒有直接在手機上看來得準確，尤其是字體大小和CSS動態效果的呈現，還是要真的拿起手機來預覽比較有感覺！

這篇 Live Server 插件介紹，從安裝、故障排除到 VS Code 的設定，順利達成在手機上預覽網頁的目的，不用另外安裝模擬器的預覽方法最方便了！

會以 SCSS 為主而非 SASS 原因是個人習慣看有大括號的樣式檔，因此雖然安裝插件和設定檔不分 SASS 或 SCSS ，但本篇介紹文內容會以 SCSS 為主噢！

熟悉 CSS 之後為什麼會想學預處理器 SCSS 呢？主要是考慮到如何在主管或客戶要求：「做另一個版本把藍色主色換成綠色、圓角少一點、陰影重一點看看！」
遇到這種要求的時候，如果只有純 CSS ，要改的地方可就多了。

預處理器 SCSS 的好處就是這些改檔案的需求可以用變數來處理，雖然預處理器可以寫函數，功能相當強大，但對初學者來說光是學會將顏色、圓角、陰影這些歸納成變數，就已經是網頁設計福音了！

會想撰寫這篇就是因為，我當時光是環境設定和輸出路徑也搞了一陣子@@
讓我手把手帶你設定一遍吧！

建立 SCSS 檔案

首先我們先在建立檔案的地方新增檔案，下圖中是我用xampp所以路徑在xampp下的htdocs，
雖然我建立的是.php檔案，但.html的靜態網站也可以，完全不影響這次教學的插件安裝設定。

然後我們要先建立好scss和css資料夾，我們設定時主要只會用到這2個資料夾來測試有沒有成功設定好路徑噢。

接著在scss資料夾中新增一個style.scss檔案。

SCSS 寫入測試用的樣式內容

再來我們可以在scss檔案中寫下簡單的測試樣式：

/* 用$開頭設定scss變數 */
$color: red;

/* 使用scss設定的變數 */
body{
 background: $color;
}

scss好處就是我們可以使用$錢字號來設定變數，測試樣式我們用顏色來當範例。

使用時前面只要前面有加上$就會帶變數進來，這樣要改的時候就只要改變數內容，就可以統一將所有網頁的顏色改變了，超方便的吧！

寫好之後就來安裝「 Live Sass Compiler 」插件，讓 VS Code 自己幫你把scss編譯並生成css吧！

安裝 VS Code 插件 Live Sass Compiler

「Live Sass Compiler」 這個插件，可以讓你在每次存檔的時候，就自動幫你從scss轉換到css一次，因此第一次轉換後還可以同時開啟scss和轉換好的css檔案，未來還可以即時比對轉換結果。

我們到 「 延伸模組 」 > 找「Live Sass Compiler」 > 按下「安裝」按鈕。

安裝好之後，再來要進入設定檔案來設定輸出路徑等相關設定囉！

開啟 VS Code 的設定檔案

修改 VS Code 「受限模式」為「信任」

通常想要在 VS Code 開啟設定檔案 settings.json 檔案前，你需要先將左下角的受限模式改成信任，因此我們到左下角點一下「受限模式」開啟模式設定。

點選「信任」按鈕。

再來我們就可以放心去開啟設定檔囉！

開啟 VS Code 設定檔

選擇左上角的「檔案」 > 「喜好設定」 > 「設定」。

開啟後會出現下面這個畫面，我們直接找選單中「延伸模組」 > 「Live Sass Compiler」 > 找到Formats的「在settings.json內編輯」按鈕點下去。

再來就是直接在設定檔中，手動打上你想要設定的內容。

手動設定輸出路徑

點下去後可以打上以下程式碼：

"liveSassCompile.settings.formats": [
    
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    }
]

其中，savePath就是scss自動編譯成css檔案的輸出路徑囉！

當時 savePath 這條設定我搞半天都沒有效，最後是發現前面要多個 ~/ 符號才設定成功，這符號有些是用在「應用程式根目錄」，如果單純的 / 符號是從網站根目錄，不過有些網路範例並沒有寫到 ~/ 符號就能有效果。

補充：
format：指編譯後的 CSS 格式。
expanded 未壓縮
compressed 壓縮
extensionName：指檔案編譯後產生的副檔名。

到這邊基本設定就完成了，開始來測試自動轉換的強大功能吧！

測試將scss轉換成css檔

我們回到scss檔案，右下角因為安裝了 Live Sass Compiler 插件而出現了 Watch Sass 按鈕。

如果你的插件才剛安裝好，卻沒有出現這個按鈕時，通常重新啟動 VS Code 就會出現囉。

那我們就按下 Watch Sass 按鈕。

緊接著會跳出一塊視窗，顯示「Watching…」，這就表示已經成功啟用插件，並且開始監聽你的程式，只要你在scss檔案中按下存檔，就會自動幫你轉換成css檔案囉！

所以這邊我們就按下存檔吧。

存檔後出現下圖畫面，紅色框起來的地方就是轉換成css檔案後存放的位置，也就是我們剛剛設定的輸出路徑！

因此我們可以到檔案總管去看看有沒有成功製造出css檔案了。

這樣就能看到插件自動幫你生成好css檔案，並放在指定的資料夾中了！

你可以看到除了css檔案外，還有另一個.map檔案，這個檔案只是這個插件生成的路徑檔，不想生成的話只要到settings.json輸入以下語法就可以不生成.map檔了。

"liveSassCompile.settings.generateMap": false

務必記得你在設定檔中，
每一個項目之間要有「,」逗號當作間隔噢！

scss完成轉換後的css檔案呈現

最後就來看看成果吧！

我們把css檔案打開，原本的$color就自動替換成我們設定的顏色囉！

使用scss新手疑問

這邊多給我們的讀者一個新手容易遇到的小問題，大部分去看介紹文章可以看到許多用法，像是@mixin、@include等引用的基本用法。

這邊要介紹的小技巧是在使用上更基本，但新手容易出錯的用法：#{變數}

我們先把scss和css檔案同時開啟就能比較出問題點：

上圖可以發現，$ax-header-h: 66px; 是我原先自訂的一個變數。

當我想要用css的內建運算公式calc()語法，但如果只寫下面這樣：

/* 會轉換失敗的寫法 */

height: calc(100vh - $ax-header-h);

是沒有辦法成功被轉換的！

這時候要使用#和{ }把變數包起來，像下面這樣的程式碼寫法：

/* 成功轉換的scss寫法 */

height: calc(100vh - #{$ax-header-h});

就可以順利轉換囉！

總結

以上就是這篇使用 VS Code 的 Live Sass Compiler 插件，自動編譯 SCSS 成 CSS 檔案，並且把編譯後的檔案放置在你指定的位置中。

未來再也不怕主管或客戶突然想更換網頁顏色，否則100個頁面要改上百個顏色真的會頭昏昏腦脹脹，使用 SASS 或 SCSS 預處理器，幫你完成高效率的修改吧！

• 什麼是::before和::after？CSS偽元素怎麼用[實作範例]
• CSS position 屬性教學：relative和absolute實作
• RWD教學-只要兩行就能輕鬆見效的實作經驗

以前我還沒開始經營部落格之前，無論學生時期或在職場上籌劃活動，對我來說，就只是憑感覺盡量寫出讓人有感的文字而已。

直到有次和朋友一起籌劃活動時他跟我說：「你文案超強！」
當時我還滿頭問號想說，什麼是文案啊？
我還特地請教Google大神，才發覺原來寫出讓人有感的文字這一點，就已經是文案撰寫的一環了！

這一篇讓我用最簡單的切入點，帶大家了解文案是怎麼一回事，以及為什麼我認為無論你從事哪個行業，文案都相當重要的原因吧！

文案 是什麼？

簡單來說，文案就是運用文字，快速帶領他人進入你希望讓他了解的情境。

既然是要帶領他人進入一個情境，這邊可以分成兩種類型的文案 – 簡短或長篇。

簡短類型的文案

如果是想要撰寫盡量簡短的文案，例如活動Banner、網頁輪播圖上的文字、商業廣告圖文等。

簡短類型在短短幾行內就要完成的文案，對於抓準目標客群內心是非常重要的。

因為如果沒有精準地觸及到目標客群的心，沒有讓他們感受到「我也是！」的想法，以現在資訊量相當大的網路或現實世界，都很難讓人停留下來，而是會過目即忘。

長篇類型的文案

相對前述簡短的文案，這邊說的是例如網紅接的業配文、商業影片、業配影片等，甚至部落格撰寫也可以算是一種。

而長篇類型的文案更注重在氛圍的建構，運用故事的方式，或一些變化型如劇本三幕劇的形式、演講架構的模式等，快速讓閱讀的人進入情境！

為什麼大家都應該學會寫文案？

文案的重要性

無論你的所在產業為何，只要你的產業需要行銷、宣傳、舉辦主題活動或抽獎，甚至你自己想要接業配等，都需要圖文宣傳！

雖然現在早已進入影音時代，難道影音就不需要撰寫文案了嗎？

其實在製作說明影片或旁白類型的動畫時，我們都需要去思考，影片的剪輯順序如何安排、文字描述是否吸引人，這些也都是需要文案技巧的噢！

文案的安排

例如當我們替某些活動製作影片宣傳有多重優惠時，在文案上通常會用「而且…」、「甚至…」、「還有、還有…」等銜接詞，讓人有多重優惠層層堆疊的感覺，就是一種文案的安排。

又或是例如你自己經營網路商城，想要製作廣告圖片時，就算是用近期興起的Canva軟體直接速成廣告圖，必定仍然需要改變圖片上的文案內容吧！

因此就算現在有再怎麼方便的剪輯軟體或圖片軟體，文案是目前無法被省略或取代的能力噢！

文案撰寫的準備方向

因此我們準備寫文案的時候，可以從兩個面向來做準備，這樣就能更精準達到我們想要的效果。

1. 理解觀看者的喜好、需求
2. 清楚你希望讓觀看者做出什麼下一步的行為

1.理解觀看者的喜好、需求

通常我們在思考我們的目標客群時，會簡單地描繪出目標客群會有的樣子，從他們的年齡、職業、興趣等各方面去模擬，雖然是虛構而且是想像出來的，但其實相當有助於我們未來在撰寫文案、投放廣告的方向！

這就像撰寫劇本前，創建虛擬人物一樣，會先將人物的個性、身世背景、遇到事情的心態等設定出來，更專業的人物設定甚至會將這些內容，通通撰寫成一個人物小傳。

撰寫文案前，如果有先設想出目標客群的模樣，在寫文案的過程中，更可以有依據去撰寫出可以打動他們內心的文案！

2.清楚你希望讓觀看者做出什麼下一步的行為

撰寫文案的目的，例如希望觀看者能點擊網站連結、分享文章抽獎、購買商品等，我們要先清楚自己希望他們可以在看完文案後做出什麼樣的行為，更可以在文案最後的行動呼籲CTA完成設計。

這樣一來，當我們成功引導觀看者做出下一步行為之後，就可以讓他們進入我們給予的情境中，一步步達到我們期望的目的。

學會文案的第一步

如果還是覺得文案好難、好複雜，那我可以給予你們建議的第一步就是，平常心看待你的文字！

主要是讓你自己同理你的目標客群，以他們的視角出發，並撰寫能快速讓他們進入的情境，你就成功一半了。

文案在思考的過程雖然相當專業，但文案說穿了就是一種構思過的文字！你也一定可以寫出好文案！

總結

好的文案甚至可以創造品牌形象，讓你從企業品牌到產品能同時提升好印象！

想要寫出好的文案，就從不斷的練習開始，即便一開始只有一兩句，即便一開始抓不太到目標客群心理，但相信只要經過練習，人人都可以學會寫文案！

• 為何活動回流率超低？辦活動應該懂的目標客群心理
• 辦活動需要什麼？從無到有的辦活動籌備項目大公開
• 活動企劃實戰！運用手遊與桌遊輔助實體活動設計

而手遊和桌遊常見的類型，我們可以先大致分為以下幾種：

• 益智遊戲
• 闖關遊戲
• 策略遊戲
• 戰爭遊戲
• 情境遊戲

接著我們就可以從這些分類去探索並尋找你要的、適合你的，程序上依序可以分為以下三大步驟：

1. 哪些符合你今天要舉辦的活動主題
2. 哪些適合轉化為實體活動的遊戲
3. 進行籌備人力與資金需求的評估

活動設計 – 遊戲的共通點

關於遊戲，以上那些遊戲類型其實都有共通點的。

就是大部分都需要團隊合作才能完成任務，或是擊敗共同敵人來取得勝利。

「團隊合作」在各大活動其實都相當實用噢！
這點一定要筆記打星號！！⭐⭐⭐

不論今天我們是替公司舉辦尾牙小遊戲或團康遊戲，還是我們帶一個小朋友參加的周末假日活動，活動目的很多其實是希望讓團隊的氣氛更好，或是將互不相識的一群人快速建立關係，這樣就能很快融入活動當中，讓整體活動留下好印象。

因此為什麼會用遊戲來轉化成實體活動中的遊戲，原因就是很多的遊戲設計本身就已經包含了「團隊合作」這個重要因素，我們可以從現有的遊戲裡面，先獲得一些故事劇情甚至感受遊戲的精隨與理念，這樣我們就只需要改變故事劇情，並將遇到的阻礙與團隊合作的內容更改成符合你的活動即可。

(延伸閱讀：如何擁有源源不絕的活動企劃靈感？破除創意的迷思)

最適合發揮的活動設計 – 情境遊戲

各類遊戲當中，最好發揮的應該是情境遊戲。

情境遊戲主要特色包含，有故事劇情甚至融入作者欲傳達的意義在內，會讓玩家較容易有身歷其境的感覺。

常見的地方會是多人遊戲的桌遊，以及議題實境遊戲等，議題實境遊戲台灣目前評價最好的是聚樂幫設計團隊，可以點選這裡前往他們團隊開的課程，或點選下方延伸閱讀文章有另一篇的完整介紹噢！

(延伸閱讀：【課程推薦】《實境遊戲設計》評價與課後心得)

會覺得最好發揮是因為，我們在活動中設計小遊戲的時候，最好也要有故事劇情貼合我們的活動主題；另一方面就是我們可以將劇情結合益智遊戲或策略遊戲的玩法，不僅讓參加人理解遊戲目的、體驗遊戲過程，還能大幅增加遊戲性。

下面我們直接舉個例子，帶大家一步步生成一個小小遊戲，以節日活動為例。

節日主題的活動設計

舉例來說，元宵節活動通常會是猜燈謎居多，我們可以從其他的情境遊戲當中，獲得靈感並修改劇情，將一連串的謎題設計完成，還可以將一道道謎題設計得有連貫性並貼合活動主題。

進行方式的部分可以有許多變化，如果只有一問一猜或快問快答的方式，整體來說還是稍嫌單調了一些。

這時候如果多人一起猜，甚至進行分兩組搶答計分活動，有倒數計時的時間壓力是競賽活動當中可以增加刺激感的重要因素之一。

若還是覺得沒辦法讓大家有團隊合作的感覺，我們可以再將謎題拆解開來，假如一組有四個人，我們就把謎題拆成四組小謎題，甚至可以把謎題藏到場地不同地方，讓大家依據提示去找尋下一個謎題，最後要在時間內進行討論後搶答。

這樣就是一個比較完整且具有遊戲性的小活動，從發想到變化的過程其實也是很好玩的一件事情！

如何把活動中的遊戲環節做得讓大家有好的活動體驗，甚至讓大家快速進入活動狀況，就是我們發想活動與籌備需要用心的地方了。

總結

總結這篇的重點，一場活動當中的小遊戲、破冰遊戲或過場遊戲，也都是可以精心設計過的，未必只拿一些現成的破冰遊戲來讓大家彼此認識。

尤其常參加活動的人也許那些遊戲早就玩過不知道幾次了，或是覺得有些遊戲並沒有辦法讓大家互相認識，就白費了那場活動第一印象，進而影響後續想要傳達的內容。

而活動可以透過手遊、桌遊互相結合，轉化成符合活動概念的遊戲，並且抓住設計活動時，
「團隊合作」的重要設計概念，我想參加人在玩過遊戲後，也都一定能感受到主辦單位的用心噢！

• 為何活動回流率超低？辦活動應該懂的目標客群心理
• 活動分組不尷尬！主辦單位應該懂的分組方式
• 辦活動需要什麼？從無到有的辦活動籌備項目大公開

還不知道怎麼使用CSS的position相對位置屬性可以按下方連結延伸閱讀，讓你的偽元素應用更廣泛呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

這裡跟各位讀者聊一下我當初在學習偽元素的經歷，當時自學CSS之後，對於偽元素其實並沒有碰過，學習的課程中也完全沒有提過這個方法。

於是當我到職場上，發現這個東西的時候，一開始只覺得好像很神奇，可以透過CSS就完成增加文字內容在段落前後，完全不用去改HTML或內文。

但後來發現怎麼有些標題附近的裝飾，好像也是用偽元素做出來的！？

於是開始研究怎麼生出那些東西，這完全考倒我了，我花了超級大把的時間爬文試圖了解這個東西！
但我無論怎麼研究，就是各種卡關，很多網站的程式碼範例是已經簡化、合併過的，讓我反而越來越搞不清楚到底如何使用它。

今天這篇文章，帶你從頭了解一次，並且用最簡單的範例，實作出加入內文的程式碼，以及實作當時我搞不懂的標題裝飾！

也強烈建議大家一邊實作，讓自己慢慢體會這個概念，最後這技巧才會是你的呦！

初學偽元素::before和::after

什麼是「偽元素」？

「偽元素」英文是「Pseudo」，可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。

偽元素實作上常用的有::before、::after、::selection三種，而你會看到它們都有兩個冒號開頭，這跟:hover、:active等操作型的偽類做出區別。

雖然據說有些比較沒有習慣這樣區分的工程師不小心只使用了一個冒號，執行上好像也有成功，但養成好的習慣，也是避免未來程式需要花更多時間debug的好方法噢！

「偽元素」如何運作的？

這個東西簡易來說，是一個可以讓你僅透過CSS檔案，就能增加東西在HTML內文的方式。

實務應用上除了加入文字內容，還能增加各種不同的東西在畫面上，也可以搭配position屬性，讓你增加的東西漂浮在頁面任何你希望他存在的位置呦！

聽起來超厲害的吧！
這邊就透過範例來說明囉！

偽元素::before和::after實作範例

HTML基本設定

想一步一步搞懂的大家，也建議可以直接開啟你的編輯器，懶得打程式碼的話，就算是複製貼上看看效果也好，只有把範例看過去的話有時候也比較難吸收呦！

<!-- HTML -->

<div class="intro">我是艾咖Aikko！</div>

CSS我們先留空，HTML用一個<div>標籤寫下自我介紹，並且給予它一個class當作等等要在CSS使用的樣式名稱。

上方程式碼的結果會顯示這樣：

加上CSS偽元素

接下來我們試著加上偽元素::before和::after的CSS吧！

/* CSS */

.intro::before{
  content: "嗨！大家好，"; /*加入這些內容在整個<div>的前面*/
  color: blue; /*字體為藍色*/
}

.intro::after{
  content: "請多指教！"; /*加入這些內容在整個<div>的後面*/
  color: green; /*字體為綠色*/
}

::before就是可以將創建的內容直接放在整塊<div>標籤內容的前面；
::after則是放在後面，想加入的文字內容可以直接放在content的屬性當中，呈現結果如下：

用顏色區分就更清楚了，有沒有發現HTML內容完全不用變更，靠著CSS就能加入內容到HTML，完全是我這種底層工程師改不到HTML時的福音啊！

到這裡，你已經學會最簡易的偽元素應用了，趕緊消化練習一下，緊接著我們讓它有更廣泛的應用吧！

偽元素::before或::after輕鬆完成網頁的點綴和線段

網頁的點綴和線段範例

實際到Pinterest找一個有所謂的標題旁點綴元素，像下圖中”HOME >> 99 INSPIRATIONAL…”那段下方橘色長方體，這就可以用偽元素將它製造出來：

配合相對位置設定，偽元素隨你放！

還不清楚相對位置position的relative和absolute如何設定嗎？
建議先到下方文章練習看看比較容易看得懂呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

那我們將剛剛的HTML改成圖片上的那串英文，並先將CSS留空：

<!-- HTML -->

<div class="intro">HOME >> 99 INSPIRATIONAL WEBSITE DESIGN TEMPLATES FOR 2020</div>

呈現如下：

接下來我們將CSS部分完成：

這裡先來個小提醒，就算沒有使用到content屬性，也一定要寫這個屬性，content屬性和::before、::after是生命共同體！
雙引號內容留空也沒關係，但是不寫的話就不會有作用呦！

/* CSS */

/*那整塊<div>標籤*/
.intro{
  position: relative; /*將整塊<div>當作基準位置*/
  width: 516px; /*設定寬度，讓偽元素的寬度直接設100%*/
}

/*新增的偽元素*/
.intro::before{
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width: 100%; /*設定長方形寬度*/
  height: 10px; /*設定長方形高度*/
  background: #ff7600; /*設定長方形顏色*/
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
  top: 100%; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
}

完成樣式如下：

超快速的吧！

到這邊雖然已完成，但也許你心中會有幾個疑惑，我來為大家解答一下。

解決你內心的疑惑

第一個疑惑：
那如果是用::after來寫的話可以嗎？
答案是當然可以！

因為一旦使用了position相對位置屬性後，就直接擺脫了你加的內容是要放在後面還是前面，而是直接按照position相對位置的設定改變位置囉！

第二個疑惑：
為什麼是用.intro這個<div>標籤當作基準呢？
這時我們要到網頁的F12開發人員工具來看看他們的階層關係：

從網頁F12開發人員工具我們可以發現，你剛剛用CSS創造的偽元素::before就在<div>標籤的下一層！
也就是說，::before這個元素你可以想成是一個標籤區塊，套用position相對位置設定後，偽元素設定position:absolute;屬性後的父元素就是<div>標籤區塊了。

因此，我們將<div>標籤區塊設定一個position:relative;屬性，來作為偽元素的基準位置。

這樣你就可以透過top和left等位置屬性，任意調整你創建的偽元素區塊位置了！

::before和::after實務上要小心的地方

使用時務必務必要小心的就是：
::before和::after一定要加入content屬性才會有作用！！！
這點一定要星號再星號⭐⭐⭐⭐⭐

就算沒有要加入文字，也一定要有content屬性，內容留空即可，像這樣：

/* CSS */

.intro::before{
  content: ""; /*雙引號中留空，但必須存在*/
  /*其他屬性設定*/

}

否則若沒有content屬性，你怎麼設定都是無效的呦！！！

就連我之前寫的時候偶爾也會忘記，然後再那邊debug老半天甚至還重複清掉cookie，懊惱為何沒有效果，最後才發現content屬性沒加到偽元素的設定中所以無效，真的是費心又耗時啊！

總結

以上就是最基礎、最基礎的偽元素::before和::after介紹，希望經過這些最基本的說明與範例實作，讓大家不用像我一樣花大把時間還一直搞不懂這在幹嘛！

而偽元素的應用超級廣泛，還能包刮用偽元素創建一個大於符號的箭頭，只要::before和::after分別產出一個長方形並傾斜，就能產出一個純程式碼的箭頭囉！

所以一旦你學會偽元素::before和::after的應用，它的優點就是自由度極高！！
還有只要你有一個HTML標籤作為基底，每一個標籤你都可以建立::before和::after兩個新的區塊出來，讓你不用修改HTML就能完成一堆實用的效果囉！

• Font Awesome教學-Icon圖示取代文字的按鈕
• CSS position 屬性教學：relative和absolute實作
• 純CSS製作HTML頁籤切換的效果與實例
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• Radio button和Checkbox放大並自訂樣式