傅不死 FullHouse » 原創

WordPress滴打滴【被打版】

娜娜子 — Thu, 07 Oct 2010 12:58:18 +0000

所謂滴打滴，其實沒有任何實質意思只是我隨便叫好玩的。你可以當它是網站公告版、佈告欄、網站筆記本那類的隨便。

這個小東西的誕生起因於一開始用來作網站新聞的推爺已經默默的被我當作聊天版了。然後某天不小心點到自己的TwitterFeed就是超嗨的整個都是聊天記錄‧‧‧

完全沒有任何佈告欄的意思啊根本就！

對於那種沒有交集但是只是想知道網站重要新聞的推爺訂閱者來說，這樣的情況應該會非常苦惱吧(每天面對著一大片和自己毫無關聯的聊天紀錄誰高興得起來啊~？)

所以所以就寫了這個小小的滴打滴(WebChatter)，原本是打算讓它獨立運作的(畢竟我並不覺得自己會用一輩子的Wordpress)，但是因為懶得寫管理畫面又所以所以只好收進WP後台。

人家歪國人寫甚麼東西都喜歡加一個beta版，但是我這個實在太陽春+寫得又好亂所以就是被打版。

主要機能如下：

新增(廢話)/刪除(批次)/修改(二次編集)/簡單RssFeed 2.0支援/AJAX分頁/初始化(刪除資料表)/時區&時間格式編輯/wp short code支援。

預覽畫面如下：

也可以參考我的首頁側欄和BIO頁面的實際使用情況

使用方式如下：

1. 下載後在chatter裡打開config.php依照需求編集
2. 打開主題目錄下的functions.php(沒有這個檔案的自己開一個)新增

1	require_once(TEMPLATEPATH . '/chatter/chatter_admin.php');

3. 將整個chatter資料夾上傳至目前正使用的主題目錄下(目錄結構為：你的主題資料夾/chatter/)。
4. 進後台會就看見【佈告欄管理】的選項，新增第一篇公告後程式將自動在資料庫(config.php裡設定的那個)裡建立新的資料表和欄位。
5. 調用時支援可依照情況選擇php code或者short code

PhpCode

1	kana_chatter ?>

ShortCode

1	[kana_chatter]

6. HTML結構如下，請自行按照需求編寫CSS。

<div id="blogchatter">
    <div class="Na_show_chatter">
        <div class="Na_chatter_time">時間</div>
        <div class="Na_chatter_txt">內容</div>
    </div>
    <ul class="Na_chatternav ">
        <li class="Na_chatternav_ft"><a title="" href="#">最前頁</a></li>
        <li class="Na_chatternav_pv"><a title="" href="#">前頁</a></li>
        <li class="Na_chatternav_nav"><a title="" href="#">頁碼1</a></li>
        <li class="Na_chatternav_nav"><a title="" href="#">頁碼2</a></li>
        <li class="Na_chatternav_nt"><a title="" href="#">後頁</a></li>
        <li class="Na_chatternav_lt"><a title="" href="#">最後頁</a></li>
    </ul>
    <div style="clear: both; height: 10px;"></div>
</div>

因為太想抽菸導致完全無法專心思考，所以我決定用直接把檔案打出來來代替code解說。有興趣的人可以自己拆一下原檔，我寫得時候都有標上中文註釋，應該不難理解才是。
Note: There is a file embedded within this post, please visit this post to download the file. Note: There is a file embedded within this post, please visit this post to download the file.
再來再來，我不是吃php長大的程序員，所以如果有前輩出現也請勿用力拍打，寫好玩而已的。

最後最後，嚴禁任何情況下的商業使用。

以上，歡迎報告使用心得。

-- THE END --

WordPress Theme│Zero-PIC 之你問我答

娜娜子 — Mon, 09 Aug 2010 13:51:11 +0000

2011/02/04 Update

加入：Related Posts By Category、AJAX Comments(willin)、Unlimited Level Nested Comments、SweetTitle、Imageresize、Index Page Style Select、Archives(SideBar) Toggle
更新：Tagcloud function寫法，Recent Comments 寫法，Blogrool 加favicon
註：更新後請依照functions.php裡註解做改動即可。

FILE DOWNLOAD(檔案下載)

檔案下載(tar/zip)：

Note: There is a file embedded within this post, please visit this post to download the file.

-2011/02/04 END

在雜事爆多的星期一把這幾部影片拍完我覺得我真是太勇敢也太酷酷!!

