發問時間: 電腦與網際網路程式設計 · 6 年前

yam天空部落格版面問題

請問各位大大:

  之前我的部落格是yahoo的,結束之後搬到yam來, 結果yam版面寬度的關係,讓我之前在yahoo文章的橫式照片被切掉1/3。

  而yam部落格提供三種尺寸照片供上傳(600 x 600、800 x 800、1024 x 1024),為了讓照片能整張呈現,橫式的照片只限上傳600 x 600,我也去問過客服部版面能否改寬?他們回說目前標準的版面只適合放600 x 600,很多人會透過修改css的部份去調整版面的寬度。

  也就是說我要自己去修改css,但問題這方面我根本就不懂,想請教各位大大能否教我如何修改呢?最大的寬度能改到多寬呢?越詳細越好,最好是有改好的範本讓我抄。

  感謝各位,拜託了~

已更新項目:

我的CSS如下,拜託了,謝謝。(因為最多只能發表300個字,所以分批貼上)

@charset utf-8;

/* --------------------------------------

* sky_new

* --------------------------------------

*/

/*拉霸設定 HTML{

SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #789ABB; SCROLLBAR-SHADOW-COLOR: #789ABB; SCROLLBAR-3DLIGHT-COLOR:

2 個已更新項目:

: #ffffff; SCROLLBAR-ARROW-COLOR: #789ABB; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

}*/

A:link

{

COLOR: #789ABB; TEXT-DECORATION: none;

}

A:visited

{

COLOR: #78AEBB; TEXT-DECORATION: none;

}

A:hover

{

3 個已更新項目:

COLOR: #31608C; BORDER-BOTTOM: #789ABB 1px dotted; TEXT-DECORATION: none;

}

A:active

{

COLOR: #789ABB; TEXT-DECORATION: none;

}

hr

{

COLOR: #789ABB; HEIGHT: 1px;

}

BODY

{

BACKGROUND: #fff repeat-x;

MARGIN: 0px;

COLOR: #666666;

4 個已更新項目:

FONT-FAMILY: Verdana, Arial, Georgia, Helvetica, sans-serif;

FONT-SIZE: 11px;

letter-spacing:0.05em;

}

A IMG

{

color:#CCCCCC;

BORDER-TOP-WIDTH: 0px ;

BORDER-LEFT-WIDTH: 0px ;

BORDER-BOTTOM-WIDTH: 0px ;

BORDER-RIGHT-WIDTH: 0px ;

BACKGROUND: #fff;

PADDING-RIGHT: 3px;

5 個已更新項目:

PADDING-LEFT: 3px;

PADDING-BOTTOM: 3px;

PADDING-TOP: 3px;

}

IMG.profile

{

BORDER-TOP-WIDTH: 0px;

BORDER-LEFT-WIDTH: 0px;

BORDER-BOTTOM-WIDTH: 0px;

MARGIN-BOTTOM: 5px;

BORDER-RIGHT-WIDTH: 0px;

}

/*#mainFrame|部落格整體框架設定*/

#mainFrame {

6 個已更新項目:

BACKGROUND: url(http://pics.yamedia.tw/themes/sky_new/images/mainb... transparent repeat-y left top;

MARGIN: 0px auto;

WIDTH: 960px;

POSITION: relative;

TEXT-ALIGN: left;

}

/* topbar */

#topbar{

top: 7px;

z-index: 10;

color: #789ABB;

width: 150px;

float: left;

7 個已更新項目:

padding-left: 35px;

}

#companyBar A

{

COLOR: #789ABB;

BACKGROUND: none transparent scroll repeat 0% 0%;

}

#companyBar SPAN.logo

{

display:none;

}

#companyBar A:link

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

#companyBar A:visited

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

8 個已更新項目:

#companyBar A:hover

{

COLOR: #31608C

TEXT-DECORATION: none;

}

#companyBar A:active

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

#adText

{

position: absolute;

top: 8px;

left: 204px;

width: auto;

}

#adText a

{

color: #000;

}

#commend{

width:180px;

float: right;

9 個已更新項目:

text-align: center;

color: #789ABB;

}

#linkLogin {

float:right;

position: relative;

top: 7px;

display: block;

font: #789ABB;

}

#linkLogin A

