2017-002  pixnet 網誌前台「創作者介紹」-2018

【2018-5-12】

pixnet 官方前幾天又把這塊改版惹... CSS 更新與記錄在文末。

 

 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

  

【2017-1-4】

如題,今天官方突然更新了網誌前台,在文章末 多出惹「創作者介紹」...官方網誌也沒有公告...
該說是幸好沒有跑框嗎orz 對本人網誌最不順眼的 大概是冒出一區「新細明體」吧orz(平常是微軟黑體
唉~來修下 CSS 吧orz

 

文章末「END」之後,多出了1區:「創作者介紹 頭像 版主名字(小無) 網誌名稱(小無的不臘閣)

2017-001

 

前台變動大事件欸!馬上去官方部落格 http://admin.pixnet.net/blog ...果然(!?)沒有公告orz
是說 PIXNET 在這類事件處理,真的很不像是大公司...(出包的制式罐頭回覆倒是有像orz

2017-003

官網還放1大堆站外廣告~

 

唉,來自立救濟吧orz 首先從研究 CSS 開始。 下圖使用火狐瀏覽器,右鍵檢測元素(好用的功能w

2017-002

 

     

官方預設樣式,大約是這種感覺:

 
#article-main .article-content .author-profile {
    margin: 50px 0;
    font-family: NotoSansCJKtc;
}

#article-main .article-content .author-profile a {
    margin: 0;
    border: 0;
    padding: 0;
    text-decoration: none !important;
}

#article-main .article-content .author-profile__header {
    color: #666;
    line-height: 1;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
}

#article-main .article-content .author-profile__main {
    margin: 35px 70px 0;
    overflow: auto;
}

#article-main .article-content .author-profile__avatar {
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 15px;
    object-fit: cover;
    border-radius: 50%;
}

#article-main .article-content .author-profile__name {
    color: #006ac6;
    font-size: 20px;
    font-weight: 800;
    line-height: 35px;
    letter-spacing: 1px;
}

#article-main .article-content .author-profile__content {
    overflow: auto;
}

#article-main .article-content .social-links {
    float: right;
    overflow: hidden;
}

#article-main .article-content .social-link {
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

#article-main .article-content .social-link__icon {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
}

#article-main .article-content .social-link:hover .social-link__icon {
    transform: translate(0, -30px);
}

#article-main .article-content .author-profile__info {
    display: block;
    display: -webkit-box;
    max-height: 2.5em;
    margin-top: 5px;
    color: #6e7071;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

 