TO 三問的MiiA小姐和Gravatar很繽紛的Bryan先生還有很害羞的傳了4封聯絡表單給我的coli同學，感謝你們喜歡zero-pic(鞠躬)。不過呢...這裡要提醒下coli桑...下次傳一封就好了...太多反而會被系統丟到垃圾信夾的- -+

以上!!

大家一起熱血的跟著WP噴跑吧!!!!!!!!!!go~

你問我答開始 :

Q : 圖片頁面(Portfolio Page)出不來？？ (@MiiA)

A : 請照著下面的方法操作一次囉~(字看不清楚請點播放器上的切換全螢幕按鈕)

Q : 首頁可以換成圖片展示頁面(Portfolio Page)嗎？ (@MiiA)

A:
1-1 請下載page_portfolio.zip這個壓縮檔
1-2 將壓縮檔內的page_portfolio.php上傳到zero-pic的theme dir裡
1-3 在後台新增一個page，模板的下拉選單裡選Portfolio Page
1-4 打上你的page title (內文部分請留空)
1-5 到設定>閱讀>首頁顯示>首頁，旁邊的下拉選單找到你剛才打得page title後儲存設定

done~!!

Q : 圖片可不可以改成自動適應文字區的寬度呢？ (@MiiA)

A:
打開style.css查找

1	.post_content img.alignleft,.post_content img.alignnone,.post_content img.alignright,.post_content img.aligncenter

往下找在margin-top:5px;的後面}的前面加入↓

max-width:300px;
width:300px;
width:expression(document.body.clientWidth>;300?";300px";:";auto";);
overflow:hidden;

@ : 注意 - 此段code不符合W3C!! 瀏覽器部分是ie6up、ff、Opera、Safari、Chrome兼容。
如果很介意W3C的捧油，請下載img-resize.zip這個壓縮檔，將裡面的JS上傳到zero-pic的theme dir後，打開single.php將下面的code加入〈?php wp_head(); ?〉的前方。

Q : Gravatar的頭像可不可以改的小一點啊??? (@Bryan)

A :
請打開functions.php這個檔案，查找下面這段code

1	echo get_avatar($comment,$size='50'); ?>

50的地方就是Gravatar的頭像大小囉...(px)

ok 先這樣... 我去寫企畫了掰掰有事請用力留言吧~逼逼逼!!

2010/08/21 update!↓

Q : 要怎樣才可以把預設的portfolio選單拿掉呢？

請打開header.php這個檔案，查找下面這段code

1	<li><a title="RSS" href="/?tag=portfolio">Portfolio</a></li>

然後拿掉它就OK囉

另外 : 感謝提出指正的字體在簡體網站中顯示問題(過小and粗體無能)的奈維摩爾以及mind，已將更新版重新上傳，有需要的人請重新下載就可以囉~

用CSS減少美化網站的圖片數量

娜娜子 — Thu, 05 Aug 2010 14:20:52 +0000

@ : 常常我們寫一個頁面或者theme時，除去主要背景外，東一個按鈕西一個圖片的零零總總的加下來十幾張圖片總是跑不掉。這樣子不但會造成之後修改頁面時圖片要找很久很混亂，還有就是網頁讀取時拖速的問題。so，接下來要寫得主要就是將那些網頁裡用到的圖片全部集中在一起的方法。

1. 首先想好頁面的排列架構，然後在FW裡大概的擺一下位置。

@ : 如上圖，展示站台和KANAFU.COM分別是兩個鏈結，我希望它在點擊時會有顏色的變換，而LINK1、2、3則是一個小型導航選單，最下方則是一個單純的圖片展示(當然你也可以將它變換成鏈結)。

2. 接下來打開FW來把剛才的圖片拖進來，做好選單的顏色調整後存成一張圖片(FW先別關，之後會用到)

@ : 這一步的關鍵點在於圖層在圖片裡的排列，空白的部分(也就是不會被始用到的區塊)越少，做出來的圖片也越小，載入網站的速度相對就越快。然後上面因為是示範所以我就隨便排一下。

3. 再來就是用網頁編輯器新增一個html和一個css(如果是DW、frontpage這種可視化的請先切換到code編輯模式)，我這裡用的是EmEditor，你也可以選擇你習慣的UltraEdit、PSPad、EditPad...叭啦叭啦什麼鬼的都無所謂，高興就好，如果都沒有的話就直接開記事本也OK。

