痞客邦 PIXNET 面版樣式(CSS) 設定(問/答)

_________________________________________________________________

** 由於新版Firefox有bug, 本人的blog首頁有些動畫未出現, 或者無法上下左右移動.

在Chrome可看到blog首頁動畫的 "正常效果".

_________________________________________________________________

 

請將下列橫向座標(left, right, padding中的第2及第4個數)

      "儘量" 定位在8的倍數, 在顯示圖/文時可減少虛耗CPU時間。

    若您的 "自訂欄位" 要同時使用在Pixnet及Xuite, 則

    本文提供的欄寬設定方式將有助於達成兩者版面的一致性!

Q0:欄寬設定(請記得依日期備份CSS檔)

 

 A0:

/*

     [管理後台]==> [自訂樣式] ==>
     [
自訂樣式簡易版] 擇一:"三欄式

            二欄式側欄靠左二欄式側欄靠右" ==> [預覽]/[儲存套用]
     再==> [自定樣式]==> 開始[CSS原始碼編輯]

*/

 

/* 背景圖, 請參考  Q4. */

/*中欄底圖, 請自行改圖 或改成底色 background:#ff0;   或 隱藏 */
/*
#body-div{
width:970px;
background:url(http://pic.pimg.tw/pixnetvisual/49dad6603e76f.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
*/

/* 部落格寬 */
#container{
min-width:1280px; /* 部落格寬1280=8+160+8 +800+ 8+280+16 */

max-width:1848px;
margin:28px 0 0 0;
position:relative;
/*border:1px solid #999 ; 實線*/
}
/* container 三個之中只要設一個便可, 否則可能出現兩條 "直虛線"
#container2{
}
#container3{
}
*/

/* blog上方標題圖, 請自行 "改圖" 或 "repeat改成no-repeat" 或 "隱藏" */
/*
#header{
background:url(http://pic.pimg.tw/pixnetvisual/49dad6613375c.png) left top no-repeat;
height: 190px;
}
*/

/*"側欄區" 請換成下列內容 */
#links{}
#links-row-1 ul, #links-row-1 li,
#links-row-2 ul, #links-row-2 li  {
list-style:none;
margin: 0;
padding: 0;
}

/*三欄式的第一欄*/
#links-row-1{
width: 160px ; /* 第一欄寬160 */
margin-left: -800px; /* 調整此 "負數(-920px至-800px)", 將本欄左右移至適當位置,

                                              若在 "二欄式右欄" : 本欄應為正數,

                                              或改用#links-row-2 */
float:left;
/*background:#fff ;*/
padding:200px 8px 8px 8px; /* 本欄留白: 距上方200px 距右8px  距下8px  距左8px */
}
#links-row-1 li{color:#000;}/* 側欄 字 顏色 "黑色", (例: "本日人氣") */

/*三欄式的第二欄( 若不使用, 其內容可設成 display:none; )*/
#links-row-2{
width:280px; /* 第二欄寬280 */
margin-left:176px; /* 調整此 "正數(56px至176px)", 將本欄左右移至適當位置,

                                          或直接計算此數 = 8+160+8 +800 + #links-row-1中的margin-left值,

                                           = 8+160+8 +800 +( -800 ) = 176 */


float:left;
/*background:#fff ;*/
padding:200px 16px 8px 8px; /* 本欄留白: 距上方200px 距右16px  距下8px  距左8px */
}
#links-row-2 li{color:#000;} /*  字黑色 */

/* 文章區 */
#article-area {
color:#000; /*  字黑色 */
position:absoult;
z-index:500;
width:800px; /* 文章寬800  */
padding:200px 0 0 176px;/* 距上方200px ,距右0px, 距左方176px = 8+左欄寬160 +8  */
}

/* 文章內容 */
#content{
float:left;
width: 800px; /* 文章寬800px ; 若設width:100% 可能導致第二欄會被文章區往下排擠  */
}

