CSS1.png

很久沒有架設網站,所以也很久沒有看原始碼了。使用痞客邦這類部落格有很大的好處就是可以自由套用各種不同的佈景,像我這裡也是在很多的佈景主題裡隨意挑一個來用,既快速又方便。不過使用其他人做的佈景來套用不免有些地方想要做些修改,例如改改背景圖,修修文字配色等,儘量希望做到自己喜愛的模樣。

上次發表一篇文章後,我忽然發現明明已經做了斜體字的設定,但是卻始終沒看到效果。只好檢視一下原始碼再看看樣式表,發現痞客邦這裡所謂的斜體使用的標 籤不是一般用來指定字體<i>,而是使用了<em>這個強調標籤粗體字也不是一般使用的<b>,而是用 了<strong>這個標籤。其實這樣是正確的,絕大部份的瀏覽器<em>會顯示為斜體字,<strong>則會顯 示為粗體字,尤其是如果站在SEO的觀點上來說,這兩個標籤代表的意思都是強調,會有較佳的含意存在,對優化有一定的幫助。不過如果單純以HTML的字體指令來說,使用這兩個標籤並不算是字體選擇的標籤,尤其是<em>甚至還可能因為瀏覽器的預設不同,會有不同的字體效果。不過我感到很納悶的是在我的印象中FX跟 IE在這部份應該都會是斜體,怎麼我的文章卻顯示不了斜體字?只好開啟樣式表去查看一下,果然發現樣式表中<em>的標籤被定義為 『normal』,有點不太理解這位樣式的設計者為何要這樣做?(如上圖所示)

當然這不是什麼是非對錯的問題,HTML中的『em』標籤是由emphasize而來,而『i』標籤則是italic的意思,其他像是address標籤也一樣,大多會出現斜體字。所以這些標籤即使都是出現斜體字,但是在原始碼中的真正含意可不一樣。正確的標籤用法有助於搜尋引擎優化處理(SEO)。可是想要的樣式 沒有出現該怎麼辦?很簡單的直接從樣式表(CSS)去改就能解決問題了。像我今天早上的作法就是將樣式表裡面的em的定義去除,另外獨立出來設定為斜體字。好像有點多此一舉,因為兩大瀏覽器預設值就是斜體了,事實上是可以不加上以下這段,不過這是為了防止其他瀏覽器發生顯示不一樣的效果。

em {font-style: italic;}

就是這麼簡單而已,不過斜體的如果是中文字還真是難看!!當然,如果想用其他不同的效果來顯示,也同樣可以在這個定義中去做調整,例如變色、加網底之類。

4972225_1.JPG 前一陣子我也看見有人希望痞客邦的碎碎唸可以改成像是Twitter Balloon一樣,可以加入自己喜歡的圖片,做個圖說文字之類的語言框。我也同樣有申請Twitter Balloon來連結推特(Twitter)與這裡的碎碎唸。不過前一些日子Twitter Balloon不知道搞什麼?一直都顯示異常,無法正常的出現碎碎唸!後來雖然恢復正常了,但是發言時間卻失效了。後來想想乾脆直接自己動手去改這裡的樣式,如此一來以後就不會需要依靠Twitter Balloon了。看了一下原始碼,得知所有碎碎唸是包含在一個叫做『murmur』的selector之下。其實痞客邦這裡的樣式蠻自由的,加個背景圖 調整一下內容出現的位置後,一樣能夠達到相同的效果。

這樣搞了一陣子終於做出來了,不過我發現久沒接觸過的東西真的很容易忘記!尤其是我現在的年紀,已經不再是『過目不忘』的年代,以往修改這些樣式可以駕輕就熟的搞定,但是 這一次我居然快要『熊熊給他看沒有懂』了。看來真的除了多學還要多用才行,學而不用很可能就會很快的忘光光了,實在是很可惜~

創作者介紹

阿佳瞎掰天地

阿佳 發表在 痞客邦 PIXNET 留言(0) 人氣()