{

COLOR: #789ABB;

BACKGROUND: none transparent scroll repeat 0% 0%;

}

#linkLogin A:link

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

10 個已更新項目:

#linkLogin A:visited

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

#linkLogin A:hover

{

COLOR: #31608C;

TEXT-DECORATION: none;

}

#linkLogin A:active

{

COLOR: #789ABB;

TEXT-DECORATION: none;

}

/* topbar end */

/* banner|上方banner設定*/

#banner {

11 個已更新項目:

BORDER-LEFT: medium none;

WIDTH: 960px;

BORDER-BOTTOM: medium none;

HEIGHT: 148px;

background-color: #ffffff;

background-image: url(http://pics.yamedia.tw/themes/sky_new/images/banne...

background-repeat: no-repeat;

background-position: right top;

}

12 個已更新項目:

#banner a:link,

#banner a:visited {

color: #fff;

text-decoration: none;

}

#banner a:hover,

#banner a:active {

color: #57453E;

}

h1 {

FONT-SIZE: 24px;

text-align:left;

left:50px;

WIDTH: 500px;

COLOR: #FFF;

FONT-FAMILY: Arial Black;

POSITION: absolute;

TOP: 60px;

LETTER-SPACING:0.03em;

13 個已更新項目:

LINE-HEIGHT: 120%;

height: 80px;

}

h1 A

{

COLOR: #000;

}

h2 {

PADDING-LEFT: 100px;

FONT-SIZE: 11px;

WIDTH: 780px;

BORDER-LEFT: #a3cbc5 0px solid;

COLOR: #DDF1FF;

LINE-HEIGHT: 170%;

text-align:left;

FONT-FAMILY: Georgia, Verdana,Helvetica, Arial,sans-serif;

14 個已更新項目:

POSITION: absolute;

TOP: 100px;

}

/* banner end */

/* navBar|選擇頻道 */

#navBar

{

padding-LEFT: 30px;

WIDTH: 876px;

LETTER-SPACING: 0.1em;

POSITION: absolute;

TOP: 150px;

LINE-HEIGHT: 180%;

}

#navBar A:link

{

15 個已更新項目:

color:#789ABB;

MARGIN-RIGHT: 0px;

PADDING-LEFT:5px;

PADDING-right:2px;

PADDING-top:3px;

PADDING-bottom:3px;

LETTER-SPACING: 4px;

}

#navBar A:visited

{

color:#789ABB;

MARGIN-RIGHT: 0px;

PADDING-LEFT:5px;

PADDING-right:2px;

PADDING-top:3px;

16 個已更新項目:

PADDING-bottom:3px;

LETTER-SPACING: 4px;

}

#navBar A:hover

{

MARGIN-RIGHT: 0px;

PADDING-LEFT:5px;

PADDING-right:2px;

PADDING-top:3px;

PADDING-bottom:3px;

LETTER-SPACING: 4px;

color:#31608C;

}

17 個已更新項目:

#navBar A:active

{

color:#789ABB; MARGIN-RIGHT: 0px; PADDING-LEFT:5px;PADDING-right:2px; PADDING-top:3px; PADDING-bottom:3px; LETTER-SPACING: 4px;

}

/* navBar end */

/* contentBlock|中間大區塊設定 */

#contentBlock