HTML的部分↓


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
	<link rel="stylesheet" type="text/css" href="./style.css"> 
	<title>用CSS減少美化網站的圖片數量</title>
</head>
 
<body>
	<div id="container">
	</div>
</body>
</html>

CSS的部分↓

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
	background:#ccc;   
}

@ : 寫好會變成這樣↓
@ : 上面的code是我替頁面寫的一些基本的樣式，這部份請自由發揮 ─ ─ ─
@ : #container這個DIV就是等等用來裝主要內容的容器，為了方便預覽CSS先加上背景屬性。

4. 把鏈結、選單都加到#container裡，然後再新增一個ID為pic的div等等來擺圖片用。

<div id="container">
	<a href="#" title="展示站台" id="link_a">展示站台</a>
	<a href="#" title="KanaFu.com" id="link_b">KanaFu.com</a>
	<div id="menu">
		<a href="#" title="Link1" id="link_1">選單一</a>
		<a href="#" title="Link2" id="link_2">選單二</a>
		<a href="#" title="Link3" id="link_3">選單三</a>
	</div>
	<div id="pic"></div>
</div>

@ : 寫好會變成這樣↓

5. 回到FW裡已經存好的圖片，開始準備寫第一個"展示站台"的鏈結。

@ : 如上圖，點一下需要的圖層，左下方的屬性就會顯示出它的大小和位置。

6. 切換到CSS部分，開始製作第一個"展示站台"的鏈結。

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}

@ : 稍微說一下上面的code : width和height分別是剛才在FW裡查到的長寬，而background最後的-3px以及-236px就是查到的位置(x,y)，前三行加起來就是在宣告 : 我們只需要index.png這張圖片從座標3,236開始，大小是218x57的區塊，至於display:block;屬性則是用來讓本身不帶區塊等級的鏈結得以設置長寬，而最後兩行則是把鏈結文字隱藏起來。
@ : 寫好以後就是這樣。↓

7. 接下來就是寫當滑鼠晃過鏈結時(a:hover)的樣式。

53
54
55

#link_a:hover{
	background:url(./index.png) -309px -233px;
}

@ : 回到FW裡again，這次點要用來做hover的圖層，一樣會顯示出長寬和位置。
@ : 在CSS裡宣告a:hover時展示的圖片位置。

@ : 如上圖，這樣第一個鏈結就完成了，然後用同樣的思路寫第二個鏈結。

#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}

8. 接下來是選單的部分，在第四步裡我們已經在html裡寫進了一個內含三個鏈結的DIV。

@ : 先用前面的方法將DIV的背景抓出來，以及分別將三個選單的鏈結換作圖片。

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}

@ : 寫好以後就是這樣。↓

9. 再來就是幫三個排排排站的鏈結乖乖躺下來。

@ : 首先在FW裡將圖片裡的選單區塊複製出來成一個新檔案，然後一樣在屬性裡查找link1、2、3的座標位置。這裡要新開檔案的原因是因為我們要找的是link1、2、3以選單區塊的左上角為基準點的座標。
@ : 然後在CSS增加position屬性做定位。

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}

@ : 寫好以後就是這樣。↓
@ : 然後順便用老方法把圖片的部分一起寫進去。

#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
}

@ : 變成這樣↑

10. 用position屬性將元素的位置調整成想要的樣子。

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:57px;
	left:29px;
}
#link_a:hover{
	background:url(./index.png) -309px -233px;
}
#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}
#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
	position:absolute;
	top:125px;
	left:32px;
}

@ : 分別在#link_a、#link_b、#menu、#pic裡加上position:absolute;，然後用top跟left將它們調整到合適的位置。然後步驟三裡我們已經在#container的DIV裡加上了position: relative;，所以現在的基準點(0,0)就是從#container的左上角計算起。

@ : 調完之後把body裡的背景色一起改下↓

