注音與拼音對照表

幾年前曾到廣州工作、生活，當時為了方便使用簡體字溝通，花了一些時間學習那邊常用的拼音輸入法，在桌上型電腦以及手機操作都用得到。後來，我發現手機裡的繁體中文也有提供這種拼音輸入。基於個人的使用經驗，我覺得手機上輸入中文時用拼音會比注音快。這可能是因為注音輸入常常還需要選擇四聲，那就會比較費時一點點。

最近在整理手邊的資料，找出了當年用手寫的注音與拼音對照表，回想起自學拼音的過程。我覺得這個對照表可能對某些想要學習拼音輸入的人會有幫助，就將這個表格電子化上傳。

至於學習拼音輸入的過程，順便總結一下經驗：

1) 如果原本就會鍵盤英打的人，熟悉英文字母的鍵盤位置，那在學拼音的時候，應該會覺得還滿容易上手的。

2) 建議初學者可以先把注音和拼音的對照表先反覆瀏覽幾次，了解拼音的基本邏輯。接著，可以拿原來就熟悉的文本當作素材來練習，例如唐詩或流行歌的歌詞。也就是，試著用拼音輸入法打出唐詩或歌詞，這個好處是，有沒有打錯你可以立刻察覺、校正。反覆多練習，自然就會熟悉。我當年是拿姪子的小學語文課本來練習。

3) 學習過程中一定會遇到比較奇怪、老是搞錯的拼音組合，可以作筆記，加深印象。例如注音ㄩ通常拼音用u，例如取的拼音是qu。但是女生的女，拼音卻是nv。如果打nu的話，會變成怒、奴、努這些字。

Blogger網誌防複製，鎖右鍵的語法

認真寫部落格累積原創文章的人，應該都很討厭被不明人士複製自己的文章然後轉貼在別的地方。對於不希望文章被人隨便複製轉貼的Blogger作者來說，有一個簡單的方式就是在網誌的原始碼中嵌入一段語法，使「反白-按右鍵-複製」的功能失效。

2020年7～8月開始，Google把Blogger的後台做了更新，有些按鈕和功能換了位置，變得不容易找到。本文說明如何在新版本的blogger後台嵌入鎖右鍵的語法。

1）首先登入你的blogger，進入後台管理頁面。有些人擁有或管理超過一個網誌，所以請確定你是在想要鎖右鍵的那個網誌的管理後台。

2）左側的選單找到【主題】，點開後會看到頁面中間有「我的主題」字樣，以及下方有一個醒目的橘色【自訂】選單，需點擊旁邊的倒三角形才能展開選單。

3）選單下拉後，會看到「編輯HTML」，請點擊它，進入網誌的原始碼頁面（這裡的原始碼看起來眼花撩亂，請小心不要更改到別的內容）。

4）用游標在原始碼的區域點一下，然後按 Ctrl + F（搜尋），在跳出的搜尋框中輸入：</head>。找到後，我們要在這個</head>之前嵌入以下語法：

<!--鎖右鍵 -->

<script type='text/javascript'>

document.oncontextmenu = function(){return false;}

document.onselectstart = function(){return false;}

document.onmousedown = function(){return false;}

</script>

<!--鎖右鍵 -->

5）語法嵌入後，別忘了儲存（在頁面右上角附近有一個磁碟片的圖案，就是儲存按鍵）。步驟到此結束。可以登出帳號，重新打開網誌，檢查確認鎖右鍵是否已經生效。

6）建議在語法前後加上備註：<!--鎖右鍵 -->，以方便辨認。萬一日後改變心意，不想鎖右鍵了，只要回到原始碼，可以很快找到這段語法並刪掉它。

修圖去背景，用Keynote就OK！

講到修圖去背景，很多人首先想到的是用Photoshop這類的修圖軟體，這好像也是P圖一詞的由來。但是在現實生活中，身為網路小白的人，若不是以處理影像為主業，付費使用這類專業軟體顯然不太實際。以我自己來說，我要的是可以運用自己電腦裡已經有的程式APP，或是網上容易找到的免費軟體，滿足影像處理的基本需求就好，例如不同圖片格式之間的轉存、圖片的剪裁、圖片長寬像素的設定等等，而本文要介紹的則是簡單的去背景技巧，所使用的是蘋果電腦內附帶的免費軟體Keynote。

Mac電腦的Keynote是用來製作簡報的軟體，相當於微軟的PowerPoint。不過我個人從來沒用Keynote做過簡報，而是把它當成排版軟體，排好了之後就儲存為圖片格式來使用。本文介紹的修圖功能，是我最近才發現的。把步驟記錄下來，哪一天忘了細節可以再翻出來看。

