Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

▸ Facebook:Dribs & Drabs

▸ Facebook:Dribs & Drabs - Designs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

13

這篇主要想分享,當你甚麼都不懂的時候(CSS是甚麼東西??),該怎麼跨出修改部落格版面的第一步

當然不限定只有痞客邦,其他部落格也可以用相同的方法

其實自己也是自學而來的,CSS還尚未摸透,可能分享的也不是最好的方法,歡迎大家留言切磋切磋

 

 

痞客邦部落格模板架構

最一般初學者的狀況是: 想要改個標題顏色,可是CSS裡一堆標籤怎麼知道哪一個代表部落格標題呢?

除非是改部落格CSS已經改到都背起來了,要不就是靠標籤的名稱來玩猜猜樂

還好痞客邦非常的善解人意,釋出了部落格模版架構示意圖 -> Link

這張架構圖非常好用!! 把所有標籤的位置與功能都標示得清清楚楚 

像如果要修改部落格標題顏色,從圖中可以很明顯地看到是在 #banner 裡的 h1

可以直接在 後台 > 自訂樣式 > CSS原始碼編輯 裡搜尋 #banner ,再找到後面有接 h1的

是不是非常簡單!! 非痞客邦的朋友們,就請看下一步驟囉

 

這張圖是2007年釋出的,現在的板模已經跟以前的有點不太一樣,但大致上差不多

當然這張架構圖不可能繪出所有的標籤,如果要更細部的資訊就請看下一步

 

 

了解部落格標籤資訊

(1) 瀏覽器+F12

現一般的瀏覽器都附加此功能,Chrome、Firefox、IE11↑,以下步驟以Chrome示範

接著按F12,網頁下方會出現另一個視窗,如下圖,視窗裡就是部落格網頁的原始碼

10

 

(2) 找尋要修改的區域

現在假設想要修改部落格標題的顏色,首先按下方視窗的左上角的放大鏡符號

接著再移到網頁上,發現滑鼠經過的某些區域變成藍色背景

滑鼠點選部落格標題後,下方視窗會自動帶入該段程式碼的區域,如下圖

11

 

(3) 區塊標籤

讓我們來好好端詳這段原始碼

12

其實Chrome都幫我們把階層標籤標示出來了,找到部落格標題"Dribs & Drabs"

接著往它的前後尋找包住標題的標籤,第一個遇到的是 <a>...</a>

a 代表的是超連結,但因為 a 在多處都有使用,若直接定義 a 代表所有超連結都會被影響而非只有部落格標題

 

所以再往前找標籤,下一個看到的標籤是 <h1><a> ... </a></h1>

h1 是一個較特殊的標籤,在其他地方不會使用 (可以ctr+f 搜尋整個原始碼,看其他地方是否使用)