噢噢...看起來和一開始在FW裡排得似乎還挺像的耶(廢話!阿不然排它是要幹嘛的...)
測試OK後就回到CSS將落落長的code稍微整理一下吧，能併的就併一併，讓載入的CSS稍微小一點也整齊一點。
@ : 精簡過後的CSS(好啦其實也沒有短到哪裡去...)↓

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
}
#link_a,#link_b,#menu,#link_1,#link_2,#link_3,#pic{
	background:url(./index.png);
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
}
#link_a{
	background-position:-3px -236px;
	width:218px;
	height:57px;
	top:57px;
	left:29px;
}
#link_a:hover{
	background-position:-309px -233px;
}
#link_b{
	background-position:-221px -271px;
	width:85px;
	height:17px;
	top:93px;
	left:251px;
}
#link_b:hover{
	background-position:-527px -268px;
}
#menu{
	background-position:-11px -157px;
	width:121px;
	height:25px;
	left:248px;
	top:59px;
}
#link_1{
	background-position:-21px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:12px;
}
#link_1:hover{
	background-position:-21px -197px;
}
#link_2{
	background-position:-54px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:45px;
}
#link_2:hover{
	background-position:-54px -197px;
}
#link_3{
	background-position:-87px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:78px;
}
#link_3:hover{
	background-position:-87px -197px;
}
#pic{
	background-position:-157px -44px;
	width:340px;
	height:167px;
	top:125px;
	left:32px;
}

最後的最後不免俗的...還是用了雙D兄弟(DEMO&DOWNLOAD)來做個ENDING囉!

展示/下載(DEMO&DOWNLOAD) :

最終展示頁面 Note: There is a file embedded within this post, please visit this post to download the file.

註：
1. DOWNLOAD裡的CSS使用的是未精簡過後的初始版，一開始看這個應該會比較容易上手這樣。
2. 本次的示範非常榮幸的邀請到傳說中那個有點飄撇有點帥的shogenism大叔來當媽斗，所以請和我一起用最兇猛的鬼吼鬼叫來表達對S大叔的敬愛~~~~~~

以上~

WordPress Theme│Zero-PIC

娜娜子 — Tue, 09 Mar 2010 17:20:44 +0000

!!此版本已不再更新請移步此區看最新版

趁著這幾天閒下來，localhost/29的原形摳出來寫成了一個theme。zero-pic顧名思義就是零圖片的意思，老實說，我原本連JS也不想載入((純CSS最高！))，但為了巢狀留言的回覆部分設想不得已還是載了個comment-reply.js，搞到最後索性連wordpress自帶的thickbox也一起整了進去。

所以，如果要說這個theme最大的好處，應該就是速度"無敵爆炸霹靂快"這樣，畢竟只加了兩個JS而且是只在有用到的地方才寫。另外由於個人寫作習慣，所以區塊跟區塊間都有做code的標註，有興趣的人可以拆開來看看大家研究研究這樣。

然後因為我的空間很弱沒有辦法放demo site，所以就只好來個看圖說說theme(點小圖可看原始版!!)。

首頁(INDEX PAGE)

↑最上面那張就是index page，預設兩欄。

右上方的選單主要是從page裡抓出來的，預設是只要新增頁面就會增加選項。如果有不想要列出的頁面，打開header.php搜尋

exclude=

在=的後面輸入要排除的頁面ID，如果有多個頁面不要列出在選單裡的話，請用半形標點符號的逗號將ID與ID區隔開來。例如：

1	exclude=1,2,3

上面的寫入結果就是ID1、2、3的這三個頁面都不會再選單裡列出來。

摘要的部分我是直接從全文擷取字數(中文OK)，字數更改方式如下。

index.php裡搜尋

0, 300

改300那邊。

至於縮圖就是用wordpress自帶的post-thumbnails寫的，考慮過幾個Script ，但只要一想到將外連圖片緩存到主機->縮圖->刪除原始大圖的這個過程，就不得不又擔心起爆空間的問題。當然另外一個更大的問題就是...我懶！總之最後我就是用自帶縮圖了，所以也意味著這個theme也是2.9up。

如果在寫文章時沒有設定縮圖的話，則是這樣。

單篇文章(SINGLE PAGE)

接下來的single post page...還是兩欄，沒有其他選擇，因為我是兩欄控，當然你高興改成三四五六七八欄我也沒有甚麼所謂就是了。

巢狀留言的部分我的CSS只有寫到第二層，想要加到兩百層的人可能要記得改一下CSS。

而若要使用thcikbox請記得在圖片的連結裡加上

1	class="thickbox"

然後是一些內文的樣式，這是我從官網上COPY下來的文章範本。

作品集(PORTFOLIO PAGE)

