我的普立茲 http://blog.beyes.tw The Time Of My Life Sat, 04 Feb 2012 09:04:32 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 如何自訂文章的 meta keywords 與 description http://blog.beyes.tw/526 http://blog.beyes.tw/526#comments Thu, 18 Aug 2011 20:29:10 +0000 admin http://blog.beyes.tw/?p=526 meta keywords

經過前段時間的測試，Google 的確是不吃 meta 標籤中的 keywords，不過 Yahoo 與 Bing 似乎是會吃的(我非 SEO 專家)。總之，如果您想為單篇文章頁面增加一些關鍵字(Keyword)的話，或許您可以參考我下面的方式。

先將這段程式碼

<?php if ( is_single() ) { ?>
<meta name="keywords" content="<?php echo get_post_meta($post->ID, "meta_keyword", true); ?>" />
<?php } ?>

或者使用下面這段程式碼(上下兩段的意思都一樣)

<?php if ( is_single() ) {
	echo '<meta name="keywords" content="';
	echo get_post_meta($post->ID, "meta_keyword", true);
	echo '" />';
} ?>

加在佈景主題 header.php 檔案裡的 <head> 與 </head> 標籤對之間。

程式碼中的 is_single() 表示在單篇文章頁面時。而 meta_keyword 是我們所自訂的名稱，這個名稱也就是我們在寫文章時，Custom Fields 的 Name。一旦有文章自訂過該名稱之後，將來要增加某篇文章的關鍵字時，就選擇您已經自訂好的欄位名稱然後把 kewords 打在欄位內容中即可。

meta description

