Xuite CSS教學、樣式分享與問題整理：布拉格的羅傑：Xuite日誌

2007-09-04 02:45

Xuite CSS教學、樣式分享與問題整理

CSS實驗室

好文轉寄

平均分數：0 顆星投票人數：0 人
我要評分：

標籤：

這裡搜集網友詢問我關於 Xuite 的各類自訂樣式 CSS 問題，我將不定期更新這些教學與解答。各位網友不妨留言讓我知道你的問題，藉網路分享討論，增長知識喔。

注意：
如果您想尋找 無名小站 CSS 樣式，請參閱 CSS教學：自訂無名小站的CSS樣式 (相關網站連結整理) 一文。

Xuite CSS 樣式分享

布拉格的羅傑： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

http://blog.xuite.net/yeegiah/diary2/9827843

羅傑的其他網誌： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
http://blog.xuite.net/yeegiah/diary/5485731

自訂樣式 CSS 檔案所在網址：

你知道嗎，檢視你網誌任一網頁的原始檔 (Internet Explorer 使用者檢視網頁原始檔方式，如上圖所示)，就能找出自訂樣式 CSS 的網址。
在 Xuite 日誌裡，每個自訂樣式檔案都被命名為 blog.css，網址位於網頁原始檔大約第 10 行上下，包在 < link href="/_users/xx/xx/xx/xx/xxxxxxxx/blog_xxxxx/blog.css" rel="stylesheet" type="text/css" / > 當中。
把 Xuite 日誌的網址 http://blog.xuite.net 加在 /_users/xx/xx/xx/xx/xxxxxxxx/blog_xxxxx/blog.css 前面，就成為你自定樣式 CSS 的完整網址。以布拉格的羅傑這篇網誌來說，它的自訂樣式 CSS 檔案網址是：
http://blog.xuite.net/_users/f/7/b/7/10055976/blog_6267/blog.css

Xuite 文章編排

文繞圖：
方法一：用 float 指令達成文繞圖
http://blog.xuite.net/yeegiah/diary/126866

方法二：用 align 指令達成文繞圖
http://blog.xuite.net/yeegiah/diary/5135374

在文章中運用 HTML 語法加入方框 (運用 Table 指令)：
如這篇文章頂端的藍色方框。編輯文章的時候，用「切換HTML原始碼」的功能，把方框的 HTML 語法分別放在你想「框」住的文字前後：

http://blog.xuite.net/yeegiah/diary/6743283

Image Rollover：
http://blog.xuite.net/yeegiah/diary/4653359

Xuite 整體版面美化

更換左右欄選單標題名稱背景圖檔： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
請參考狗貓的解答：
http://blog.xuite.net/jeanson61/xuite/4500950

更換左右欄選單標題名稱前的小圖示 icon： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
請參考安哥爾．摩亞的解答：
http://blog.xuite.net/mikako1979/01/5130984