{

18 個已更新項目:

BACKGROUND: url(http://pics.yamedia.tw/themes/sky_new/images/mainb... transparent repeat-y left top;

WIDTH: 960px;

TEXT-ALIGN: left;

padding-top:12px;

height:100%;

}

/* MainSide |旁邊大區塊設定*/

#MainSide

{

19 個已更新項目:

BORDER-RIGHT: medium none;

PADDING-RIGHT: 20px;

BORDER-TOP: medium none;

margin-LEFT: 0px;

FONT-SIZE: 12px;

Z-INDEX: 2;

BORDER-LEFT: medium none;

WIDTH: 190px;

COLOR: #FF6600;

LINE-HEIGHT: 1.4em;

PADDING-top: 9px;

PADDING-bottom: 20px;

BORDER-BOTTOM: medium none;

float: right;

2 個解答

評分
  • 囧囧
    Lv 4
    6 年前
    最佳解答

    建議你把你所用的CSS貼上來,方便我與網友來教你。

    謝謝~

    2014-06-24 23:21:26 補充:

    你是用預設的樣式?

    你那個背景圖是一體成形

    改了寬度,背景就不能用了

    所以要拉寬,要連背景圖也要一起改

    2014-06-25 09:55:26 補充:

    你好~

    1.我的天空部落>管理介面

    圖片參考:https://s.yimg.com/rk/AF03332433/o/1544424622.jpg

    2.點樣板設定

    圖片參考:https://s.yimg.com/rk/AF03332433/o/478198622.jpg

    3.可預覽及套用該樣式

    圖片參考:https://s.yimg.com/rk/AF03332433/o/365113638.jpg

    4.點擊套用之後會跳出視窗,請按確定

    圖片參考:https://s.yimg.com/rk/AF03332433/o/1663221608.jpg

    5.回到自己的部落格查看

    圖片參考:https://s.yimg.com/rk/AF03332433/o/1943764569.jpg

    如果可選的樣式太少

    可以上網Gooogle搜尋 關鍵字 "YAM 天空 部落格 樣式" 或者 "YAM 天空 樣式" 或者"YAM 天空 部落格 css"等等

    如果要自己有能力改

    要學會HTML+CSS

    雖然網路很多教學

    建議去買本書或去圖書館看,這樣學習會比較快

    備註:

    你可以選你自己喜歡的樣式

    把CSS語法放到"文字檔"裡,再傳給我

    我有時間會幫你改寬度

    2014-06-26 00:03:15 補充:

    因為寬度在這裡也不好教

    不如去買本書學習

    所以我直接幫你改比較快

    就你挑一個我幫你改

    另外文字檔就是文字文件

    在桌面>右鍵>新增>文字文件

    是一個TXT檔

    2014-06-27 00:58:59 補充:

    可以寄到我的信箱,夾帶檔案方式

    信箱: jimmy010679@yahoo.com.tw

    或用雲端硬碟也可

    例如像Google Drive、OneDrive

    但要開啟共用、分享

    2014-06-27 00:59:03 補充:

    可以寄到我的信箱,夾帶檔案方式

    信箱: jimmy010679@yahoo.com.tw

    或用雲端硬碟也可

    例如像Google Drive、OneDrive

    但要開啟共用、分享

    2014-06-27 10:02:13 補充:

    另外我發現了一個盲點

    你插入圖片都是用相簿圖片插入對不對?

    你說只能選擇(600 x 600、800 x 800、1024 x 1024)

    其實只要在編輯文章時,就可以解決這個問題了

    在發表新網誌,不是有個文章編輯區

    方法一:方便快速

    方便快速點擊圖片,圖片會反藍

    再點影像按鈕,請查看附件圖片1

    會跳出小視窗可設定圖片寬度,在預覽有圖片代表選擇成功

    高度會自動比例判斷,請查看附件圖片2

    2014-06-27 10:02:24 補充:

    方法二:手動輸入方式

    有個原始碼按鈕,請看附件的圖片3、圖片4

    原本的語法

    可設定圖片的大小 width 是高度 height 是寬度

    2014-06-27 10:03:27 補充:

    這樣圖片畫質不會被壓縮,也可以正常顯示了~

    圖片附件網址 (Google Drive雲端硬碟)

    https://drive.google.com/folderview?id=0B7ZPIYppSP...

    2014-06-27 22:00:06 補充:

    -------------------舊有的css(只列出需要修改的部分)--------------------

    #mainFrame {

    width: 1260px;

    改圖片網址

    }

    #banner {

    WIDTH: 1260px;

    改圖片網址

    }

    #contentBlock {

    WIDTH: 1260px;

    改圖片網址

    }

    #articleBlock {

    WIDTH: 1009px;

    }

    2014-06-27 22:00:16 補充:

    -------------------------手動新加的css (強制規定圖片寬度)----------------------------------------

    .post_content A IMG

    {

    width: 980px;

    }

  • 6 年前

    * 建立隨意窩Xuite日誌要領

    ==>

    blog.xuite.net/tools241/blog/85568657

    * 隨意窩Xuite 面版樣式(CSS) 設定(問/答) ==>

    blog.xuite.net/tools241/blog/112234512

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

    blog.xuite.net/tools241/blog/112182670

還有問題?馬上發問,尋求解答。