再過來就是portfolio page的部分，也可以當成相本，但我個人是覺得用WP做相本在管理上手會很痠就是了(除非你照片不多)。這裡我是抓tag寫的，也就是說當你想要將文章收進portfolio page裡時，就要加上portfolio這個tag，而portfolio這個tag在頁面上(single的tag列表、側欄的tag clound)我把它排除掉了，避免造成一些在像是tag clound裡的portfolio會變得無敵霹靂大的BUG。

portfolio page的文章列表，主要是顯示圖片跟摘要，游標滑過時才會出現標題，側欄的portfolio則是隨機抽出10篇。

如果想要修改Random Portfolio的數量，請打開404.php、search.php、sidebar.php這三個檔案搜尋

1	showposts=10

將10改成要顯示的數量。

留言版(GUESTBOOK)

zero-pic有自帶一個用page寫的留言版。可選擇一欄(Guestbook - One Column)或兩欄(Guestbook - Two Column)，經由建立page時選擇頁面模板(Template)做設定。

如果不想要留言版的話，不要建立留言page便OK。

預設頁面模版(PAGE TEMPLATE)

建立其他page時同樣則也可以選擇一欄或者兩欄，當中又各分為有無留言引用列表，同樣是經由選擇Template決定。page模版對照說明：

Page - One Column：一欄(下圖左一)
Page - One Column No Comment：一欄無留言引用列表(下圖左二)
Page -  Two Column：兩欄(下圖右二)
Page - Two Column No Comment：兩欄無留言引用列表(下圖右一)

TIP(小補充)

最後就是404page.php、search.php 這兩個檔案的側欄部分是獨立的，不受sidebar.php的控制。

瀏覽器支援：Safari、Opera、firefox、Google chrome、IE5.5up
截圖拍攝環境：1024x768、firefox。
WP版本支援：2.9up。

FILE DOWNLOAD(檔案下載)

檔案下載(tar/zip)：

Note: There is a file embedded within this post, please visit this post to download the file.

傅不死 FullHouse » 原創

WordPress滴打滴【被打版】

主要機能如下：

預覽畫面如下：

使用方式如下：

WordPress Theme│Zero-PIC 之 你問我答

2011/02/04 Update

FILE DOWNLOAD(檔案下載)

Q : 圖片頁面(Portfolio Page)出不來？？ (@MiiA)

Q : 首頁可以換成圖片展示頁面(Portfolio Page)嗎？ (@MiiA)

Q : 圖片可不可以改成自動適應文字區的寬度呢？ (@MiiA)

Q : Gravatar的頭像可不可以改的小一點啊??? (@Bryan)

Q : 要怎樣才可以把預設的portfolio選單拿掉呢？

另外 : 感謝提出指正的字體在簡體網站中顯示問題(過小and粗體無能)的奈維摩爾以及mind，已將更新版重新上傳，有需要的人請重新下載就可以囉~

用CSS減少美化網站的圖片數量

1. 首先想好頁面的排列架構，然後在FW裡大概的擺一下位置。

2. 接下來打開FW來把剛才的圖片拖進來，做好選單的顏色調整後存成一張圖片(FW先別關，之後會用到)

4. 把鏈結、選單都加到#container裡，然後再新增一個ID為pic的div等等來擺圖片用。

5. 回到FW裡已經存好的圖片，開始準備寫第一個"展示站台"的鏈結。

6. 切換到CSS部分，開始製作第一個"展示站台"的鏈結。

7. 接下來就是寫當滑鼠晃過鏈結時(a:hover)的樣式。

8. 接下來是選單的部分，在第四步裡我們已經在html裡寫進了一個內含三個鏈結的DIV。

9. 再來就是幫三個排排排站的鏈結乖乖躺下來。

10. 用position屬性將元素的位置調整成想要的樣子。

最後的最後不免俗的...還是用了雙D兄弟(DEMO&DOWNLOAD)來做個ENDING囉!

WordPress Theme│Zero-PIC

!!此版本已不再更新 請移步此區看最新版

!!此版本已不再更新 請移步此區看最新版

首頁(INDEX PAGE)

單篇文章(SINGLE PAGE)

作品集(PORTFOLIO PAGE)

留言版(GUESTBOOK)

預設頁面模版(PAGE TEMPLATE)

TIP(小補充)

FILE DOWNLOAD(檔案下載)

!!此版本已不再更新 請移步此區看最新版

WordPress Theme│Zero-PIC 之你問我答

!!此版本已不再更新請移步此區看最新版

!!此版本已不再更新請移步此區看最新版

!!此版本已不再更新請移步此區看最新版