如何於pixnet自訂樣式

一般而言,pixnet的預設樣式總是無法滿足每一個部落客的需求,因此pixnet也提供自訂樣式的功能,一般分成三大層級,分別為:自訂樣式簡易版、自訂樣式進階版、CSS原始碼編輯。茲敘述如下。

1 自訂樣式簡易版

這是最單純的直接套用別人所設計好的樣式的模式。可直接進入部落格的後台管理,點按「樣式管理/自訂樣式/自訂樣式簡易版」,然後點選自己想要套用的樣式即可。在儲存前,可點按「預覽」來看看該樣式的結果是否喜歡,若可以接受,再點按儲存。

2自訂樣式進階版

此一模式是針對目前已套用的樣式版面來進行設定,所以若想要完全改掉先前的樣式,則必須要先於「自訂樣式簡易版」中先套用一個新的樣式,這樣才比較可以省下不少的工作,亦即借用別人已設計好的樣式來更改比較快。在點按「樣式管理/自訂樣式/自訂樣式進階版」後,就會出現4大區塊的設定,分別是:整個部落格(body)、部落格最上面(#header)、側欄(#links)、文章區塊設定(#content)等區塊。此時就可以針對網頁的各區塊的樣式,來各自設定其所屬的背景圖片、背景顏色、文字大小、文字顏色等。

3 CSS原始碼編輯

上述前兩種模式,皆只能按照畫面上所出現的欄位參數來進行設定,若想要更改更細節的內容,就必須點按「樣式管理/自訂樣式/CSS原始碼編輯」。此一模式會列出所有CSS的原始碼內容,使用者就可以進行任意的設定。當然,要去更改CSS原始碼的內容,就必須瞭解CSS的語法與設計技巧。「CSS網路教學(1keydata)」、「Web開發用語詞典」、「Mozilla CSS Support Chart-Firefox Gecko Engine Support」這些是屬於CSS網路教學的文章,可供讀者進行學習與參考。

4 如何改變部落格的logo圖片

一般而言,別人所設計的樣式都會有所屬的log圖片,顯然並不是自己所想要的圖片。此時要更改一個部落格的圖片,就必須進入到「CSS原始碼編輯」的模式中,直接找到 #banner {height:300px;background:url(http://pic.pimg.tw/pixnetvisual/1bb2657959aa84754e158aa048c49a1a.jpg);} 那一行,其中background:url(...)那一行就是顯示在畫面上部落格的logo圖片,因此只要更改url(...)中的圖片網址就可以了。

既然是要輸入一個新的圖片網址,那麼就必須要先上傳圖片至pixnet,或是上傳至自己可以被外界存取的網頁空間中。以pixnet為例,上傳檔案後,可以去瀏覽該圖片,並右點按該圖片後,複製該圖片的網址,然後再將該圖片網址填入url(...)的參數中即可。

當一開始進入相簿再點按一本相簿後,會出現一系列相片的縮圖,這些縮圖並不是真正的圖片,所以右點按該縮圖去複製圖片的網址是沒有意義的。此時要直接點按該某一張圖片,進入該圖片的處理畫面,並右點按該圖片,再點選「複製語法」以出現一個小視窗,其中就會出現該html的語法欄位,此時再點按「複製」,然後開起任何一個文字編輯器,例如,記事本,並點按「編輯/貼上」,就會出現類似如下的html指令語法:<a href="http://abc.pixnet.net/album/photo/87377642-000-01-google-search-eclipse.jpg"><img src="https://pic.pimg.tw/abc/1373957686-3240387014_n.jpg"></a>
而<img src="http://...">中,src的參數所出現的網址才是該圖片的真實絕對網址,此時將該真實圖片的網址複製起來,回到「CSS原始碼編輯模式」中,將該圖片網址填入url(...)的參數中即可。

5 如何改變與自訂導引列 (Navigation Line)

Pixnet預設的導引列 (Navigation Line) 是中文的:相簿、部落格、留言版、名片,點選後可以分別進入該部落格的相簿區、部落格文章區、留言版集中查看區、與個人名片資料區。然而,若是套用別人的自訂樣式後,往往該導引列的標題並不是中文字,往往是英文字顯示的導引列:Album, Blog, Guestbook, Profile。此時,就有可能想恢復成顯示中文的導引列,或是自訂以文章類別所形成的導引列,並將該導引列在畫面不同的地方來顯示。其基本作法原則如下:

(1) 進入側邊欄位設定,新增的一個全新的側邊欄,並設定側邊欄的標題名稱,例如,「導引列」,然後在內容欄位中輸入以下的指令:

<a href="http://ianshow99.pixnet.net/album">相簿</a>&nbsp
<a href="http://ianshow99.pixnet.net/blog">部落格</a>&nbsp
<a href="http://ianshow99.pixnet.net/guestbook">留言版</a>&nbsp
<a href="http://www.pixnet.net/blog/profile/ianshow99">名片</a>&nbsp

 然後將該新增的側邊欄拖曳至「側邊欄1」區塊,或是「側邊欄2」區塊,然後點按儲存。


(2) 進入部落格瀏覽網頁的畫面,然後去顯示網頁的原始碼,在Firefox可點按選單「工具/網頁開發者/頁面原始碼」,在Chrome可點按選單「工具/檢視原始碼」來查看頁面原始碼的內容。


(3) 在頁面原始碼的視窗中,點按「編輯/尋找」,並於搜尋欄位中輸入所新增側邊欄的名稱:「導引列」,所找到的畫面可能類似如下:

 <div class="hslice box folder" id="box1114699">
    <h4 class="box-title entry-title">
    導引列        </h4>
    <div class="box-text entry-content">

<a href="http://ianshow99.pixnet.net/album">相簿</a>&nbsp
<a href="http://ianshow99.pixnet.net/blog">部落格</a>&nbsp
<a href="http://ianshow99.pixnet.net/guestbook">留言版</a>&nbsp
<a href="http://www.pixnet.net/blog/profile/ianshow99">名片</a>&nbsp    </div>
</div> <!-- #box1114699 //-->

 在「導引列」中文字的上方可以發現有一段指令為<div class="hslice box folder" id="box1114699">,其中,<div>代表的是一個新的顯示區塊,而 id="box1114699"代表的就是該新增側邊欄的ID型式的CSS選擇器(Selector),也就是說,該側邊欄的CSS格式設定,可以在CSS原始碼中,新建立一個#box1114699的區段與其他的延伸區段來設點CSS的顯示格式。

(4) 進入pixnet後台管理,點按「樣式管理/自訂樣式/CSS原始碼編輯」出現CSS原始碼的內容後,一般系統並不會自動產生該側邊欄的CSS指令的設定,亦即找不到以#box1114699開頭的區段,所以使用者必須自行於CSS原始碼檔的最後面直接新增如下的指令即可:

#box1114699 {
/*側邊欄-導引列*/
position:absolute;
top:90px;
left:30px;
}
#box1114699 .box-title{display:none;}
#box1114699 .box-text{padding:0; margin:0; }

 其中,postion:absolute; top:90px; left:30px; 代表以絕對位置的方式於距上方90px,距左側30px的地方來顯示該側邊欄。而#box1114699 .box-title{display:none;}是指不要顯示該側邊欄的標題名稱。而#box1114699 .box-text{padding:0; margin:0; } 是指該側邊欄內容區塊與文字的內距為0px, 以及區塊與外部的邊距設為0px。當然此時可以去多加設定顯示的字型與顏色等其他的各種顯示格式了。

