讓新版不再令人「搖搖頭」 - （修改文字區寬度）

 

舊版每行的字數約35，與word初始版面或一般書本大概相同，新版竟然寬到46字，讓人看了直搖頭啊！眼珠與脖子不停左右轉，看久會酸的！設計者顯然沒考慮到這一點……

本文根據 電小二 下列貼文，分享成功改造的實例。

玩模版／我是文字型創作者，文章內容想改窄版？

 

註：本部落格將潑墨風格版面的文字寬度改窄，至少每行的字數與舊版相同，不過其他風格的版面，我也不清楚是否相同的改法。

1. 到新版
2. 管理中心
3. 管理選單- 模版及欄位元件- （模版設定-完全自定）

4. 編輯css  的框框內要搜尋出四個地方，將寬度改為600（width: 600px;）

這四處分別為：
#article_list_head {
#article_list_body {
#article_show {
#response dt {

（是啥意思我也不大清楚，搜尋出來就是了……）
這四處括弧{ }內要有 width: 600px; 的字眼。

 註：我故意改成601，日後要調整，用IE搜尋601會比較快。以下將我更改時的整段一大串全貼出來，讓大家心裡有個底，這四處紅字部分照著改，大約過二十分鐘後就好了。（後兩處從此文下面找起會快一些，超長的……）

 

/* 文章列表 */
#article_list_body #structure dt {
 padding: 5px 0px;

}
#article_list {
 display: block;
 background: #FFF;
}
#article_list_head {
 width: 601px;
 height: 46px;
 display: block;
 position:absolute;
 z-index: 99;
 padding:0px 10px;
}
#article_list_head.panel {
 border-bottom: 1px solid #ccc;
}
#article_list_head a {
 padding: 10px 20px 10px 0;
 color: #333;
 display: block;
 float: left;
}
#article_list_head a:hover ,
#article_list_head .on
{
 color: #1c388c;
}

#article_list_body {
 padding: 45px 0px 0px;
width: 601px;
}
#article_list_body dl > dt { padding: 20px 10px; overflow: hidden; }

#article_list_head_link {
 float: left;
}

#article_list_head_ctrl_bar {
 padding: 8px 6px 0px 0px;
 float: right;
}
#article_list_head_ctrl_bar div {
 border-top: 3px solid #eee;
 border-bottom: 3px solid #eee;
 background: #eee;
}
#article_list_head_ctrl_bar a {
 text-decoration: none;
 float: none;
 display: block;
}
#article_list_head_ctrl_bar div:hover {
 background: #fff;
}

 

#article_list_head_ctrl_bar dl {
 display: none;
}
#article_list_head_ctrl_bar div:hover dl {
 display: block;
}
#article_list_head_ctrl_bar_date:hover #article_list_head_ctrl_bar_date_all{
 display: block;
}
#article_list_head_ctrl_bar div:hover dt a {
 border-top: 1px solid #eee;
}
#article_list_head_ctrl_bar_ob {
 float: left;
 border: 3px solid #eee;
}
#article_list_head_ctrl_bar_ob a {
 background: url(https://g.udn.com.tw/community/img/ugc_2011/icons.png) no-repeat 9px -51px;
}
#article_list_head_ctrl_bar_ob dt a:hover {
 background: #4f570e url(https://g.udn.com.tw/community/img/ugc_2011/icons.png) no-repeat 10px -141px;
 color: #fff;
}
#article_list_head_ctrl_bar_ob a {
 padding: 0px 8px 0px 18px;
}

 

 

/* 側欄 */
#sidebar hr ,
#share_body hr
{
 border-bottom: 1px dotted #ddd;
 border-top-style: none;
 border-right-style: none;
 border-left-style: none;
 height: 1px;
}

 

/* 個人檔案 */
div#profile {
 width: 240px;
 position: relative; /* 相對定位 */
 overflow: visible;
}
#profile_body a {
 text-decoration: none;
 color: #494A31;
}
#profile_body a:hover {
 text-decoration: underline;
}
#profile dl {
 float: right;
}
#profile dt a {
    background: url("https://g.udn.com.tw/community/img/ugc_2011/icons.png") no-repeat scroll -5px -1168px;
    display: block;
    padding: 0px 60px 0px 13px;
 color: #444;
}
#profile dt a:hover {
 background: url("https://g.udn.com.tw/community/img/ugc_2011/icons.png") no-repeat scroll left -1168px;
 text-decoration: none;
  color: #1c388c;
}

/* 個人小檔案 */
#procount:hover span {
 display: inline-block;
}
#procount_body {
 color: #aaa;
}
#procount_body span {
 color: #444;
 display: inline-block;
 width: 70px;
}
#procount_body b {
 color: #444;
}

