梅花的CSS筆記｜修改痞客邦的「創作者介紹」區塊/CSS語法修改/字體放大 @ 梅花問路

如果想要自己修改每篇文章裡面的創作者介紹區塊，語法上該如何去做呢?

我參考的課本reference是小無的這一篇

詳細的做法過程其實參考小無的網誌就寫的很清楚了~

只是要先清除一下痞客邦後台針對這個區塊的設定內容，就把小無有用亮綠色粗虛線框起來裡面的內容先複製貼上到自己的CSS語法裡面隨意一個地方，然後「儲存」一下，之後就可以自己開始來慢慢地修改囉！

以下是梅花之前的「創作者介紹」區塊的設定

/* --------------------創作者介紹區塊--------------------*/
.author-profile__name { font-size: 33px !important; line-height: 50px !important; }

/*-----創作者介紹這幾個字-----*/
.author-profile__header {margin: 0px 0px 0px 20px !important;padding: 0px 0px 0px 32px; font-size: 20px !important; font-weight: 700 !important; color: #245e80 !important; line-height: 30px !important;}

/*-----創作者介紹整個框框-----*/
.author-profile__main { margin: 10px 0px 0px 10px !important;background-color : transparent !important; box-shadow: 3px 3px 20px rgb(255, 177, 158,1); border-radius:7px !important; font-size: 20px !important;width: 700px !important; max-width: 700px !important;}

/*-----部落格名稱-----*/
.author-profile__info {padding: 0px 0px 0px 10px !important; font-size: 18px !important;}

/*-----你的照片-----*/
.author-profile__avatar { valign:center;}

梅花現在的創作者介紹區塊設定

現在我對這塊唯一的意見就是醜醜的背景色跟實在小的可憐的字體，所以我現在用的設定就只有改這兩個，語法相對來說簡單一些~

/*---創作者介紹區塊字體放大以及調整底色---*/
.author-profile__name, .author-profile__main, .author-profile__header, .author-profile__info {font-size: 20px !Important;}
.author-profile__main { background-color : rgb(255, 255, 255, 0.3) !Important;}

來看看BEFORE & AFTER

創作者介紹範例.png

幾個梅花有用到的屬性大概說明一下它們的用途

設定創作者介紹 CSS
font-size	調整字體的大小
font-weight	調整字體的粗度(數字越大越粗)
line-height	行距
margin	與邊界的距離，依序是上、右、下、左
padding	與上面類似，可以自行設定玩玩看產生的效果
background-color	設定背景顏色，設定transparent代表透明
box-shadow	設定框架的陰影(依序是X軸陰影、Y軸陰影、陰影模糊半徑、陰影顏色)
border-radius	設定邊框線的邊角是否有弧度
width	設定寬度
valign	指在垂直的方向置中，詳細的CSS設定說明請參照 CSS vertical-align 屬性可以更加清楚如何運用

梅花的語法筆記

檢視CSS標籤F12	文章區塊 #content
＊開發人員工具＊	＊改文章標題字體、背景＊
部落格整體 #body	＊改行距、邊界＊ ⛔
＊換背景底圖＊	公告版面 #spotlight
＊換字體＊	＊公告版面應用＊
＊換部落格ICON＊	實用推薦
＊設計LOGO＊	＊讓部落格可以被Google＊
封面橫幅#banner/#header	＊Google Analytics分析＊
＊換封面底圖＊	其他應用
＊部落格標題敘述大小位置＊	＊梅花的語法筆記本＊
側欄區塊 #links	＊文章內的目錄(錨點)＊
＊改側欄標題的背景＊	＊關閉遮蓋版面的廣告＊
＊Facebook粉專外掛＊	＊隱藏上方藍色選單＊
＊音樂外掛＊	＊連結Google相簿＊
＊YouTube外掛＊	＊圖片瘦身不失真＊
＊分享連結階層＊