將程式碼中的 keywords 換成 description 即可。

]]> http://blog.beyes.tw/526/feed 0 CSS3 字型 | Font http://blog.beyes.tw/501 http://blog.beyes.tw/501#comments Sun, 06 Mar 2011 20:30:32 +0000 admin http://blog.beyes.tw/?p=501 font-family
屬　性 設定值
font-family 字型體系 [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
預設值：視使用者代理而定
適用於：全部標籤
繼承性：有

用來指定字型體系名稱或通用字型體系的優先順序清單。當使用者代理程序(如瀏覽器)解析這份清單時，它會一直依照清單上的字型順序(由左至右)來匹配我們想要呈現出來的字型。

字型體系(Font Family)名稱僅只有指定一組字體(Font Face)名稱，它並不是指定個別的字體(Face)名稱。例如指定 Verdana 字型體系時，它也包含 Verdana Bold、Verdana Bold Italic 與 Verdana Italic 這些變體。

須注意的是，您所指定的字型體系，在其他瀏覽者的電腦中也必須要有，否則無法顯示您所設定的字型。對於一些由一個單字以上或其字型名稱中有 # 或 $ 的名稱時，建議您使用單引號或雙引號括起來，為的是不造成誤判。例如，'Lucida Grande'。

font-family: 字型體系一, 字型體系二, ..., 字型體系 N, 通用字型體系;

上述的格式就是其用法，您最想用的字型體系就放在最左邊，如果怕瀏覽者沒有該字型的話，您也可以再設置第二個字型，以此類推(字型與字型之間用逗號隔開)。而最後就擺上通用字型體系。

擺上通用字型體系主要的原因是作為備用之意，例如以下的例子中，如果有一位瀏覽者的電腦上並無 Courier 或 Courier New 字型時；因為有做 Monospace 的設定，所以 UA 就會自動選擇瀏覽者電腦中可用與合適的等寬字型。

div#demo {font-family: Courier, 'Courier New', Monospace;}

  • 字型體系名稱(family-name)

    就是你想顯示出來的字型，例如：新細明體、Arial、Verdana 等等字型。

  • 通用字型體系(generic-family)

    generic-family 為的是，假如瀏覽者無法看到我們設置的字型時，至少還可以看到 generic-family 的字型。底下這五類 generic-family 字型會因瀏覽器端的不同或者使用者在瀏覽器中自訂字型的因素，其自動選擇的字型，每位瀏覽者也許不盡相同。

    • Serif–附有襯線的比例字型，例如：新細明體、Times 等等。
    • Sans-serif–沒有襯線的比例字型，例如：標楷體、Arial、Verdana、Helvetica 等等。
    • Monospace–非上述的比例字型，而是等寬字型，例如：細明體、Courier 等等。
    • Cursive–模仿手寫的字型，例如：Zapf-Chancery、Comic Sans 等等。
    • Fantasy–裝飾用字型或非上述中的字型，例如：Western 等等。

font-weight

屬　性 設定值
font-weight 字型粗細 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
預設值：normal
適用於：全部標籤
繼承性：有

用來指定在該字型中，字元的粗細大小，也就是筆劃的粗細程度。

其值有其如下的意義：

  • 100 到 900：100 為最細，900 為最粗，400 則是該字型的正常粗細。
  • normal：正常大小，相同於 400。
  • bold：相同於 700。
  • bolder：會比從親代元素所繼承到的字型還粗點些。
  • lighter：會比從親代元素所繼承到的字型還細點些。
div#demo {font-weight: bolder;}	/* 將目標的字型設定為比本身所繼承到的值還粗些 */

在設定字型粗細的值時，須注意並不是所有的字型體系(Font Family)都有九個等級的粗細程度可供設定。例如像下圖一樣。

bolder 與 lighter 的值是相對於父元素字型的粗細程度。其計算結果將如下所示：

目標所繼承之親代的值 100 200 300 400 500 600 700 800 900
目標設為 bolder 時的值 400 400 400 700 700 900 900 900 900
目標設為 lighter 時的值 100 100 100 100 100 400 400 700 700

font-stretch

屬　性 設定值
font-stretch 字型延展 normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
預設值：normal
適用於：全部標籤
繼承性：有

用來將字型擠為瘦長(condensed)或拉寬(expanded)。

跟 font-weight 類似，它基本上也有九個層級可供設定：ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded 與 ultra-expanded。

div#demo {font-stretch: condensed;}

condensed 的作用是將字型由兩側往內壓擠，然後變成瘦長的字體；expanded 的作用是將字型由兩側往外擴展，然後變成扁平的字體。

  • narrower：會比從親代元素所繼承到的字型還瘦長些。
  • wider：會比從親代元素所繼承到的字型還寬點些。

narrower 與 wider 的值是相對於父元素字型的延展程度。其計算結果將如下所示：

目標所繼承之親代的值 目標設為 narrower 時的值 目標設為 wider 時的值
ultra-condensed condensed normal
extra-condensed condensed normal
condensed condensed normal
semi-condensed condensed normal
normal condensed expanded
semi-expanded normal expanded
expanded normal expanded
extra-expanded normal expanded
ultra-expanded normal expanded

font-style

屬　性 設定值
font-style 字型類型 normal | italic | oblique | inherit
預設值：normal
適用於：全部標籤
繼承性：有

用來選擇使用斜體字或斜的字體。其值有如下的意義：

  • normal：一般正常的狀態。

  • italic(斜體字)

    指定 font-family 中斜體字型態的字型，倘若瀏覽者的電腦中沒有該字型的話，則會以 oblique 的方式來顯示。

  • oblique(斜的字體)

    單純的將一般正常狀態的字體直接傾斜而已。

/* 指定使用 Georgia 字型體系 */
/* 因為我的電腦中有 Georgia, Georgia Bold, Georgia Bold Italic, Georgia Italic 字型 */
/* 所以將會使用該字型體系中有斜體型態的字型 Georgia Italic 字型 */
div#demo {
	font-family: Georgia, Serif;
	font-style: italic;
}

font-variant

屬　性 設定值
font-variant 字型變體 normal | small-caps | inherit
預設值：normal
適用於：全部標籤
繼承性：有

用來設定字型的縮小版大寫字體，若無該 small-caps 字型，則會用大寫縮小來替代。

其值有如下的意義：

  • normal：一般正常的狀態。
  • small-caps：縮小版的大寫字體。

下圖中的第二列文字是經過 small-caps 設定。

div#demo {
	font-family: Georgia, Serif;
	font-variant: small-caps;
}

font-size

屬　性 設定值
font-size 字型大小 <絕對大小> | <相對大小> | <長度值> | <比例值> | inherit
預設值：medium
適用於：全部標籤
繼承性：有

