image

 

今天來說一下梅花問路的這塊區域怎麼用出來的~

 

 

1075865138180_9218.gif

此處標示紅字的語法,要定位或是更改這些語法在自己樣式裡面的位置,進到自己的CSS路徑是

右上角點自己的頭像image我的部落格後台樣式管理部落格CSS原始碼

搜尋語法的話可以按Ctrl+F搜尋即可~ 

如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置

【梅花的CSS學習】用「開發人員工具」檢視區塊語法的名稱

1075865138180_9218.gif

 

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg *開發人員工具*


部落格整體 #body 箭頭粉.jpeg *換背景底圖*箭頭-15.png*換字體*箭頭-15.png*換部落格ICON*箭頭-15.png*設計LOGO* 


封面橫幅#banner/#header 箭頭粉.jpeg *換封面底圖*箭頭-15.png*部落格標題敘述大小位置*


文章區塊 #content 箭頭粉.jpeg *改文章標題字體、背景*


公告版面 #spotlight 箭頭粉.jpeg *公告版面應用*


側欄區塊 #links 箭頭粉.jpeg *改側欄標題的背景*箭頭-15.png*Facebook粉專外掛image箭頭-15.png*音樂外掛image箭頭-15.png*YouTube外掛image箭頭-15.png*分享連結階層*


實用推薦 箭頭粉.jpeg *看所有語法筆記文章*箭頭-15.png0074.gif梅花的語法筆記本0074.gif箭頭-15.png*看梅花的CSS標籤筆記*箭頭-15.png*文章內的目錄(錨點)image箭頭-15.png*關閉遮蓋版面的廣告*箭頭-15.png*隱藏上方藍色選單*箭頭-15.png*連結Google相簿*箭頭-15.png*圖片瘦身不失真*箭頭-15.png*讓部落格可以被Google*箭頭-15.png*Google Analytics分析*
箭頭-15.png精美分隔線圖片大全箭頭-15.png語法DIY美美的標題分隔線

 

 

痞客幫新手入門

痞客邦新手入門⑴|新手基礎入門設定 開啟部落格 設定作者名稱 痞客邦新手入門⑹|如何自訂個性化ICON圖標
痞客邦新手入門⑵|如何編輯側欄推薦連結區 痞客邦新手入門⑺|用語法外掛來撥放音樂
痞客邦新手入門⑶|宣傳Facebook粉專、浮動FB粉專外掛​​​ 痞客邦新手入門⑻|移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷|利用公告版位製造多樣性 痞客邦新手入門⑼|如何自己設定文章顯示的縮圖
痞客邦新手入門⑸|修改版面的字體字型 痞客邦新手入門⑽|如何在痞客邦發表文章

 

首先一樣在部落格裡面,看向畫面的右上角,點擊你的頭像那個圓圓的東東image

進到「我的部落格後台image

在內容欄的「公告版位」的地方把它點開image

 

image

公告欄位的標題不能夠用語法,但是內容就可以放置語法囉!

 

如果你想要放的是youtube影片,就在你的youtube影片頁面按下"分享""嵌入"

image

 

把這裡提供給你的撥放器語法貼到公告版位的內容裡面就好囉! (就是我前面說放撥放器語法的地方)

 

(如果想要將YOUTUBE外掛放在側欄或是文章裡,請參照【梅花的CSS學習】如何放YouTube撥放器外掛)

 

我貼了之後變成這樣,旁邊空白一大塊!!!

image

所以我就在我的撥放器語法前面加上一行 <p style="text-align: center;"> 把這個撥放器置中,這樣就可以囉!

 

 

如果想要讓公告版位的標題也可以一起置中,那就要在語法裡面,在 #spotlight h5 裡面

加入這一段置中語法 text-align: center;

就可以把標題也一併置中囉!

 

如果你想要在公告版位裡面放更多東西,可以這麼做

在"發表文章"的頁面,把你想要放的圖片、內文、字體、大小都先調整好

然後看選單的地方,按一下image按鈕

如果你找不到的話........在這裡!

image

然後你如果想放影片還是音樂什麼的,就一樣把你的撥放器語法貼上來

之後就把這全部的語法全選複製起來(快速鍵 Ctrl+A、Ctrl+C)

 

然後在公告版位的內容裡面貼上(快速鍵Ctrl+V),接著按"送出",就可以囉!

 

如果你想要在讓公告版位的底部背景也可以放上自己喜歡的圖片

請在右上角按你自己的頭像imageimage樣式管理部落格CSS原始碼

然後請按你的鍵盤Ctrl+F搜尋"spotlight-text"

在他的語法底下加入一行語法background:url(你的圖片網址);

 

你的圖片網址需要你自己上傳圖片到你自己的相簿

 

找好喜歡的圖存到相簿之後,按底下的imageimage

複製出來的東西通常長這樣1591317611-1995515212.png

1591317874-797864667.png

我們把紅框處標示的這種.jpg、.png、.gif之類結尾的圖片位址檔複製出來取代你的圖片網址這幾個字

background:url(你的圖片網址);

 

如果你的圖明明很高畫質、很高清,但語法用出來結果顯示就是不夠大!

先檢查看看你的圖片網址在.jpg、.png、.gif前面有沒有"_I"、"_1"、"_n"之類的字串,請把它移除

 

上傳到相簿的照片可能會有這些結尾,分別代表的意思如下(參考出處: 圖片大小迷思)

大 1024 _I
中600 _n
小450 _m
大縮圖 170*170 _q
中縮圖 120*120 _s
小縮圖 90*90 _t

 

 

 

 

 

 

如果妳移除了這些壓縮你圖片畫質、大小的結尾,還是圖片不夠大

你還可以嘗試再加入一行語法 background-size:cover;  讓它變成全版的圖片!!

 

 

arrow
arrow

    梅梅 發表在 痞客邦 留言(5) 人氣()