因此可以利用 h1 來定義部落格標題,例如 h1 a {color: #000000;}

 

但是,一般的區塊大部分是用div這標籤來定義,我們可以再往前看一下標籤

<div id="banner"><h1><a>...</a></h1></div>

一般div這標籤會使用 id="..." 或是 class="..." 來定義該標籤屬性

其實這兩個屬性用法可說是一樣,只是CSS表達寫法不同,可讓設計網頁更有彈性

如果是 <div id="banner"> ... </div> ,則在CSS裡要寫成 #banner{....}

如果是 <div class="banner"> ... </div> ,則在CSS裡要寫成 .banner{....}

當然也可能出現 <div id="A" class="B"> 的情況,這就要看經驗來選 id 或是 class 了

依照目前部落格的架構,CSS可寫成 #banner h1 a {color: #000000;}

順序要依照網頁架構的順序,不可顛倒,例如 div > h1 > a

步驟大致上就是這樣,修改其他的地方也是同樣的方法,是不是滿簡單的 ♥

 

 

Murmur

若只要修改部落格一些小地方的話,不懂CSS語法也沒關係

依循上述的規則很容易就可找到要修改語法的地方,且CSS屬性看名稱就很好猜

例如: width, height, color, background, font ....,都是直接英文翻譯的意思

不要一開始就被CSS程式碼嚇到了,其實並不是想像中的那麼難,反而很有趣呢!

看完教學就可以開始動手修改CSS囉,別忘了要備分一下原始的CSS檔,免得改壞了回不去了 XD

沒想到這篇也可以寫得落落長,希望有幫助到大家 :D

 

最近發現很多人利用這個功能直接複製別人的心血,這種行為很不可取!

研究如何達到某種效果後,請用自己理解後的思緒重新撰寫,勿複製一大段原始碼貼上再修改

謝謝大家的配合

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

文章標籤
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(58) 人氣()


留言列表 (58)

發表留言
  • miniegg
  • 推認真的CSS教學文!
  • ヽ(*´∀`)ノ゚

    Dribs & Drabs 於 2013/10/10 17:14 回覆

  • 悄悄話
  • 樂咖
  • wei 你好...
    不知者無罪...原來你是男士...希望你見諒~
  • 我是女生

    Dribs & Drabs 於 2013/12/27 13:30 回覆

  • 樂咖
  • wei 你好...
    呵...我被誤導了...對妳實感抱歉之至~
    而今...我已明白了...謝謝妳據實以告~
  • 不會 :D

    Dribs & Drabs 於 2013/12/27 23:03 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Yoona
  • 謝謝分享 ^_^
  • 不客氣 :D

    Dribs & Drabs 於 2014/06/16 08:13 回覆

  • 悄悄話
  • 悄悄話
  • Joansy
  • 感謝您!
  • 不客氣 :D

    Dribs & Drabs 於 2014/09/13 18:47 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 伊娃媽咪
  • 請問想像您的版面一樣,有左右兩邊上下篇按鈕這個,有教學嗎^^
  • 那個是痞客邦的APP,到應用市集安裝就有了

    Dribs & Drabs 於 2014/09/30 06:41 回覆

  • 部落格幼幼班第三天
  • 我很喜歡這個部落格清爽明確的設計
    更佩服您css 的技能是自學的!
    想請問頂部文章的欄位設計和右側的"關於我&這裡"
    是只單用css做到的嗎?
    還是需要搭配其他那些技能?
    謝謝
  • 謝謝你喜歡我的設計 >/////<
    頂部文章欄位是純CSS,關於我&這裡除了CSS外還有一點基本的HTML語法

    Dribs & Drabs 於 2014/10/08 17:11 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Dr.ZOOM
  • 在網路上找喜歡的piznet樣式逛到這,大大做的都好有質感,超佩服~
    還分享這麼實用的教學Q_Q 謝謝!
  • 謝謝你的支持 :D

    Dribs & Drabs 於 2015/02/08 13:16 回覆

  • Boon Chong
  • 请问如何设定发表的文章不自动显示在内容栏里?而是只有按了側欄的连接才会显示.
    谢谢!
  • 你可以將每頁顯示文章數量改成1,發表一篇文章設成置頂
    這樣之後發表新的文章都不會在首頁出現了,首頁只會出現置頂的那篇

    Dribs & Drabs 於 2015/05/07 20:07 回覆

  • Boon Chong
  • 不意思, 要怎么设定一篇文章成置頂?
  • 在發表文章時,底下有地方可以選該篇文章要文章不要置頂

    Dribs & Drabs 於 2015/05/08 12:48 回覆

  • 緒醬、
  • 想問個問題,因為有點不太懂css和html在痞克裡面的差別…

    如果是【 <div id="banner"> ... </div> 】,則在CSS裡要寫成 《#banner{....}》
    如果是 【<div class="banner"> ... </div> 】,則在CSS裡要寫成 《.banner{....}》
    所以【】括弧裡的是html語法,而《》括弧裡的是css語法,可以這樣理解嗎?

    (ps:加括弧是為了比較好溝通,不然我不知道我要怎麼問><)
  • 嗨你好,是喔,你的理解沒錯!!
    在痞客裡面,HTML是痞客制定好的架構,不能改
    所以才用CSS來修改這個架構的外觀

    Dribs & Drabs 於 2015/05/10 22:46 回覆

  • 悄悄話
  • 悄悄話
  • gracefg123
  • 您好,謝謝您的分享!我有一個問題想請教,痞客邦本身如果套用好裡面有的樣式,再按自訂樣式的時候,一旦放上最上面的圖片,相簿、留言、部落格那些本來在上面可以按的連結就看不見了怎麼辦才好呢?謝謝您^_^
    另外,這是我的部落格,也歡迎您來逛逛唷!謝謝
    http://gracefg123.pixnet.net/blog
  • 你是說套用語法後,再使用自訂樣式的簡易版跟進階版嗎?如果是的話,不建議這麼做,使用的話會讓語法整個亂掉而影響到版面!

    Dribs & Drabs 於 2015/07/31 11:45 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Darwin的AI天地
  • 謝謝您的清楚教學XD
    找這個文章找很久呢∼
    最近要用Markdown寫文章
    搞得我人仰馬翻的
    原來了Div的功用是這樣用的啊^.^
  • 不客氣,很高興有幫到你 :)

    Dribs & Drabs 於 2017/01/26 09:29 回覆

  • 悄悄話
  • Linda
  • 看完覺得您的分享很棒,而且很喜歡妳的介面視覺
    最近才剛開始接觸自己建立部落格,
    想請問您右手邊Facebook的書籤也是Pixnet的內建版型嗎?
    還是您自己做的呢?
    謝謝
  • 謝謝你的稱讚 :)
    右側FB的安裝教學在這裡喔
    http://weilife.pixnet.net/blog/post/448245722

    Dribs & Drabs 於 2017/03/21 16:59 回覆

  • Elinor
  • 您好,很久沒碰部落格忘記之前怎麼修改語法
    恰巧連結到您這篇文章
    教學很清楚實用
    非常感謝您的分享:)
  • 不客氣,謝謝你特地留言 :)

    Dribs & Drabs 於 2017/06/03 17:13 回覆

  • 紫色幸福
  • 謝謝你用心分享的設計!
    搜尋好久總算找到了,詳盡的解說,設計也好有質感喔^^
  • 謝謝你喜歡 :)

    Dribs & Drabs 於 2017/07/12 16:26 回覆

找更多相關文章與討論