font-size 與活版印刷中的 EM Square 概念是一致的，並且須注意的是某些字元可能會滲過它們的 EM Square(EM Box)。

這個是用來指示字型所需的高度。對於擴展字型而言，font-size 是應用於該字型 EM 單位的一個比例係數；對於非擴展字型而言，font-size 是轉換為絕對單位並且與字型之 font-size 的設定相匹配，而這兩者相匹配的值是使用相同的絕對座標位置。簡而言之：font-size 是用來縮放 EM Square 以便於顯示我們想要的字型尺寸。

EM Square = font-size = content-area

EM Square：EM 是 TrueType 字型的一個基本屬性。而字型的字元是在一個方形網格中所設計的，在這個網格中的每個小方塊稱之為字型單位(Font Unit)或簡稱為 FUnit。以 Apple 而言，大部分字型的網格是由 2048×2048 FUnit 來形成所謂的 em-square。em square 的縮小與擴張是隨著字型尺寸來做變化，但是這個變化實際上在 em-square 中的小方塊數目是不變的。EM square 的垂直與水平尺寸是相當於字型大小。一個 EM 為 TrueType Font 的字型尺寸，無論它是否有指定點數或像素。

font-size 的值有如下的意義：

<絕對大小>

絕對大小有著相對於彼此的七個關鍵字值：xx-small、x-small、small、medium、large、x-large 與 xx-large。其中預設的正常標準是 medium。

<相對大小>

相對大小有兩個關鍵字值：larger 與 smaller。這兩個值將會依據父元素的 <絕對大小> 來做相對性的向上下層級做調整(看是要較大還是較小)，例如：父元素的 font-size 之值為 'medium' 的話，而目標元素設為 'larger' 時，該目標元素真正的字型大小為 'large'(大一個層級)。如果父元素之值不在 <絕對大小> 的七個層級內，則 UA(使用者代理程序, 瀏覽器) 將會自行判斷最接近的一個值。

<長度值>

使用長度單位的值，例如 in、cm、mm、pt、pc 與 em、ex、px 等等。※任何字型大小的長度單位不能使用負值。

<比例值>

指定一個相對於父元素字型大小的比例值。

p#one {font-size: 1em;}		/* 將目標元素設為 1em */
p#two {font-size: 80%;}		/* 將目標元素設為父元素的 80% */

絕對大小與比例係數相互之關係

font-size-adjust

屬　性 設定值
font-size-adjust 字型大小調整 <數值> | none | inherit
預設值：none
適用於：全部標籤
繼承性：有

對於任何已經特定(設定)的字型大小而言，字型或字型與字型間的外觀尺寸與文字上的可讀性(文字的辨識度)是不盡相同地。換句話說，當您設定某一字型與其大小後，如果這樣的大小套用了其它的字型後，就有可能顯得過小而不易閱讀。

有區分大小寫的文字書寫體，其小寫字母將會參照於同列大寫字母的相對高度，這種行為決定了文字可讀性的結果；像這樣的「行為」，我們通常將它稱之為文字的縱橫比(aspect value)。縱橫比更精確的定義為——它等於字型的 x-height 除以 font-size 之後的結果值。

在備用字型發生的情況下，所設定的備用字型將不會共享與使用我們預設所需之字型的縱橫比；而這樣的情形，其可讀性很有可能會降低。我們換個方式來說，例如在 font-family 設定 A 為主要顯示的字型 B 為備用字型，當瀏覽者沒有 A 字型時，則會取用備用字型 B；而 B 字型將不會沿用 A 字型的縱橫比，所以使用備用字型的結果，就很有可能因字型大小設定的因素，使得在網頁上頭顯示的文字太小以致於不易閱讀。

所以當發生使用備用字型的情況時，font-size-adjust 的設定將會保留文字的可讀性。無論使用何種備用字型，font-size-adjust 將會自行調整 font-size 的值，以便於和我們預設字型的 x-height 高度一樣。

調整後的font-size值=(font-size-adjust 的值÷所用字型的縱橫比)×設定的font-size之值

font

