yam天空部落格版面問題

💻 軟件台 程式編寫及設計
2014-06-24 6:28 am
請問各位大大：

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

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

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

　　感謝各位，拜託了～
更新1:

我的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/mainbg.jpg) 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/banner.jpg); 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/mainbg.jpg) 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)

2014-06-25 5:55 pm
✔ 最佳答案
建議你把你所用的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 補充：
可以寄到我的信箱，夾帶檔案方式
信箱: [email protected]

或用雲端硬碟也可
例如像Google Drive、OneDrive
但要開啟共用、分享

2014-06-27 00:59:03 補充：
可以寄到我的信箱，夾帶檔案方式
信箱: [email protected]

或用雲端硬碟也可
例如像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=0B7ZPIYppSPqOWHBIbnlBV3dMSkk&usp=sharing

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;
}
👍 0 👎 0
2014-06-25 12:10 am
* 建立隨意窩Xuite日誌要領
==>
blog.xuite.net/tools241/blog/85568657

* 隨意窩Xuite 面版樣式(CSS) 設定(問/答) ==>
blog.xuite.net/tools241/blog/112234512

* 痞客邦 PIXNET 面版樣式(CSS) 設定(問/答) ==>
blog.xuite.net/tools241/blog/112182670
👍 0 👎 0


收錄日期: 2021-04-30 18:50:46
原文連結 [永久失效]:
https://hk.answers.yahoo.com/question/index?qid=20140623000016KK08684

檢視 Wayback Machine 備份

　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
Ans.fyi 參考答案 - 知識平台 © 2024 條款免責 私穩政策