用Keynote剪裁圖片（去除背景）

1）開啟Keynote程式。新增文件，選擇任一主題。因為接下來的重點是P一張圖片，請先新增一張乾淨（無圖文框）的幻燈片來用。

2）點擊頂部選單「插入」，找到「選擇」並點擊，然後瀏覽電腦裡的檔案夾，找出你要P的圖片。

3）點擊頂部選單「插入」，找到「線條」，選擇「用筆描繪」，滑鼠的箭頭就會變成一個鋼筆頭的形狀。（另一個叫出鋼筆頭的方式是點選快捷列的「形狀」，選單下拉後，右上角有一個鋼筆頭形狀，就是它。）

4）沿著想要保留的物件（例如圖片中的貓）外圍，用鋼筆頭一點一點把物件圍起來。點與點之間的距離可長可短。注意，結束時需把第一個點再點一次，才會形成一個封閉的圍欄。過程當中，如果某個點的位置不理想，可以用鋼筆頭按住它再移動來改變位置。

點點的位置可以距離物件邊緣很近很近，也可以故意留一段距離。如果距離很近，（幾乎）不留任何背景，就等於俗稱的「去背景」或摳圖。如果故意留一段距離，等於保留了物件邊緣的一部分背景，則會產生一種用剪刀剪裁的有趣效果。

5）前一個步驟把物件圈出來並且形成封閉圍欄後，滑鼠在圖片上任一處點一下，會看到點點都不見了，變成一圈黑色線框。接著按Command + A（全選），此時會看到出現兩個方框，一個是原始圖片的圖框，一個是以圍欄物件為主體的方框。

6）點擊頂部選單「格式」，找到「影像」，點擊「以所選範圍進行遮罩裁切」。此時，圖片就會只剩下圍欄內的部分，外圍的「背景」被半透明的一層遮蔽掉了。此時還沒完成裁切。

7）在遮蔽狀態下，會出現一個裁切圖示，這裡可以讓你調整裁切的範圍，可以把原始圖片放大或縮小或移動位置。萬一前一步驟的裁切有些微誤差而不太理想的話，在這裡可以調整一下。調整完，按「完成」，背景就不見了。

8）裁切好的物件，可以直接在Keynote頁面當成簡報素材使用。而如果想要把這個物件單獨另存新檔，請繼續閱讀本文第二部分。

把裁切好的圖片物件儲存為PNG圖檔

經過裁切的圖片物件，如果覺得在別的地方還用得著，就可以把它單獨存為PNG格式的圖檔。PGN格式可以儲存透明背景的圖片，正好適合我們這個費心裁切的不規則形狀物件。

1）假設圖片物件已經裁切好了在Keynote的頁面上。在存檔之前，我們須先把Keynote頁面的「背景」去掉。做法是，在頁面上點一下，可以看到右側出現「幻燈片佈局」的標籤頁。找到「背景」的選項，把它改為「不填充」，此時頁面會變成黑色，代表背景沒顏色了。

2）點擊頂部選單「檔案」，找到「輸出至」，選擇「影像」。此時跳出「輸出您的簡報」，請輸入正確的頁碼，然後「格式」要選擇PNG，並勾選「輸出透明背景」，按「下一步」，輸入檔案名稱以及選擇存檔的位置即可。

如何調整Blogger圖片的清晰度

Blogger是Google提供的免費網誌（又稱部落格、博客，以下通稱部落格）服務，是發布日誌形式文章的網路空間。其實近幾年來，社群媒體興起之後，網友們的注意力和時間都轉移到手機端的FB和LINE了，對了還有IG。部落格的熱潮似乎已經過去。不過我很慶幸Blogger的服務還延續著，讓我的文章們有棲息之地。

Blogger承襲了Google的簡潔風格，它提供的網站版面主題（也就是範本template）數量不多，這幾年來貌似也沒增加新的，算是一款佛系服務吧！我最欣賞它的一點是網頁中不會有不請自來的廣告；它不會因為提供免費的網路空間，就認為它要用推廣信息、彈窗廣告，肆意打斷作者的文章脈絡，干擾讀者的閱讀。這一點，堪稱大氣！

真心的恭維話說完了，現在進入主題：使用blogger內建的版面主題建立部落格，發布文章和圖片之後，可能會發現，「咦，為什麼我上傳到網頁的圖片，看起來比我的原圖模糊，看不清楚？」


圖片模糊的狀況