除了整體 CSS 架構以外,重點還有~要知道哪邊官方已經設定@@(要用 !important; 去壓~不然效果會無法顯示

    

清除1下內容(反正不用重複設定):    


#article-main .article-content .author-profile {}
#article-main .article-content .author-profile a {}
#article-main .article-content .author-profile__header {}
#article-main .article-content .author-profile__main {}
#article-main .article-content .author-profile__avatar {}
#article-main .article-content .author-profile__name {}
#article-main .article-content .author-profile__content {}
#article-main .article-content .social-links {}
#article-main .article-content .social-link {}
#article-main .article-content .social-link__icon {}
#article-main .article-content .social-link:hover .social-link__icon {}
#article-main .article-content .author-profile__info {}

     

把 ID 刪掉,只剩 class ,加上註解:    


.author-profile {/*整體*/}
.author-profile a {}
.author-profile__header {/*創作者介紹*/}
.author-profile__main {/*包含 板主名字 部落格名稱*/}
.author-profile__avatar {/*頭像 預設 80 x 80 px*/}

.author-profile__content {/*版主名字 整塊*/ }
.author-profile__name {/*版主名字 文字*/}

.social-links {/*右邊灰色 4個小圖示*/}
.social-link {}
.social-link__icon {}
.social-link:hover .social-link__icon {}

.author-profile__info {/*部落格名稱*/}

   *~~~*~♧~*~♣~*~*~~~

 

比如 /*版主名字 文字*/ 這塊,若只是設定文字大小,則部分文字會被遮住,還會冒出礙眼的卷軸@@;
.author-profile__name { font-size: 60px !important;}

2017-005

 

那是因為官方還有設定/鎖定行高@@
.author-profile__name { font-size: 20px;    line-height: 35px;}

因此這邊還要用 !important 去覆蓋行高設定~如醬:
.author-profile__name { font-size: 60px !important;   line-height: 85px !important; }

2017-004

 

 

最後大約這樣XD 
底圖回收利用「版主回覆」的底圖,項目圖的紅十字也是再利用。隱藏右側那4個灰色圖案~

2017-006

 

版主名字,滑鼠移上時加上變化(原本官方設定是 滑鼠移上時~什麼反應都沒有...不像是超連結@@;

2017-007

 

是說也有點日子沒弄 CSS ,都有點忘了 我網誌常用的這種 超連結設定~不是底線XD;(text-decorationl: underline
反而要先隱藏超連結底線(官方本來就預設隱藏~無論滑鼠有沒移上 
再設定上下邊框(粗細&顏色等 ←顏色可用『發表文章』的文字顏色去找色碼XD

      

上圖還沒修到『創作者介紹』字型,修好後~語法大概是醬(自用所以整理得很隨便XD;): 

/*-----新的 創作者介紹-----*/
.author-profile {/*整體*/ margin: 0px 0 !important; padding: 20px 0;
background: #fff url(https://pic.pimg.tw/smallwu36test/1463253738-4095611093.png) no-repeat left top; }
.author-profile a {}
.author-profile__header {/*創作者介紹*/ margin: 0px 0px 0px 30px !important; padding: 0px 0px 0px 32px;
font-size: 15px !important; font-weight: 700 !important; color: #245e80 !important; line-height: 30px !important;
background: url(http://pic.pimg.tw/smallwu36test/4b82f88429afc.png) top left no-repeat;
font-family:"Georgia","Courier New","Microsoft JhengHei","JhengHei","微軟正黑體","微軟雅黑","Microsoft YaHei","YaHei"; }
.author-profile__main {/*包含 板主名字 部落格名稱*/ margin: 10px 0px 0px 170px !important;
font-family:"Georgia","Courier New","Microsoft JhengHei","JhengHei","微軟正黑體","微軟雅黑","Microsoft YaHei","YaHei";}
.author-profile__avatar {/*頭像 預設 80 x 80 px*/}
.author-profile__content {/*版主名字 整塊*/ }
.author-profile__name {/*版主名字 文字*/ }
a:hover.author-profile__name { border-top:#e18d96 3px solid !important;
border-bottom:#e18d96 3px solid !important ;color: rgb(168, 35, 54) !important; }
.social-links{ /*右邊灰色 4個小圖示*/ display:none !important}
.social-link {}
.social-link__icon {}
.social-link:hover .social-link__icon {}
.author-profile__info {/*部落格名稱*/}

    

   

【2017-01-14】 更新

痞客幫官方竟然就沒通知的~拿掉這塊惹orz 真的很糟糕欸orz 把所有網誌使用者 都當成是白老鼠嗎...orz

現在不少商業行號 電影出版社等,會把官網設在 pixnet,假如多出來的這塊~造成板型破壞
於是廠商只好再花錢或其他成本,請設計師(可能是外包)修改和美化......但不久後這區塊就消失惹廠廠

那個顏色很淺 又不易區分的新版後台,大家都嫌難用~也不修改被普遍批評處(如預設文字是灰色欸orz
打文的上方功能鍵,新版也很難區分~造成打文速度 反而更加下降...等等問題
...乾脆整個打掉重練,再出個新·新版後台算了嘖嘖orz     

   

 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

     

【2018-5-12】

pixnet 官方前幾天又把這塊改版惹... 我猜是因為不久前,pixnet 公告不支援咕狗等其他帳號惹@@
  [公告]2018/5/3起,痞客邦首頁將停止支援 Google、Yahoo、Microsoft 帳號登入服務
唉 總之 這區塊改版,所以前台樣式又跑掉啦orz 

  ---*-----*-----♤-----*-----*---    

不花時間截圖了,以下只是自己的筆記@@ 紀錄修改的地方。
(希望官方不要再改語法了orz 真花時間...本來想打伯妖文說...orz

 

(1) .author-profile {/*整體*/ background: #fff url(https://
pic.pimg.tw/smallwu36test/1463253738-4095611093.png) repeat left top; }
增設底圖重複。因為之前是回收利用:留言區-版主回覆 的底圖,寬度不夠,所以當時設定 不重複 no-repeat
隔一段時間的現在忘了XD;; 還想說為何右邊那麼多空白?是設定寬度限制嗎?還是右 padding 使右邊沒底圖XD;

 

(2) .author-profile__main {/*包含 板主名字 部落格名稱*/
background-color : transparent !important; /*把官方預設的灰色底色 #f6f6f6 覆蓋過去*/
沒有背景
/要強制覆蓋官方預設的灰色~ CSS 要用 background-color : transparent 而非 none (常識XD;)

width: 500px !important; max-width: 500px !important;
寬度有2處要強制覆蓋,因為官方預設是 寬 100% 用相對寬度(繼承上位階寬度 <- 內文寬度 <- 用檢視元素看
官方還有 最大寬度 800px,所以兩個都要蓋過。只蓋1個好像表面上有效,不過保險點比較好,畢竟無法全測。

border:5px dotted #c5e9fd}
因為我把底色取消,於是那個區域變得沒有邊界... 想想加了個邊框。用淺色雙邊框 double 不同粗細好像都怪
大概太密合了吧?所以目前是用點點 dotted,也符合本人內文常用的邊框(點點/虛線 <- 近期較常虛線XD)

 

(3) .author-profile__info {/*部落格名稱*/padding: 20px 0px 0px 0px !important;}
上右下左(順時針),把「網誌名稱」加大上邊界。因為覺得和「板主名稱」垂直距離太近~

(4) #article-main .author-profile .author-profile__subscribe
{ border-left: 5px dotted #c5e9fd  !important;} 左邊「板主名稱/網誌名稱」與右邊「訂閱按鈕」,
中間那個垂直槓。官方預設灰色直線條(因為官方底色 預設灰色)

而本人網誌 基本色調藍色(點綴用暗紅),所以也把它改成藍色點點。和上面 (2) 的點點方框相同。
標籤看起來很長,是因為直接用瀏覽器 查看官方 CSS 樣式(註1),然後複製貼上 ID 和 class XD

 

(5) .social-links
{ /*右邊灰色 4個小圖示 --- 變成網誌名稱 底下的空白細條*/ display:none !important}
改版前是在右邊的「灰色4個小圖示」,而現在此區 移到網誌名稱下方.官方公告網誌 也是空白的1條,
不過若有公開 g-mail(如接合作文用)或 instagra 之類(如美妝文網誌),則會顯示連結圖示

但若如同官方那樣,「不公開任何 其他站外連結」,則看起都會是空白的1條...
覺得影響 垂直置中的協調平衡(下方會變成空白太多/太寬),所以我就把它隱藏了@@

註:現在右邊是「 + 關注 」。標籤:「.subscribe-btn」,功能類似以前的加朋友 or 只追蹤之類.
若有登入,於自己的網誌,會看不到右邊藍色「關注」那個按鍵。

   

pixnet 網誌前台「創作者介紹」-2018

 

註1:查看官方 CSS 設定  

  現在瀏覽器越來越聰明惹,不用安裝什麼網頁設計師火狐外掛,也不用什麼CSS編輯器
  直接右鍵,Chrome 和 FF 幾乎都有 相似的檢視 CSS 功能@@
  總之,這邊簡述 Chrome 查看官方 CSS 設定的方法 :

❶ 對著想看的網頁元素 按右鍵 -> 檢查(N)  
  下方或右邊,就會出現網頁元素(火狐預設下方,但可以簡單的調到右邊)
  框架上方是 HTML,下左是 CSS(styles),下右是區塊/邊框/邊界寬度計算 <- 色彩分區很直覺便利

❷ 若是用 chrome,對著 css 的 ID 右邊有底線的超連結,右鍵複製(右鍵選項可能都是英文)
  如 #article-main    author-info.css...6ce33710b12:99 <- 是超聯結,直接點 面板會跳掉
     .author-profile .author-profile__subscribe {
        position: relative; ...

❸  同理,有在手動修 pixnet blog CSS 的人一定知道,normal.css?v=... 這個是自家網誌的設定XD
  同理的同理,也可以用來看 別人家的設定XD 中文註解可能會亂碼就是 <- 印象中用外掛看好像不會?
  註2:若是 FF 網頁亂碼:右上角3橫槓 -> 更多 -> 文字編碼 -> Unicode,則可看 CSS 的中文註解

❹ 因為存檔 CSS 後,用 F5 重新整理,若有開這個檢視元素~無論 Chrome 和 FF 重新整理都會很 LAG
  所以用 F12 快速關掉。(之後再用右鍵打開 <- 較能快速&精確的抓到,要檢視的元素位置&資訊

 

註3:【選顏色/直接選取網頁顏色】Chrome 從 css 那塊,點色碼前面的 正方型顏色預覽。
  chrome 功能較多,可以從漸層圖慢慢修改顏色,或切換 16 進位(HEX)/RGB/HSL 表示法

  火狐:FF :右鍵 -> 檢測元素 -> 右上方的滴管
     不過點選顏色後~只能自動複製當前的1個色碼,HEX 表示(如 #000000)。

     

官方預設樣式:整塊灰底,灰色直線分隔線,左邊藍色超連結文字&灰色網誌名稱,右邊藍色按鈕

pixnet 網誌前台「創作者介紹」區塊 CSS 架構&修改

   

目前自己網誌樣式用的~大約是醬:           


/*-----新的 創作者介紹-----*/
.author-profile {/*整體*/ margin: 0px 0 !important; padding: 20px 0;
background: #fff url(https://pic.pimg.tw/smallwu36test/1463253738-4095611093.png) repeat left top; }
/*增設底圖重複*/
.author-profile a {}
.author-profile__header {/*創作者介紹*/ margin: 0px 0px 0px 30px !important;
padding: 0px 0px 0px 32px; font-size: 15px !important; font-weight: 700 !important; color: #245e80 !important; line-height: 30px !important;
background: url(http://pic.pimg.tw/smallwu36test/4b82f88429afc.png) top left no-repeat;
font-family:"Georgia","Courier New","Microsoft JhengHei","JhengHei","微軟正黑體","微軟雅黑","Microsoft YaHei","YaHei"; }

.author-profile__main {/*包含 板主名字 部落格名稱*/ margin: 10px 0px 0px 100px !important;
font-family:"Georgia","Courier New","Microsoft JhengHei","JhengHei","微軟正黑體","微軟雅黑","Microsoft YaHei","YaHei";
background-color : transparent !important; /*把官方預設的灰色底色 #f6f6f6 覆蓋過去*/
width: 500px !important; max-width: 500px !important;
border:5px dotted #c5e9fd}

.author-profile__avatar {/*頭像 預設 80 x 80 px*/}
.author-profile__content {/*版主名字 整塊*/ }
.author-profile__name {/*版主名字 文字*/ }
a:hover.author-profile__name { border-top:#e18d96 3px solid !important;
border-bottom:#e18d96 3px solid !important ;color: rgb(168, 35, 54) !important; }
.author-profile__info {/*部落格名稱*/padding: 20px 0px 0px 0px !important;}

#article-main .author-profile .author-profile__subscribe { border-left: 5px dotted #c5e9fd  !important;}

.social-links{ /*右邊灰色 4個小圖示*/ display:none !important}
.social-link {}
.social-link__icon {}
.social-link:hover .social-link__icon {}   

 

 

 

 

 

**♥  .  ♣  .  ♦  . ♠ . E N D . ♠ .  ♦  .  ♣  .  ♥

 

*

創作者介紹
創作者 小無 的頭像
小無

小無的不臘閣

小無 發表在 痞客邦 留言(5) 人氣()


留言列表 (5)

發表留言
  • 小無
  • 官方又把前台這區塊 拿出來惹XD;;;
    到底在幹嘛啦XD;;;(還好我還沒刪 CSS XD;;;
  • 悄悄話
  • 克萊兒♥
  • 哈哈哈成功了!!!!
    謝謝你 ~~~:)

    話說你提到的中階高階問題
    我倒是沒注意到哈哈
    當時也是參考一些網路的教學自己試著修改
    完全沒注意到是因為這樣有跑框的狀況啊!!!><

    那時匆忙地留下留言 現在看才發現表達很不清楚:((
    真是不好意思!!!
    (至於悄悄話 ...當時沒想太多欸哈 可能想說問這種初階問題有點不太好意思公開吧 !!!:P
  • 恭喜~不客氣w

    因為我也知道網誌樣式壞掉,身為設計者會很在意,所以馬上處理~
    但一檢測元素~發現是跑框問題@@; 
    而因為是他人樣式,勢必要先整個 css 順過1次~去找問題
    (怎麼看他人整個網誌樣式CSS~ 就題外話了XD)

    然後再判斷 整體修改比較好(設定衝突的 .article-content 和 #content )
    還是救急的方式就好(也就是只在 .social-links 加 padding 那個XD)
    ...然後再到自家測試用網誌,貼上您的整個網誌樣式CSS
    實際反覆測試成效(否則建議的無效 豈不白癡XD)


    花了些時間終於差不多OK,回覆時再反覆看您的留言~(免得我誤會問題)
    不禁有點在意原文一句謝謝都沒有...而覺得自己怎麼有點像工具人(炸
    當然也看得出來 應該只是年輕人打字比較口語啦XD(即使是對陌生人XD)

    公開/隱藏,是想說若他人有相似疑惑,或許可以靠搜尋自己解決@@?
    (還有為自己發言負責~公開留言會比較謹慎...包含我回覆也是XD)
    不過說樣式問題的根本,似乎又回到 如何抓CSS錯~@@;
    所以公開/隱藏啥的,也或許沒差吧w


    啊當然~也包含本人語法實力不足,無法用看的就解決XD;
    ...打起來似乎變成多字抱怨XD;; 不用再回覆沒關係XD;;;

    小無 於 2017/07/11 08:45 回覆

  • 克萊兒♥
  • 哈哈謝謝你的用心回覆!!!!
    當時留言時比較心急該注意的禮貌都忽略掉了
    真的十分抱歉
    也很謝謝你直接告知我!!!!!! :)

    總之非常謝謝你的協助 !!:)
  • 小池野夏
  • 謝謝教學超實用的!
  • 很高興對您有幫助!

    小無 於 2018/08/20 13:43 回覆