部落格新手免學CSS、修改痞客邦個人資訊、想怎麼改就怎麼改

22-04-21、首波發行、大直直男

痞客邦側欄的煩惱

部落格新手、好友為0、可以不要顯示出來嗎？

Sorry，固定格式。

想要改嗎？去後台找CSS修改。

如果新手有辦法直接修改CSS，那應該就不能叫他是新手了。

免學CSS修改痞客邦個人資訊準備項目：

1.個人照片一張。
照片受限於側欄欄寬寬度。
痞客邦新版的側欄欄寬可以放入320*180像素的圖片。
目前使用的個人圖像是之前用Canva設計出來的，使用付費版功能修改尺寸大小為250*250。
選定照片後請上傳到痞客邦相簿內儲存。

2.自我介紹簡介文章一篇。
目前直接套用過去發文的內容。【部落格必備】關於我。

3.學習如何在文章中的照片與文字中插入連結網址。
簡單說明一下如何插入連結網址。
3-1：文章中，先編輯預連結的文字。譬如：【關於我】。
3-2：開啟另一個視窗，讀取【關於我】這篇文章。複製上方的網址。譬如這是我的網址：https://dazhistraight.pixnet.net/blog/post/60189046
3-3：使用滑鼠將預預連結的文字點選成反白。
3-4：點選工具列上方的【連結】。類似迴紋針圖像那個。
3-5：將複製的網址貼到：通訊協定URL下方的空格內。

如果要使用照片連結文章也可以。直接在文章中【插入圖片】，連點兩下圖片，再將複製的網址貼到URL的位置。

正式編輯痞客邦個人資訊內容：

以下步驟為封面圖片創作時的範例，您可以學得精華後，之後再自行修改內容。

1.於痞客邦後台、【發表新文章】。儲存草稿。
2.插入【個人照片】。【點選置中對齊】。於【照片中插入連結】，連結到【關於我】這篇自我介紹的網址。
3.換行後、自行鍵入文字：【關於：大直直男】。選定【大直直男】後加入連結到【關於我】這篇自我介紹的網址。
4.自行鍵入其他想表達的個人資訊：FB、IG、信箱......。

文字大小顏色可自行調整、選擇對齊方式等都可以自由設定。
整篇文章內容請小心不要鍵入不必要的內容，譬如沒必要用的空行。
接下來關鍵步驟請將文字敘述搭配下圖一同完成。

編輯欲呈現的個人資訊後：

5.點選工具列右方的【原始碼】。
6.複製【原始碼】的所有內容。
7.點選痞客邦後台、【側欄管理】、點選右方的【新增版位】，在內容的位置，【貼上剛剛複製所有的內容】。設定標題：【大直直男】。
8.將新增加版位【大直直男】，從【版位暫存區】拉到【側欄一】。

這樣您就可以從前台看到您之前所編輯的個人資訊。
請先確認您設定的連結是否成功。從圖片跟文字都可以連結到您的【關於我】這篇文章。
您所編輯的格式可能會與原本的側欄文字大小顏色有所不同，可在回原本儲存的草稿中修改，再重複步驟5~8。

延伸閱讀：

前四個步驟、發表新文章編輯內容時，請特別注意。編輯時沒有必要的Enter鍵別亂按，否則在前台顯示時會莫名空出一行空白出現。

新編輯的版位，內容自訂，可能會與原本版位的字型大小有所差異，可以的話請自行查詢原本版位的設定，但我相信新手應該沒有辦法從CSS去查詢。只能建議用最殘忍的方式，試誤法，從新增的內容來比較原本版位的設定。相對於修改CSS，目前這方式或許是對新手來說是比較容易的，只需要複製貼上CSS內容即可。

利用新增的版位也可以用類似此方式做出不同的變化，目前將過去三篇關於新手常面對的SEO問題，總結成SEO精華文章放置在一個版位內，直接可以從側欄點選看到，也算是另賴的精選文章吧，不知道大家覺得怎樣？有興趣的朋友請來信討論喔。