本文所指的圖片模糊，是出現在以下的狀況中：在Blogger後台發布新文章，在「撰寫」模式點圖片icon來插入圖片。圖片出現後，選擇圖片顯示尺寸。Blogger內建有「小」「中」「大」「特大」「原始大小」這幾個選項。如果自己不手動選的話，系統會自動設為「中」。

實際測試，會發現「中」和「大」兩種尺寸似乎比較合用。若選「特大」和「原始大小」，圖片往往會超出文章區的寬度。

問題是，不管是中尺寸的圖片還是大尺寸的圖片，看起來都比我印象中原始的圖片模糊。

我曾試著回頭把自己的圖片，在電腦的影像軟體內調來調去，包括更改像素（pixel，例如寬度調成1500）或解析度（dpi，例如調成300），結果上傳後圖片還是變得模糊。

既然無法靠自己的良知良能摸索出解答，只好向Google大神求助。在輾轉於一連串的網友分享之後，終於測試出有效的解方。


問題何在

看過網友的分享，才發現問題是出在，圖片在上傳和插入使用的過程中，系統都會對圖片動一些「手腳」，也就是會自動進行設定，使得圖片變得和我們的原始圖片不太一樣。

查看「有問題」圖片的HTML原始碼，會看到類似以下內容：

這張圖片的原始碼可以分成兩部分來看，第一部分是錨接標示<a>，第二部分則是圖片標示<img>。

<a>代表點擊圖片時，會開啟標示中的鏈接網址，那是（比較大也比較清晰的）同一張圖。注意長長的網址中有一個數字s1600，這個是有關「清晰度」的信息。

<img>標示的是文章在瀏覽器上顯示時圖片的鏈接網址，可以看到長長的網址中有一個數字s320，另外還有尺寸數值（例如width="320" height="320"）。

仔細比對這兩個鏈接網址，除了s1600和s320不一樣之外，其他部分是相同的。

其實就是這裡隱含著blogger後台對圖片「動手腳」的痕跡。

簡而言之，當一張圖片上傳到後台時，系統內設的圖片最大寬度為1600。意思就是，如果原始圖片的寬度大於1600，就會自動縮小為1600；如果原始圖片小於1600，則不縮小也不放大。我試了一下，還發現解析度dpi也會被改動，也就是系統會自動把原始圖片dpi大於72的，縮小為72。

圖片上傳時第一次被動完手腳，圖片變成dpi72、寬度不大於1600。此時的清晰度就是s1600（也是最大值）。

這就是為什麼，在<a>原始碼當中，看到的清晰度數值總是s1600（我認為這個設定的用意是，當讀者點擊文章中的圖片，可以看到放大的、較清晰的圖片）。

至於在<img>原始碼裡的參數，則跟我們插入圖片時選擇的尺寸大小有關。

選「小」：清晰度s200，width 200、height則依每張圖比例而定
選「中」：清晰度s320，width 320、height則依每張圖比例而定
選「大」：清晰度s400、width 400、height則依每張圖比例而定
選「特大」：清晰度s640、width 640、height則依每張圖比例而定
選「原始大小」：清晰度s1600

意思就是，圖片在被插入文章中時，系統第二次動手腳：根據你選擇的圖片大小，改動了圖片的寬度和高度，也改動了圖片的清晰度。這第二次動的手腳，（一般情況下）不但把圖片縮小了，也使圖片變得模糊，等於是二重「傷害」！


改善Blogger圖片清晰度的原理

想把圖片變得清晰，其原理就是把<img>裡設定的清晰度數值調高。

調高清晰度數值的方法分為兩種：
一種治標，需要在發布文章、上傳圖片之後，打開文章的HTML模式逐一修改每張圖片的原始碼。這個方法會有點麻煩，但操作步驟相對簡單、易理解。
一種治本，必須打開部落格主題範本的HTML文件去修改內設值。這個方法會有點技術性，有點風險，但是一旦改好之後，未來上傳圖片就不用逐一修改圖片的HTML原始碼了。

改善圖片清晰度的治標法：

1. 文字和圖片在後台上傳，先儲存、發布，看一下圖片效果。（假設圖片在這步驟內設為「中」尺寸。）

2. 再次編輯文章，切換為HTML模式，找到圖片的原始碼，在<a>的網頁鏈接中，確認清晰度是s1600。

3. 接著，在<img>的網頁鏈接中，把清晰度s320改成最大值s1600。（需要的話可以順便修改寬度和高度，例如width="500" height="auto"。）