/* 文章標題底圖 */
.article-head{
......

......
/* 文章區放寬後, 原 "文章標題底圖" 的 "寬度不足",

     若不改圖則可利用原圖 "先右貼+再左貼" 重疊 "拉長" */
background:url(http://pic.pimg.tw/tony25852/034b6937b5c994206e5f141f0d9a5543.png) top left no-repeat, /* 文章標題底圖 "再左貼" */
url(http://pic.pimg.tw/tony25852/034b6937b5c994206e5f141f0d9a5543.png) top right no-repeat; /* 文章標題底圖 "先右貼" */
}

/* 文章標題 */

.title {
/*font-family:標楷體;*/
float:left;   /* 靠左  或 float:right;  靠右 */
width:696px; /* 約 = 文章寬800 -104 */
font-size:15px;
}

 

 

 

Q1.部落格上的連結字,都換顏色。
A1: 找出 a, a:link, .text { ......


a, a:link, .text{
   ......

   
    /* 連結顏色 */ color:#005bae;

   }



Q2.文章標題連結更換顏色。
A2:
      /*文章標題列*/
.title a:link, .title a:visited{
    position:relative;
    /* 標題顏色 */ color:#005bae;
    /* 若要設定底色 background:#FAEDB7; width:800px; hright:36px; */
   }




Q3.文章內容顏色, "(繼續閱讀...)" 換顏色。
A3:
.article-body{
   ......

   
    /* 文字顏色 */ color:#ffff00; /* 黃 */
   /* 若要設定底色 background:#000000; */

   }

 






Q4.圖 "橫向重複"
A4:body {background-image:url(https://sites.google.com/site/toolsdn3/pl/tools-241-26.jpg);
background-repeat:repeat-x;background-attachment:fixed;

} /* 請在 1920x1080 螢幕解析度之下試按兩次 [F11]鍵,

        避免下方留白, 所以本人背景圖採 1280x1064 而非 1280x1024 */




Q5. 側欄 "最新文章" 標題
A5:

/* 側欄 "最新文章" 標題前放 "小圖" */
#recent-article.hslice.box li{

list-style-image:url( "https://pic.pimg.tw/tools241/1681708235-716148970-g.gif"); 

margin-left:24px;/* 調整到適當位置,以免蓋到中欄 */
}

/* 下列提供18個小圖的網址:

https://pic.pimg.tw/tools241/1681708235-716148970-g.gif

https://pic.pimg.tw/tools241/1681708270-3989926718-g.gif

https://pic.pimg.tw/tools241/1681708287-326403435-g.gif

https://pic.pimg.tw/tools241/1681708310-383940858-g.gif


https://pic.pimg.tw/tools241/1681708332-284613091-g.gif


https://pic.pimg.tw/tools241/1681708398-154641555-g.gif


https://pic.pimg.tw/tools241/1681708418-2819238687-g.gif


https://pic.pimg.tw/tools241/1681708433-2050159423-g.gif

https://pic.pimg.tw/tools241/1681708447-3180000187-g.gif


https://pic.pimg.tw/tools241/1681708463-2842179664-g.gif

https://pic.pimg.tw/tools241/1681708489-1425889045-g.gif

https://pic.pimg.tw/tools241/1681708501-112982855-g.gif

https://pic.pimg.tw/tools241/1681708516-2728365079-g.gif

https://pic.pimg.tw/tools241/1681708531-330838630-g.gif

https://pic.pimg.tw/tools241/1681708549-3524463195-g.gif


https://pic.pimg.tw/tools241/1681708581-173858138-g.gif

 
https://pic.pimg.tw/tools241/1681708620-1306124504-g.gif

https://pic.pimg.tw/tools241/1681708654-390471508-g.gif

*/


/* 超過1000款 小圖/動圖 的網址:

     小小圖素材 ~ღ 文章前可愛小小圖 ღ~ :

     http://rita589768.pixnet.net/blog/post/256043897

*/

 

/* 側欄 "最新文章" 標題顏色 */

#recent-article.hslice.box li a:link, #recent-article.hslice.box li a:visited{color:#00ffff;}





Q6."版主回覆:" 前面的 *日期* 改顏色
A6:


.trackback li {

   
    color:#666666;

   }



Q7.隱藏 [部落格/相簿/名片/留言版]
A7:
#navigation { display:none; font-size:0px; }

註: 可在 "自訂欄位" 中利用 "圖片"+"超連結" ,

      將 [部落格/相簿/名片/留言版] 修改成個人風格

 

 Q8.刪除 [文章間的dash --------------------------- ]
A8:
.article-footer {
...

...
/*border-top:1px dashed #bbb; 文章間的dash*/
...

...
}

 


Q9.隱藏 [文章分類前的 "+ -" 號圖示]
A9:
.box-more{ display:none;}

 

 

Q10.(儘量不要)隱藏 [底行]
A10:

 有人網頁在 IE? 模式下 "底行" 會跳上來重疊到其他地方,

  請試調 "line-height減少1px或降低百分比" ,

  或找出 "各欄的欄寬" 是否設定上有問題?

  "儘量不要" 隱藏底行:

#bottom { display:none;  }

註: 當底行被設為 "不可覆蓋", 而您的其他區塊重疊到底行,

     則底行會被排擠到未知位置.


    "中間欄" 不同瀏覽器的實際高度可能有異,  若要達成

    一致可能top須調降32px, 請上網搜尋 "CSS HACK".

 

 

Q11.文末[發表留言(我要回應)] "改圖"
A11:

/*  "發表留言" 圖片  取左邊64px便可 */

/* "發表留言" 換成下列內容 */
.post-comment {
font-size:0px;
text-align:right;
float:right;
}
div.post-comment  a{display:block;width:
64px;height:34px;z-index:127;position:relative;top:-24px;right:24px;
background:url(https://pic.pimg.tw/tools241/1681708700-1466920823-g.gif) no-repeat;
}  

 

 

Q12.游標 (在IE模式才有效果,游標樣式的網址副檔名不一定要為ani)
A13:

 

/* 游標樣式1(4星): 沒有連結時 */

body{cursor:url(http://bbs.flash2u.com.tw/skins/myspace/userskins/skin_472043/201012278195013231.png);}

 

/* 游標樣式2(閃心): 側欄的連結 */

a:hover{cursor:url(http://bbs.flash2u.com.tw/skins/myspace/userskins/skin_472043/201012277423951482.png);}

 

/* 游標樣式3(藍心): 原創:中欄 "文章標題" 的連結 */

.title a:hover{cursor:url(http://blog.roodo.com/tools_241/4c17f94d.xls);}

 

/* 游標樣式4(紅心): 原創:中欄文章內的連結 */

.article-body a:hover{cursor:url(http://blog.roodo.com/tools_241/6b873501.xls);}

 

 

註:

     上列游標係由 *.ani 改副檔名為 *.png 或 *.xls 然後再上傳,

     但此變通取巧方式目前在多數網站會因檔案結構不合導致上傳失敗.

     上列網站仍會保留檔案, 網友可直接套用或下載後再上傳到他處.

 

 

 

Q13.選「文章分類」會呈現全文,音樂一起自動播放,顯得很吵雜?
A13:

 解法1: 在 "首頁" 或 "文章分類" 只顯示文章的前0行 ,

           [管理後台]==> [基本/進階設定] ==>[首頁文章顯示模式]==>

                   [ ] 視單篇文章之設定

                   [ ] 顯示全文

                   [v] 顯示前[ 0]行摘要(0改成2, 在文章開頭空2後再插入 "播放器語法" ).

 解法2: 文中不插入播放器語法, 改在側欄插入 "隨機(或依序)+多曲" 播放器語法 ==>

     [原創]部落格小玩意 "可隨機/依序播多首的MP3播放器2語法貼紙" -- 使用playlist

 

 

 Q14.Pixnet部落格「快捷功能BAR」2014/06/04改版可能導致 "樣式跑版"

A14:
/* 請將背景圖下移40px, 或在CSS文末加入下列內容 */
#topbar { /* 請勿隱藏此id, 以免無法登入blog */
position:relative;

left:1376px; /* 「快捷功能bar」右移 */

margin-top:-40px; /* 防側邊欄位跑版 */

top:40px;
}

.topbar__logo a {

margin-left:-208px; /* 將LOGO(商標)左移 */

 }

 


Q15.隱藏 [人氣]
A15:
#span.author-views { display:none; }

 註: 也可將人氣的字改成透明, 須在人氣處自行 "反白" 才看得到

 #span.author-views { color:transparent; }


 

 

 

 

** 除了 "隱藏" , 何不 "加料" ?

1.本人在舊址http://tw.myblog.yahoo.com/tools-241

   已同時使用了4種游標, 在此特別公開用法.

2.滑鼠移到天使變蝙蝠 ,再按左鍵回首頁.

3.多數blog對版面的 "絕對位置" 管控較為寬鬆, 例如:

   "前景動圖" 可以置頂, 座標負數可能有效, 但在Yahoo則受限,

   本人以獨特 "CSS HACK" 語法突破此限制,

   請參考舊址 "流星雨" 位置.

 

 

 

* 色碼表 ==>http://nthucad.cs.nthu.edu.tw/~yyliu/color.html

 

* 如何設定電腦游標

  

* 編輯文章插入外連圖片( 先取得 "圖片網址" ):

   在痞客邦[部落格後台]=>[文章管理]=>[文章列表]==>[修改文章]==>

    點上方[上傳圖片]上傳到(勾選)[操作畫面]上傳檔案[瀏覽]檔名==>  
    (除了讀取PC圖檔,亦可)貼上"圖片網址"=>圖片插入文章

 

* 部落格關鍵字:

   在痞客邦[部落格後台]=>[基本/進階設定]=>[部落格相關設定]=>[部落格關鍵字,例:

tools241,12682,心算星期幾,異空版,Firefox,PotPlayer,WordReader,免費空間]

 

哈部落登錄部落格:

http://funp.com.tw/blogs/

Google登錄部落格:

http://blogsearch.google.com/ping

Google登錄網站:

http://www.google.com/addurl/?hl=zh-TW

 

本文出自: https://tools241.pixnet.net/blog/post/261572942  (內容隨時補充)

 

 

 

 

 

arrow
arrow

    tools241 發表在 痞客邦 留言(11) 人氣()