設定滑鼠移滑過超連結文字時的動態效果：我的作法是在 a:hover 語法中，插入 position:relative; 並運用 top 及 left 指定其分別向上及向左移動 1 個px (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

a{
color:#你想要的顏色;
}
a:link{
color:#你想要的顏色;
}
a:visited{
color:#你想要的顏色;
}
a:active{
color:#你想要的顏色;
}
a:hover{
color:#你想要的顏色;
position: relative;
top: 1px;
left: 1px;
}

設定或修改文章標題名稱 (span.titlename) 的顏色： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
由於 Xuite 的文章標題名稱是個超連結，如果沒有額外設定，會自動繼承超連結文字的顏色。
要修改文章標題名稱，需額外追加以下內容：

/*文章標題名稱超連結*/
span.titlename a{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
span.titlename a:link{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
span.titlename a:visited{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
span.titlename a:active{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
span.titlename a:hover{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}

超連結不要下底線，語法是 text-decoration:none;

設定或修改日誌名稱 (.blogname) 的顏色： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
Xuite 的日誌名稱也是超連結，如果沒有額外設定，會自動繼承超連結文字的顏色。
要修改文章標題名稱，需額外追加以下內容：

/*文章標題名稱超連結*/
.blogname a{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
.blogname a:link{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
.blogname a:visited{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
.blogname a:active{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}
.blogname a:hover{
color:#你想要的顏色;
text-decoration:none; /* text-decoration:none 表示無下底線 */
}

Xuite自定貼紙：
http://blog.xuite.net/yeegiah/diary/10134612

修改文章瀏覽數 (span.counter li) 的小圖示、修改文章分類項目符號 (span.category li) 小圖示、把左右欄選單中的標題 (.categoryTitle) 行高變大、修改文章 (.blogbody) 中的行距、把照片放進文章中...： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
http://blog.xuite.net/yeegiah/diary/5865463

解決不同螢幕解析度下欄位被遮蓋： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)
http://blog.xuite.net/yeegiah/diary/4743692

把三欄式版面變為兩欄 (三欄：意指左右兩側皆有選單，中間為本文欄；兩欄：意指移除左側或右側選單，剩下單邊選單及本文欄)：
可在「面板管理」功能中選取「版面編排」：

將兩側選單的欄位改為集中在其中一側。版面就會調整成兩欄式。

Xuite 移除圖示或特定欄位

移除「加入最愛」圖示： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

/*加入最愛*/
.blogfavo{
visibility:hidden; /*本行亦可取代為 display:none; */
}

移除「今日心情」圖示： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

/*今日心情*/
.blogemotion{
visibility:hidden; /*本行亦可取代為 display:none; */
}

移除 Xuite Logo 標誌： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

/*Logo*/
.logo{
visibility:hidden; /*本行亦可取代為 display:none; */
}

移除「more」及它左邊的三角形圖示： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

.morebtn li{
visibility:hidden; /*本行亦可取代為 display:none; */
}
.morebtn{
visibility:hidden; /*本行亦可取代為 display:none; */
height:0;
}

移除「繼續閱讀」，額外追加以下語法：

/*繼續閱讀*/
.fullpost{
visibility:hidden; /*本行亦可取代為 display:none; */
}

移除「日誌描述」： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

.description{
visibility:hidden; /*本行亦可取代為 display:none; */
}

移除右上方 Xuite 預設選單： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

/*選單列*/
.menulist{
visibility:hidden;
}
/*選單*/
.menu{
visibility:hidden;
}

移除「關於我」： (需修改自訂樣式CSS。請事先備份你原本的自定樣式CSS，再進行套用)

.pTitle{
display:none;
}
.avatar{
display:none;
}

Xuite 插入影音檔案及自訂背景音樂

在文章中插入如 Youtobe、Vlog 多媒體影音檔案
如果你已上傳一影音檔案。將檔案插入 Xuite 文章中最簡單的方式是
複製該影音檔案的嵌入程式碼 (下圖為 Vlog 的例子)

在 Xuite 編輯完文章後，使用「切換HTML原始碼」功能

將上述程式碼貼上，放在最前段位置

按下發表即可。參看結果範例：
http://blog.xuite.net/yeegiah/befree/6743662

Xuite 自訂背景音樂語法 (以自由欄位的方式插入音樂檔案)：
http://blog.xuite.net/yeegiah/diary/5827869

Podcast 訂閱教學

給初次用 iTunes 訂閱 Podcast 的網友：
http://blog.xuite.net/yeegiah/podcast/9558802

Google Analytics

Xuite 如何設定 Google Analytics 追蹤程式碼
Xuite 及 Pixnet 網誌有開放自由欄位新增 Java Script 語法，可以運用 Google Analytics。無名小站免費會員無法運用Google Analytics，金卡會員才可以。
http://blog.xuite.net/yeegiah/diary/11875141

Google Analytics 評論：
http://blog.xuite.net/yeegiah/diary/9475116
http://blog.xuite.net/yeegiah/diary/9488705
http://blog.xuite.net/yeegiah/diary/9735305

其他

留言裡的「插入表情」能修改既定的表情圖案嗎？
請參考狗貓的解答：
http://blog.xuite.net/jeanson61/xuite/198003

如果擔心盜用別人的圖檔，也可以自己製作圖檔上傳後再複製、貼上。請參考狗貓的解答：
http://blog.xuite.net/jeanson61/xuite/330294

更多關於羅傑的CSS：
http://blog.xuite.net/yeegiah/diary?st=c&re=list&p=1&w=110964

Roger / Xuite日誌 / 回應(39) / 引用(1) / 好文轉寄

日誌首頁

回應