屬　性 設定值
font 字型 [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
預設值：依個別屬性而定
適用於：全部標籤
繼承性：有

這是一個速記屬性，用來同時設定一些跟字型相關的屬性。

/* 同時設定了 font-size, line-height 與 font-family */
p#demo {font: 16px/32px Verdana, Sans-serif;}

使用瀏覽者電腦系統中的字型：

  • caption：控制項標題所使用的字型(例如按鈕)。
  • icon：icon Label 所使用的字型。
  • menu：選單所使用的字型(例如下拉式選單與其選單項目)。
  • message-box：對話方塊所使用的字型。
  • small-caption：小的控制項標題所使用的字型。
  • status-bar： 視窗狀態列所使用的字型。
button p {font: menu;}

@font-face

自動地鏈結瀏覽時所需要的字型。

@font-face {
  font-family: Demo;
  src: url(http://DemoURL/fonts/Demo.ttf);
}
p {font-family: Demo, serif;}
]]> http://blog.beyes.tw/501/feed 0 CSS3 變形處理 | Transform http://blog.beyes.tw/500 http://blog.beyes.tw/500#comments Wed, 17 Nov 2010 23:19:09 +0000 admin http://blog.beyes.tw/?p=500 transform
屬　性 設定值
transform none | <transform-function> [ <transform-function> ]*
預設值：none
適用於：區塊型元素與單列型元素
繼承性：無

translate(位移)

translate(<數值>[, <數值>]) 設定 tX 軸與 tY 軸的偏移量。

translate3d(<數值>, <數值>, <數值>) 設定 tX 軸、tY 軸與 tZ 軸的偏移量。

translateX(<數值>) 單獨設定 tX 軸的偏移量。

translateY(<數值>) 單獨設定 tY 軸的偏移量。

translateZ(<數值>) 單獨設定 tZ 軸的偏移量。

scale(縮放)

scale(<數值>[, <數值>]) 設定 sX 軸與 sY 軸的縮放量。

scale3d(<數值>, <數值>, <數值>) 設定 sX 軸、sY 軸與 sZ 軸的縮放量。

scaleX(<數值>) 單獨設定 sX 軸的縮放量。

scaleY(<數值>) 單獨設定 sY 軸的縮放量。

scaleZ(<數值>) 單獨設定 sZ 軸的縮放量。

rotate(旋轉)

rotate(<角度>)

rotate3d(<X 數值>, <Y 數值>, <Z 數值>, <角度>)

rotateX(<角度>) 單獨設定 rX 軸的角度。

rotateY(<角度>) 單獨設定 rY 軸的角度。

rotateZ(<角度>) 單獨設定 rZ 軸的角度。

skew(偏斜)

skew(<角度> [, <角度>]) 設定 X 軸與 Y 軸的偏斜角度。

skewX(<角度>) 單獨設定 X 軸的偏斜角度。

skewY(<角度>) 單獨設定 Y 軸的偏斜角度。

matrix(變形矩陣)

matrix(<數值>, <數值>, <數值>, <數值>, <數值>, <數值>)

matrix(a,b,c,d,e,f) 相等於 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)

matrix3d(變形矩陣)

matrix3d(<數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>, <數值>)

perspective(透視)

perspective(<數值>)

調整遠近度的效果。

transform-origin

屬　性 設定值
transform-origin [ [ [ <比例值> | <長度> | left | center | right ] [ <percentage> | <長度> | top | center | bottom ]? ] <長度> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
預設值：50% 50%
適用於：區塊型元素與單列型元素
繼承性：無

變形處理的起點(支點)參考基準。

transform-style

屬　性 設定值
transform-style flat | preserve-3d
預設值：flat
適用於：區塊型元素與單列型元素
繼承性：無

指定變形處理的類型為2D或3D。

]]> http://blog.beyes.tw/500/feed 0 CSS3 多欄位佈局(配置) | Multi-Column Layout http://blog.beyes.tw/499 http://blog.beyes.tw/499#comments Sat, 06 Nov 2010 07:05:53 +0000 admin http://blog.beyes.tw/?p=499 欄位的寬度與數目(The number and width of columns)

column-width

屬　性 設定值
column-width 欄位寬度 <長度> | auto
預設值：auto
適用於：非置換型區塊元素、表格儲存格與單列型區塊元素
繼承性：無

用來設定多欄位元素中，每個欄位的寬度。

column-count

