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

【2018-5-12】

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

 

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

　　

【2017-1-4】

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

 

↓ 文章末「END」之後，多出了１區：「創作者介紹　頭像　版主名字（小無）　網誌名稱（小無的不臘閣）」

2017-001

 

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

2017-003

官網還放１大堆站外廣告～

 

唉，來自立救濟吧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; 去壓～不然效果會無法顯示

 　　　

清除１下內容（反正不用重複設定）：　　　　


#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 {/*右邊灰色 ４個小圖示*/}
.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 
底圖回收利用「版主回覆」的底圖，項目圖的紅十字也是再利用。隱藏右側那４個灰色圖案～

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{ /*右邊灰色 ４個小圖示*/ 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;
寬度有２處要強制覆蓋，因為官方預設是 寬 100% 用相對寬度（繼承上位階寬度 <- 內文寬度 <- 用檢視元素看
官方還有 最大寬度 800px，所以兩個都要蓋過。只蓋１個好像表面上有效，不過保險點比較好，畢竟無法全測。

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
{ /*右邊灰色 ４個小圖示 --- 變成網誌名稱 底下的空白細條*/ display:none !important}
改版前是在右邊的「灰色４個小圖示」，而現在此區 移到網誌名稱下方．官方公告網誌 也是空白的１條，
不過若有公開 g-mail（如接合作文用）或 instagra 之類（如美妝文網誌），則會顯示連結圖示．

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

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

 　　

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

 

註１：查看官方 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　中文註解可能會亂碼就是 <- 印象中用外掛看好像不會？
　　註２：若是 FF 網頁亂碼：右上角３橫槓 -> 更多 -> 文字編碼 -> Unicode，則可看 CSS 的中文註解

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

　

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

　　火狐：FF ：右鍵 -> 檢測元素 -> 右上方的滴管
　　　　　不過點選顏色後～只能自動複製當前的１個色碼，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{ /*右邊灰色 ４個小圖示*/ display:none !important}
.social-link {}
.social-link__icon {}
.social-link:hover .social-link__icon {}　　　

 

 

 

 

 

＊＊♥　　．　　♣　　．　　♦　　．　♠　．　E N D　．　♠　．　　♦　　．　　♣　　．　　♥

 

*

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 小無 的頭像
    小無

    小無的不臘閣 大圖多建議電腦版

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