Xuite CSS教學、樣式分享與問題整理 @ 布拉格的羅傑 :: 隨意窩 Xuite日誌
  • 關鍵字





  • Powered by Xuite
  • bgmusic
  • 背景音樂: Seaside Drop By
  • 上班族,無事玩Blog
    玩影像處理
    玩MIDI
    玩書寫
    為了對抗消逝的歲月,對抗腦力枯竭,對抗閒來無事的恍神

  • 我的網誌
  • 我的網誌
  • New blogemotion
  • 200709040245Xuite 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

    回應