/* QR-Code */
#qrcode {
}

/* 我建立的投票 */
#myvote:hover span {
 display: inline-block;
}

/* 我的城市 */
#mycity {
 overflow: hidden;
}
#mycity:hover span {
 display: inline-block;
}
#mycity_body {
 width: 244px;
 padding: 0px 0px 5px;
 border-bottom: 1px solid #ddd;
 overflow: hidden;
}
#mycity_body a {
 display: block;
 margin: 0px 4px 6px 0px;
 float: left;
 height: 57px;
 width: 57px;
 overflow: hidden;
}
#mycity_body a img {
 width: 57px;
}

/* 部落格推薦人 */
#respected {
 overflow: hidden;
}
#respected:hover span {
 display: inline-block;
}
#respected_body {
 width: 244px;
 padding: 0px 0px 5px;

 overflow: hidden;
}
#respected_body a {
 display: block;
 margin: 0px 4px 6px 0px;
 float: left;
 height: 57px;
 width: 57px;
 overflow: hidden;
}
#respected_body a img {
 width: 57px;
}

/* 我的朋友 */
#myfriend {
 overflow: hidden;
}
#myfriend:hover span {
 display: inline-block;
}
#myfriend_body {
 width: 244px;
 padding: 0px 0px 5px;
 border-bottom: 1px solid #ddd;
 overflow: hidden;
}
#myfriend_body a {
 display: block;
 margin: 0px 4px 6px 0px;
 float: left;
 height: 57px;
 width: 57px;
 overflow: hidden;
}
#myfriend_body a img {
 width: 57px;
}

/* 誰來我家 */
#comehome {
 overflow: hidden;
}
#comehome:hover span {
 display: inline-block;
}
#comehome_body {
 width: 244px;
 padding: 0px 0px 5px;
 border-bottom: 1px solid #ddd;
 overflow: hidden;
}
#comehome_body a {
 display: block;
 margin: 0px 4px 6px 0px;
 float: left;
 height: 57px;
 width: 57px;
 overflow: hidden;
}
#comehome_body a img {
 width: 57px;
}

/* 我去誰家 */
#gohome {
 overflow: hidden;
}
#gohome:hover span {
 display: inline-block;
}
#gohome_body {
 width: 244px;
 padding: 0px 0px 5px;
 border-bottom: 1px solid #ddd;
 overflow: hidden;
}
#gohome_body a {
 display: block;
 margin: 0px 4px 6px 0px;
 float: left;
 height: 57px;
 width: 57px;
 overflow: hidden;
}
#gohome_body a img {
 width: 57px;
}

/* 文章推薦人 */
#recommend {
 overflow: hidden;
}
#recommend_head {
    overflow: hidden;
}
#recommend_body a {
 display: block;
 margin: 0px 5px 0px 0px;
 float: left;
 height: 64px;
 width: 64px;
 overflow: hidden;
 padding: 0px 0px 6px;
}
#recommend_body a img {
 width: 64px;
}

/* 自訂欄位 */
#custom {
 padding: 0px 0px 20px;
}

/* RSS及聯播 */
#rss_btn {
 font-size: 13px;
 color: #FFF;
 background: #f2853d;
 padding: 1px 5px;
 border: 1px solid #ed6b2a;
}
#b2b_btn {
 font-size: 13px;
 color: #FFF;
 background: #7247b3;
 padding: 1px 5px;
 border: 1px solid #59329e;
}
#rssb2b_body a {
 margin: 0px 5px 0px 0px;
 float: left;
}

/* Blogs聯播 */ 
#network .body {
 padding: 0 0px 0 2px !important;;
}
#udnblogs_uh_white {
    padding: 0 !important;;
}
#udnblogs_uh_white UL {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}
#udnblogs_uh_white UL {
    list-style: none;
}
li#udn_logo_uh_white > a ,
#blogs_name_uh_white > a
{
  padding: 0 !important;
 background-image:none;
}
#udnblogs_uh_white UL A {
 color:#444 !important;
}
#udnblogs_uh_white UL A:hover {
 color:#1C388C !important;
}
#blogs_name_uh_white A {
 display: none !important;
}
#udnblogs_uh_white .udn_logo_uh_white A {
 list-style-image: none !important;
 background: url("http://act.udn.com/images/logo_small.gif") no-repeat scroll 150px 5px;
}
/* /Blogs聯播 */

 

 

