部落格新手免學CSS、修改痞客邦頁尾描述、打造自己的廣告牆

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

痞客邦頁尾描述的煩惱

版面的最上方、雞肋版位，卻不知道要如何運用？

有誰沒事會拉到版面的最下緣？真的拉到最下緣又能怎樣留住受眾群？

【部落格經營】Day19 部落格新手免學CSS｜修改痞客邦個人資訊｜八個簡單操作隨意修改

【部落格經營】Day20 部落格新手免學CSS｜修改痞客邦公告版位｜文章分類再進化

有過這兩次免學CSS的修改經驗，有辦法也運用在頁尾描述嗎？

痞客邦頁尾描述的初期想法：

1.由於頁尾描述的位置，樣式設計位在版頁的最下方，在沒有使用的情況下，會有一列固定的連結在版頁最下方，是痞客邦的版權宣告。

2.頁尾描述上方，有一堆痞客邦內建的版位。您可能喜歡這些文章、廣告位置、創作者介紹.......。
由於【您可能喜歡這些文章】佔據了太多空間，在過去的使用情況下，幾乎看到這邊就會關閉視窗。

3.痞客邦的固定的頁尾描述連結。
【回到頁首｜回到主文｜免費註冊｜客服中心｜痞客邦頁首】痞客邦版權宣告

頁尾描述的初期想法：在痞客邦版權宣告的上方，在【表格】的【儲存格】放置【圖片連結】。

免學CSS、修改痞客邦頁尾描述準備項目：

1.建立分類文章目錄連結檔案。
1-1：陳述此分類的目標。
1-2：插入表格、一欄一列、欄寬設定為780px。
1-3：儲存格顏色與公告欄位的表格顏色相同。

2.建立【文章分類】的【分類圖片封面】
依16:9的比例，建立320:180的圖片。

3.確認頁尾描述欄寬。
痞客邦新版樣式頁尾欄寬，經過電腦與平版測試後，沒有發生表格被欄寬切掉部分內容的問題。
表格欄寬可以從800px~1920px都能放置成功。
使用表格的原因：利用儲存格背景顏色創造出獨特空間。
如果單單使用文字超連結所佔的版頁太少，與內建的痞客邦版權宣告都很難被看見。

4..學習如何在文章中的圖片中插入連結網址。
再在次簡單說明一下如何插入連結網址。
4-1：文章中，先插入【圖片】。
4-2：開啟另一個視窗，讀取【部落格經營】這篇文章。複製上方的網址。譬如這是我的網址：https://dazhistraight.pixnet.net/blog/post/61702795
4-3：點選【圖片】、點選工具列上方的【連結】。類似迴紋針圖像那個。
4-4：將複製的網址貼到：通訊協定URL下方的空格內。

5.複習【部落格經營】Day19 部落格新手免學CSS｜修改痞客邦個人資訊｜八個簡單操作隨意修改
確保已學會如何【複製原始碼】到【側欄管理】的【新增欄位】。

正式編輯痞客邦【頁尾描述】內容：

以下步驟為頁尾描述創作時的範例，您可以學得精華後，之後再自行修改內容。

1.於痞客邦後台、【發表新文章】。儲存草稿。
2.點選【表格】。從【表格屬性】中建立所需的行列欄寬等必要內容。欄寬可以設定1320px。務必採用置中對齊。
3.於儲存格中插入【分類圖片封面】。建議表格採四欄、經測試後可放置四張【分類圖片封面】。
4.依序將【分類圖片封面】插入連結，連結檔案為事前編輯完成的【文章目錄】。
5.複製【原始碼】的CSS內容到【側欄管理】的【頁尾描述】。
整篇文章內容請小心不要鍵入不必要的內容，譬如沒必要用的空行。

延伸閱讀：

1.在編輯頁尾描述的文章中，務必設定為置中對齊。

2.儲存格顏色可以公告版位的表格顏色相同，營造首尾呼應的感覺。

3.目錄已稍微修正。儲存格內採用背景顏色，讓超連結的文章目錄溶入背景顏色當中，避免視覺疲勞發生。

暫時先這樣，如果您有其他建議，歡迎來信討論。