4. 更新文章後，檢視網誌，應該可以感覺到圖片變清晰了！如果覺得圖片顯示尺寸太大或太小，請回到第3步驟修改寬度width即可。

5. 溫馨提醒，這種修改方式必須逐張圖片進行修改。修改的時候請看清楚了再下手。萬一改壞了又找不到哪裡有錯，只好刪掉文章重新發。

以下圖片示範，在圖片尺寸相同的情況下，把清晰度調高的效果是很明顯的。

把圖片尺寸設為「小」（自動設s200, width=200）

把圖片尺寸設為「小」（手動改s1600, width=200）

把圖片尺寸設為「中」（自動設s320, width=320）

把圖片尺寸設為「中」（手動改s1600, width=320）

把圖片尺寸設為「大」（自動設s400, width=400）

把圖片尺寸設為「大」（手動改s1600, width=400）

改善圖片清晰度的治本法：（本方法涉及修改網址的HTML原始碼，適合略懂HTML和CSS的朋友，請謹慎操作）

1. 進入Blogger後台，選擇左側選單上的「主題」後，點擊主頁面中的「編輯HTML」。此時可以看到部落格的原始HTML文件。

2. 點一下原始碼區（只是點一下，讓游標在原始碼區域），然後按Ctrl+F，此時會跳出搜索框，在框內輸入「.post-body img」（注意最前面有個英文句點），並按Enter。

3. 這個就是HTML原始碼裡的文章區圖片設定CSS代碼。如圖所示，加入max-width: 500px;和max-height: auto; 兩行代碼。

.post-body img {
   max-width: 500px;
   max-height: auto;
   ....此處還有其他代碼
}

新增這兩行代碼的意思就是，把文章區（post-body）的圖片，設定顯示的最寬值為500px，高度則依比例變化。如此一來，這個文章區圖片的設定值，將適用於此部落格所有文章中設為「原始大小」的圖片（你另外手動更改的話，就不受此限制。）

原始寬度大於500px的圖片，都會自動顯示為500px。不需要自己一張一張地修改代碼，圖片寬度都是小於或等於500px。

4. 把文字和圖片在後台上傳，先儲存、發布，看一下圖片效果。發現系統自動把圖片尺寸設為「中」。

5. 再次編輯文章，在「撰寫」模式下，逐一點選每張圖，把圖片尺寸選為「原始大小」。改完後，存檔。原始大小的清晰度會是s1600，但寬度和高度會被調整為你在網頁主文件中的設定值（本文範例為500px）。

6. 再次查看文章發布後的效果。

把圖片尺寸設為「原始大小」（自動設s1600，尺寸也自動縮小）

清晰度改善之後，整個文章看起來順眼得多，也不會覺得該去眼科掛號，或是有換電腦的衝動！

用PowerPoint製作透明背景的logo小圖標

前篇文章介紹了如何在Keynote軟體中製作透明背景的小圖標。其實同樣身為簡報軟體的PowerPoint（簡稱PPT），也能製作透明背景小圖標，只不過步驟方法不太一樣。

在我撰寫操作流程時，才發現我用的是簡體中文版的PowerPoint......因此以下寫到的用語可能會跟繁體中文版顯示的有所不同，但是功能和原則應該是互通的。

製作透明背景小圖標的步驟：

1. 開啟PowerPoint，新增檔案。

2. 點擊頂部選單「設計」，選擇「頁面設置」，調整幻燈片的寬度和高度。由於這裡的目標是製作小圖標，所以我設定為20公分見方。如果希望完成後的圖檔可以放得更大，請自行增加幻燈片的寬度和高度。

3. （如果想要加入文字），點擊頂部選單「插入」，選擇「文本框」，在頁面上拉開一個文字框，並鍵入文字。依自己的喜好選擇字型、字體大小、顏色，以及文字效果。需要的話，可以使用多個文字框，使文字排列在頁面上的位置更自由。
   在這裡必須附帶提醒的是，PowerPoint軟體內建的字型，有些是不能夠「商用」的。如果你製作的小圖標，是放在自己的PPT簡報裡、個人社交帳號當頭像，或是個人部落格當logo，沒有商業使用的成分，應該沒什麼問題。但是若用來當作商標或品牌logo，或是把做好的圖標拿去銷售，涉及直接使用軟體內的字型編輯成圖像，就有侵權的問題。大家務必留意，不要越界使用。

4. （如果想要加入圖形、色塊），點擊頂部選單「插入」，選擇「形狀」，在頁面上拉開形狀，調整位置、大小，並修改形狀的填充顏色、邊框線條顏色及粗細度，也可以加上陰影效果。