屬　性 設定值
column-count 欄位數目 <正整數> | auto
預設值：auto
適用於：非置換型區塊元素、表格儲存格與單列型區塊元素
繼承性：無

用來設定多欄位元素中，欄位的總數量。

columns

屬　性 設定值
columns 欄位設定 <column-width> || <column-count>
預設值：依個別屬性而定
適用於：非置換型區塊元素、表格儲存格與單列型區塊元素
繼承性：無

用來同時設定 column-width 與 column-count。例如：

div#demo-one {columns: auto auto;}
div#demo-two {columns: 6;}	/* column-width 為 auto, column-count 為 6 */

欄位的間隙與通則(Column gaps and rules)

column-gap

屬　性 設定值
column-gap 欄位間隙 <長度> | normal
預設值：normal
適用於：多欄位元素
繼承性：無

用來設定多欄位元素中，欄位與欄位之間的間隙。normal 這個值是由 UA(瀏覽器) 所指定的，通常是1em。

column-rule-color

屬　性 設定值
column-rule-color <顏色>
預設值：視使用者代理程式(User Agent)而定
適用於：多欄位元素
繼承性：無

用來設定多欄位元素中，欄位與欄位之間框線的顏色。

column-rule-style

屬　性 設定值
column-rule-style <border-style>
預設值：none
適用於：多欄位元素
繼承性：無

用來設定多欄位元素中，欄位與欄位之間框線的樣式。

column-rule-width

屬　性 設定值
column-rule-width <border-width>
預設值：medium
適用於：多欄位元素
繼承性：無

用來設定多欄位元素中，欄位與欄位之間框線的厚度。

column-rule

屬　性 設定值
column-rule <column-rule-width> || <border-style> || [<color> | transparent]
預設值：依個別屬性而定
適用於：多欄位元素
繼承性：無

用來同時設定 column-rule-width、column-rule-style 與 column-rule-color。

跨欄位(Spanning columns)

column-span

屬　性 設定值
column-span 跨欄位 1 | all
預設值：1
適用於：靜態, 非浮動元素
繼承性：無

用來指定元素要橫跨多少個欄位。其值所代表意義如下所示：

  • 1：該元素不橫跨多個欄位。
  • all：該元素橫跨所有的欄位。

填充欄位(Filling columns)

column-fill

屬　性 設定值
column-fill 填充欄位 auto | balance
預設值：balance
適用於：多欄位元素
繼承性：無

其值所代表意義如下所示：

  • auto：按順序來填充。
  • balance：平衡同樣欄位間的內容。
]]> http://blog.beyes.tw/499/feed 0 CSS3 浮動(Floating)與旋轉(Rotating) http://blog.beyes.tw/498 http://blog.beyes.tw/498#comments Thu, 04 Nov 2010 06:19:40 +0000 admin http://blog.beyes.tw/?p=498 float
屬　性 設定值
float 浮動 none | left (浮動至左邊) | right (浮動至右邊)
預設值：none
適用於：全部標籤
繼承性：無

用來將元素設為「浮動」；而浮動也就是所謂「文繞圖」的這種概念。任何設有浮動的元素，都將變為區塊型元素。而浮動的承載區塊為其最近的親代元素。

由以上圖片裡，我們可以發現到，所謂文繞圖的「文」必須接續在「圖」之後，否則會有不一樣的結果。也就是說，「文」的流向必須在浮動元素之後，才會有「文繞圖」的情況。

clear

屬　性 設定值
clear 清除浮動元素 none | left (禁止左邊有浮動元素) | right (禁止右邊有浮動元素) | both (禁止左右兩邊有浮動元素)
預設值：none
適用於：區塊型元素
繼承性：無

用來清除浮動的元素。

rotation

屬　性 設定值
rotation 旋轉 <角度值>
預設值：0
適用於：區塊型元素、單列型表格與單列型區塊
繼承性：無

用來旋轉 Box，而旋轉的角度值介於 0deg 至 360deg 之間。

rotation-point

屬　性 設定值
rotation-point 旋轉的軸心點 <bg-position>
預設值：50% 50%
適用於：區塊型元素
繼承性：無

用於定位旋轉方塊(Box)時的軸心點。

]]> http://blog.beyes.tw/498/feed 0