因為使用者目前已經自定一個新的導引列了,所以預設的系統導引列就不必要顯示了,此時可以在CSS原始碼中,找到#navigation {position:absolute;並直接在括號號新增一行display:none; 變成 #navigation {display:none;position:absolute;如此就可以讓系統預設的導引列不再顯示了。

如此儲存後,以中文顯示的導引列,就會在畫面上的左上角位置出現(這是因為設定了CSS原始碼指令的結果),並可以點選導引列上的中文字以出現相簿、部落格、留言版、名片的祖窗(這是因為在新增的側邊欄中的內容中所設定的html指令的結果)。

6 以文章類別方式或是建立flash的logo圖片的方式

若使用者想以文章分類的方式來建立自己的導引列,就是可以採用此上一節所述,透過新增一個側邊欄與設定該側邊欄的CSS 顯示格式的方式進行。

若使用者想該部落格的logo變成去顯示一個flas的swf檔案的內容,則仍舊可以透過新增一個側邊欄,並在側邊欄的內容中加上類似如下的html指令,例如,對於Firefox與Chrome瀏覽器,可直接寫入<embed src="helloworld.swf">指令,其中src的欄位值所填入的就是該flash檔案的真實位址,若是對於IE瀏覽器,則就要使用如下的指令了:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle">
    <param name="movie" value="movie_name.swf"/>
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400">
        <param name="movie" value="movie_name.swf"/>
    <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
        </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

 

 

文章標籤
創作者介紹
創作者 xx3d2ybnf 的頭像
xx3d2ybnf

xx3d2ybnf-不圖3日但2年精進勇者不懼的部落格

xx3d2ybnf 發表在 痞客邦 留言(0) 人氣()