5. 設計圖像的過程中，記得存檔成PowerPoint簡報檔格式。

6. 大致設計成形，就可以先儲存為透明背景的PNG圖檔，來查看效果。
   方法：從最底層的圖文框開始往上，依序點選，直到全部選取。（也就是，先點選一個圖文框後，按住shift鍵不放，然後繼續點選其餘圖文框）。全部選取後，按滑鼠右鍵，選擇「另存為圖片」，系統內設儲存為PNG格式。

7. 打開PNG圖片查看設計效果，並檢查圖片的尺寸是否理想。如果效果滿意就OK了。如果想要修改，只需重新開啟PowerPoint檔案進行修改，再重複一次步驟6的存檔就行了。

用預覽程式查看圖片，確定是不帶背景的

Troubleshooting

*狀況一：儲存的PNG圖片帶有背景。
這可能是存檔的方式有誤。如果在頂部選單中選擇「另存新檔」，並選擇PNG格式儲存，就會把整個頁面儲存下來，也就會帶有背景。
儲存透明背景的原理是，選取頁面上的圖文框，按滑鼠右鍵另存為圖片。

*狀況二：圖片雖然是透明背景，但是有個圖文框沒有顯示出來（沒存到）。
可能是因為那個圖文框沒有選取到就存檔了。
也有可能因為選取的順序不是由下往上。例如本文中示範的，正確順序是先選取（底層的）圓形圖標，再選取（上層的）文字框，另存為圖片。如果選取的順序相反，最後得到的圖片只剩下圓形圖標，文字不見了（理論上是被覆蓋了）。

使用Keynote製作透明背景的logo或圖標

社交媒體的興起讓許多人在網上有了朋友圈，與親戚朋友、同學、同事的互動拉到了線上，有時候這種虛擬空間的交流比實體世界的往來更加頻繁，因此也越來越受到重視。幾乎所有的社交帳號都需要使用者上傳一張「頭像」。上傳自拍照片當頭像是最普遍的，而有時我們也可以下載網上的圖像來用。不過，你是否考慮製作獨一無二的「圖標」當作頭像呢？只要用手邊的電子設備，就可以輕鬆發揮創意，製作圖標作為logo了。本文介紹的是用Mac電腦裡附贈的Keynote軟體來製作透明背景的圖標。

Keynote原本的用途是製作簡報，相當於微軟的PowerPoint（也就是一般慣稱的PPT）。PowerPoint當然也可以用來製作圖標，我將在另篇文章中介紹。

所謂的「透明背景圖標」，指的是自己設計圖形和文字的組合（也可以只是圖形或只是文字），並在輸出時儲存為不帶（白色）背景。透明背景的圖標使用起來不會有固有底色的干擾，可以充分與放置處的背景融合，顯得較為自然。

步驟說明：

1. 開啟Keynote軟體，新增檔案，選擇白色背景的主題。

2. 點選右上角的「文件」，然後在右側的「文件」標籤頁中，找到「幻燈片大小」，選擇「自訂幻燈片大小」。由於是製作頭像logo，尺寸不必太大，這裡選擇500x500正方形。

3. 先去除頁面上原本的文字框和圖片框（我習慣自己新增XD）。在頂部清單「插入」中，選擇新增「文字框」，然後在頁面的文字框中輸入你要的文字。透過右側的「文字」標籤頁，選擇字體、字型大小、文字顏色等。

這裡示範的是用三個文字框放三個字母，然後排列出我想要的樣子。你也可以選擇加入圓形、方形等元素，使設計更豐富（在頂部清單「插入」，選擇「形狀」）。

4. 這裡示範，為文字設置陰影效果。在右側「樣式」標籤頁，找到「陰影」，調試你想要的陰影效果。

5. 圖案設計好之後，記得先存檔（存為keynote格式）。接著再來儲存透明背景圖片：點一下頁面中的白色背景，此時右側會出現「幻燈片佈局」的標籤頁。標籤頁中有「背景」，選擇「不填充」，此時幻燈片頁面的背景會變成黑色。

6. 在頂部清單「檔案」中，點選「輸出至」「影像」，然後選擇「PNG」格式，並且「輸出透明背景」的地方要勾選。按下一步，完成儲存。

7. 找到PNG檔案儲存的位置，打開來看（Mac電腦會用「預覽程式」打開），圖像完成了！如果想要修改，可以回到原本的Keynote檔案進行編輯，然後再重新儲存為PNG檔案就行了。

是不是還挺簡單的？現在就打開Keynote，為自己製作一個專屬的logo圖像吧！