/* 我的閱讀訂閱 */
#mysubscribe_body div {
 text-align:left;
 color: #999;
 line-height: 150%;
}
#mysubscribe_body a {
 padding: 0px 0px 10px 13px;
 background-position: -5px -1173px;
}
#mysubscribe_body a:hover {
 background-position: 0px -1173px;
}

/* 搜尋 */
#search {
}
.search_main_about {
 margin:0 0 -1px;
 padding:10px 0;
 border-bottom: 1px solid #ddd;
}
#search span {
 display: none;
}
#search .input_box {
 font-size: 15px;
 color: #333;
 height: 26px;
 width: 199px;
 border-right-style: none;
 border-color: #ddd;
 padding: 0px 0px 0px 5px;
 float: left;
 line-height: 30px;
}

#search_subme ,
#search button
{
 float: left;
 height: 28px;
 width: 35px;
 display: block;
 overflow: hidden;
 background: url(https://g.udn.com.tw/community/img/ugc_2011/icons.png) no-repeat 8px -176px;
 text-indent: -9999px;
 border-top: 1px solid #ddd;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 margin: 0;
 padding: 0;
 border-left-style: none;
}
#search_subme:hover ,
#search button:hover
{
 background-position: 8px -206px;
}

 

/* 搜尋結果 */
#search_prompt ul ,
#search_prompt li
{
 padding:0;
 margin:0;
}

#search_prompt img ,
.search_main_article_list_img img
{
 height: auto !important;
 max-height: 60px;
 max-width: 60px;
}

#search_prompt li ,
.search_main_article_list li ,
.search_main_photo_list
{
 float: left;
 position: relative;
 width: 716px;
 margin: 0px;
 padding: 0px;
 display: block;
 border-top: 1px dotted #ddd;
 overflow: hidden;
 padding: 10px 6px;
 position: relative;
}
#search_prompt .article_title {
 color: #000000;
 font: bold 16px/150% "微軟正黑體","Microsoft JhengHei","微软雅黑体","Microsoft YaHei","新細明體",PMingLiU,"新宋

体",NSimSun,"Apple LiGothic Medium",arial,Geneva,sans-serif;
 letter-spacing: 1px;
 display: block;
 left: 75px;
 position: absolute;
 top: 35px;
 white-space: nowrap;
}
#search_prompt li img ,
.search_main_article_list_img ,
.search_main_photo_list_img
{
    display: block;
    float: left;
    height: 60px;
    margin: 0 10px 0 0;
    overflow: hidden;
    position: relative;
    width: 60px;
}

#search_prompt h1 {
 color: #000000;
 font: bold 18px/150% "微軟正黑體","Microsoft JhengHei","微软雅黑体","Microsoft YaHei","新細明體",PMingLiU,"新宋

体",NSimSun,"Apple LiGothic Medium",arial,Geneva,sans-serif;
 display: block;
 left: 78px;
 position: absolute;
 top: 25px;
 white-space: nowrap;
}
.search_main_article_list h4 ,
.search_main_photo_list a
{
 margin:0;
 color: #000000;
 font: bold 18px/150% "微軟正黑體","Microsoft JhengHei","微软雅黑体","Microsoft YaHei","新細明體",PMingLiU,"新宋

体",NSimSun,"Apple LiGothic Medium",arial,Geneva,sans-serif;
 display: block;
 left: 78px;
 position: absolute;
 top: 16px;
 white-space: nowrap;
}
.search_main_photo_list a {
 color: #1C388C;
 margin:-10px 0 0;
}
#search_prompt h3 {
    left: 78px;
    position: absolute;
    top: 0px;
  color: #444444;
    font: 13px/200% arial,"新細明體",PMingLiU,"新宋体",NSimSun,"Apple LiGothic Medium",Geneva,sans-serif;
}
.search_main_article_list h5 {
 margin:0;
 left: 78px;
 position: absolute;
 top: 40px;
 color: #444444;
 font: 13px/200% arial,"新細明體",PMingLiU,"新宋体",NSimSun,"Apple LiGothic Medium",Geneva,sans-serif;
}
/* /搜尋結果 */

 

 

/* 標籤雲 */
#tags_body {
 text-align:justify;
 text-justify:inter-ideograph;

 padding: 0px 0px 5px;

 overflow: hidden;
}
#tags_body a {
 margin: 0px 10px 0px 0px;
 color: #444;
 display: inline-block;
}
#tags_body a:hover{
 color: #1c388c;
}

/* 我加入的Blogs */
#myblogs dt {
 margin: 5px 0px;
}

 

/* 單一文章頁 */
#info {
 padding: 20px 6px 0px 0px;
}
#info dt {
 padding: 5px 10px;
 background: #fffceb;
 margin: 0px 0px 3px;
 border-top: 1px solid #f2e8b6;
 border-bottom: 1px solid #f2e8b6;
 float: none;
 overflow: hidden;
}
#info span {
 float: left;
 color: #333;
}
#info .ctrl {
 float: right;
 display: none;
 color: #e5d98a;
}
#info dt:hover .ctrl {
 display: block;
}
#article_show {
 text-align:justify;
 text-justify:inter-ideograph;
 padding: 20px 10px 10px 10px;
width:601px;
}
body.print #article_show {
 padding: 20px 0px 10px 0;
}
#article_show_content {
 font-size: 15px;
 color: #000;
 padding: 30px 0px;
 clear: both;
    line-height: 150%;
 letter-spacing: 2px;
}

#cc {
 float: left;
}

#also {
 border-top: 1px solid #ddd;
 padding: 30px 10px 10px;
}
#also a {
 float: none;
}
#also span {
 color: #CCC;
}
#also #also_all {
 float: left;
 padding: 0px 30px 0px 0px;
}
#also #also_my {
}

#tools {
 padding: 30px 6px 10px 0;
}

#tools_body {
 font-size: 15px;
 float: right;
}
#tools_body a {
 display: inline-block;
/* overflow: hidden;*/
 margin: 0px 0px 0px 20px;
 background: url(https://g.udn.com.tw/community/img/ugc_2011/icons.png) no-repeat left -302px;
 float: left;
 padding: 0px 0px 0px 18px;
}
#tools .to_response a {
 background-position: left -271px;
}
#tools .recommend {
 position: relative;
 display: inline-block;
 float: left;
}
#tools .recommend a {
 background-position: left -301px;
}
#tools .quote {
 position: relative;
 display: inline-block;
 float: left;
}
#tools .quote a {
 background-position: left -412px;
}
#tools .quote dl {
 position: absolute;
 left: 20px;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-left: 1px solid #ccc;
 bottom: 22px;
 display: none;
}
#tools .quote:hover dl {
 display: block;
}
#tools .quote dt a {
 margin: 0px;
 white-space: nowrap;
 background: #FFF;
 padding: 2px 10px;
 border-bottom: 1px solid #ccc;
 color: #333;
 text-decoration: none;
 display: block;
 float: none;
 clear: both;
}
#tools .quote dt a:hover {
 background: #f2f2f2;
 color: #000;
}
#tools .forward {
 background-position: left -442px;
}
#tools .print {
 background-position: left -513px;
}
#tools .favorite {
 background-position: left -545px;
}

 

/* 你可能會有興趣的文章 */
#interest {
 overflow: hidden;
 padding: 20px 0px 30px;
}
#interest_head {
 padding: 10px 0px 5px;
 font: 16px/200% "微軟正黑體", "Microsoft JhengHei", "微软雅黑体", "Microsoft YaHei", "新細明體", PMingLiU, "新宋体",

NSimSun, "Apple LiGothic Medium", arial, Geneva, sans-serif;
 font-weight: bold;
 color: #505139;
}
#interest_body  {
 padding: 0px 0px 30px;
 overflow: hidden;
 width: 738px;
}
#interest_body dt {
 float: left;
 width: 113px;
 margin: 0px 10px 0px 0px;
 line-height: 150%;
}
#interest_body.only_title dt {
 float: none;
 width: auto;
}
#interest_body.only_title a {
 border-bottom: 1px dotted #eee;
 padding: 5px 0px 2px;
 display: block;
 text-decoration: none;
}
#interest_body.only_title a:hover {
 background: #F5F5F5;
}
#interest_body img {
 width: 113px;
}
#interest_body span {
 width: 113px;
 display: block;
 height: 113px;
 overflow: hidden;
 background: #FFF;
 clear: both;
 margin: 0px 0px 5px;
}

 

 

 

/* 迴響 */
#response {
 overflow: hidden;
 padding: 40px 0px 0px;
}

#response_body div{
font-size: 15px;
letter-spacing: 2px;
}

#response_foot div {
 font-size: 13px;
}

#response_head {
 position: relative;
}

.manage {
 position: absolute;
 top: 12px;
 right: 6px;
 background: url(https://g.udn.com.tw/community/img/ugc_2011/icons.png) no-repeat left -479px;
 display: block;
 float: right;
 height: 25px;
 width: 24px;
 overflow: hidden;
 text-indent: -999px;
}
.manage:hover {
 background-position: left -234px;
}
#response dt { padding: 20px 10px; border-top: 1px dotted #ccc; width: 601px; /* 針對特殊內容，必要時出現捲軸 */
overflow: auto; position: relative; }