在這之前、我從來沒有想過,有一天、我會在網路上打著Blog的CSS教學

會在痞客邦獻上我的第一次,小蓓 這一切、攏是為丟里啦

 

《雖然妳最後還是選擇隨意窩為棲身地

 

 

曾經有人問「為什麼妳們家的相片看起來都這麼大張」 

因為痞客邦給的版型有限,要讓文章內的相片變大、就只能修改版型了

Pixnet文章欄位變大css - 01.jpg

 

 那麼、先依我的文章「台中彩虹眷村來作說明,這是原先痞客邦給我的版型

我不是說不滿意,只是它都把我的相片卡掉了,這點讓我的心情很不美麗

當初拍到的相片明明是這樣的,人物置中、比例完整

 

但是上傳到痞客邦的文章後,Amy的美照硬是被卡掉了1/5

Pixnet文章欄位變大css - 03.jpg

 

當初明明有拍到牆上的「平安百福」,看起來多麼完美

 

但是上傳到痞客邦的文章後,平安百福卻變得不完美了

Pixnet文章欄位變大css - 05.jpg

 

這完完全全惹毛了我,所以、開始動腦筋在CSS上

 

因為曾經在Yahoo!BLOG玩過CSS的語法,成功的把文章欄位變大,也把文章內的相片變大

所以也自認痞客邦的CSS應該也是一樣的,開始很「假會」的自己動手修改語法

但是一接觸之後才發現,完了、痞客邦的CSS和雅虎部落格的CSS完全不一樣 shit

 

所以、我們先拋開在Yahoo!學過的CSS,重新學習痞客邦的CSS吧

以下CSS說明、僅適用於單一側邊欄位

因為我不曉得三欄位的CSS是不是也完全一樣的

如果有朋友試過三欄位成功的話,請您再告知小慧喔

 

先在管理後台中,點選「部落格」的「自訂樣式」的「CSS始碼編輯」

Pixnet文章欄位變大css - 06.jpg

 

 

提醒大家!!請記得先把原CSS複製存檔

萬一如果沒有修改成功的話,我們還保留著原CSS可以用

Pixnet文章欄位變大css - 07.jpg

 

 

第一個、先教大家把我們的文章欄位變大,因為文章欄位變大了、我們的相片才能放大張呀

找到裏面語法的這一串

 

#content{

width:650px ;

float:left;

_overflow: hidden;

}

  

紅色字體的部份、可以依照個人喜好的文章欄位大小來作調整

輸入您要的欄位大小後,記得要用「預覽」的方式來看

 如果欄位太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

 

另外、假設您輸入的數字是 700 的話,那麼以後就先把您的相片調整寬度為700後再上傳

這樣就可以讓您文章內的相片變大了

 

 

 

修改了文章欄位的大小,大家的側邊欄位、是不是也就下滑到文章的最底下了

所以、第二個、要教大家把我們的版型加大,這樣就可以把我們的側邊欄位拉上來了

找到裏面語法的這一串

 

 

#body-div{ 

background: #fff; 

overflow:hidden ; 

width: 970px; 

margin: 0 auto;

}

 

紅色字體的部份、可以依照個人喜好的版型大小來作調整 

輸入您要的版型大小後,記得要用「預覽」的方式來看 

如果版型太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

 

 

 

↓↓底下這一個CSS,可作、也可不作,完全是依個人喜好↓↓

  

如果有人也想跟我一樣,把我們右邊欄位改大或改小的話,找到裏面語法的這一串

 

#links{

float: right;

width: 265px;

}

 

紅色字體的部份、可以依照個人喜好的版型大小來作調整 

輸入您要的版型大小後,記得要用「預覽」的方式來看 

如果版型太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

 

只不是、這一個CSS的修改、會牽動到剛剛講的第二個的CSS

所以、如果沒有玩過CSS的痞友們,真的不要輕易嚐試,因為它真的會讓妳改到想砸了電腦

 

 

 

那麼、都完成了吧!!現在我們的版型都變大了,下方也多了個橫軸可以拉右又拉左

Pixnet文章欄位變大css - 08.jpg

 

剛剛Amy被卡掉的美照,現在都跑出來了

Pixnet文章欄位變大css - 09.jpg

 

放上版型變大前、後的相片作比較,這樣的比例才叫完美

Pixnet文章欄位變大css - 10.jpg

 

就連剛剛只看到的什麼、什麼的相片,現在也都出現了

Pixnet文章欄位變大css - 11.jpg

 

放上版型變大前、後的相片作比較,「平安百福」終於看到了

Pixnet文章欄位變大css - 12.jpg

 

另外、因為不是每個人都用同一個版型,我的主圖是套用現有版型下去作「自訂樣式進階版」修改

所以在作完上面的CSS修改之後,我發現、我的主圖卻沒有跟著變大

Pixnet文章欄位變大css - 13.jpg

 

這就是CSS讓我又愛又恨的原因

我愛它可以讓我的版型不一樣,我恨它的囉哩叭嗦想砸了它

所以為了完美,我們再來修改主圖的CSS吧

 

先在管理後台中,點選「部落格」的「自訂樣式」的「自訂樣式進階版」

Pixnet文章欄位變大css - 14.jpg

 

然後在「部落格最上面」的欄位裡,上傳您要當主圖的相片

記得!!上傳的相片大小,要和剛剛CSS修改第二個版型大小的width一樣

Pixnet文章欄位變大css - 15.jpg

 

上傳完畢後,到再煩人的「CSS原始碼編輯」中,找到裏面語法的這一串

  

#header{

position:relative;

width:970px;

height:425px;

 background: url('http://pic.pimg.tw/gomay520/1311230616-70718f49aa727cb16d7663bab3646ca4.jpg') no-repeat left top;

 color:#555;

 background-image:url('http://pic.pimg.tw/gomay520/1311230616-70718f49aa727cb16d7663bab3646ca4.jpg');

background-position:center;
background-repeat:no-repeat;

}

 

紅色字體,width的部份,和剛剛CSS修改第二個版型大小的width一樣才可以喔

height的部份,就依照個人喜好大小來作調整 

輸入您要的版型大小後,記得要用「預覽」的方式來看 

如果版型太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

Pixnet文章欄位變大css - 16.jpg

 

完  成

以上就是我們家修改CSS的方式,是不是囉嗦又煩人!!但又不得不承認、改完後的文章變得更好看

還有、我要先說明!!這一篇、當初真的只是應小蓓要求寫的,畢竟我也不是科班出身 

我也是在網路上學習,然後慢慢的、一點一滴的修改我的CSS,才改出現在我要的版型

所以、拜託各位不要再用悄悄話來問我哪個CSS要怎麼改

您問的問題、如果我會的話,我一定會詳細的說明!!但是如果我不會的話,也希望您能諒解

我真的、真的不是CSS的PRO呀

 

創作者介紹

沈小慧。攝影/旅遊/美食

沈小慧 發表在 痞客邦 PIXNET 留言(19) 人氣()


留言列表 (19)

發表留言
  • ★╮Joanの2個寶貝♡
  • 我搞不定說...包含上次的符號...
    暈倒~還真的不會使用...
    只好用手動方式...
  • 這就是CSS讓人又愛又恨的原因!!不過Joan有時間的話還是可以嘗試看看
    剛開始學CSS會覺得很難,不過學會了之後妳會覺得
    其實、它只是修改時傷眼睛,但真的並沒有我們想像中的難 ^^

    沈小慧 於 2013/09/23 15:02 回覆

  • Piano maggie
  • 小慧午安
    這教學文章,我一定會試驗,太有幫助了
    您的實驗精神,給你掌聲鼓勵
    雖然需要再實驗,,,,還是感恩你!
  • Maggie、不用客氣!!儘管拿去試吧,先預祝妳改版成功喔 ^^

    沈小慧 於 2013/09/23 15:51 回覆

  • 小鴨鴨
  • 我只能說你太強了 讚!!
  • 鴨媽都沒看到我的眼睛快脫窗了嗎 ^哈哈哈^

    沈小慧 於 2013/09/24 10:31 回覆

  • sally 吳
  • 可以開班授課了~~三版的順便研究一下^^
  • 我眼睛都脫窗了啦 @_____@"

    沈小慧 於 2013/09/24 14:27 回覆

  • 林太小蓓
  • 我也來留言下~為了我才生出這篇文章~怎可以不留言呢~
    呵呵呵~我也要說妳真的太強啦~((((雖然我離開了~哈。[:emotion1378718061-2673775316.gif]
  • 妳要打屁股啦妳 T^T

    沈小慧 於 2013/09/24 16:41 回覆

  • candy
  • Amy的娘 還是妳厲害ㄋㄟ
    而照片當然要完整的才好看
    被卡掉 整個構圖就怪怪的
    還是這樣才好看齁~
  • 是吧、是吧!!看來Candy也喜歡把相片放大大張喔 ^^

    沈小慧 於 2013/09/26 10:57 回覆

  • 煮飯婆媽咪
  • 讚喔~教學了內~猴腮雷~
    很幽默的教學方式~
    我邊看邊笑內~
    成功教學喔
    改天來試試看~
    謝謝分享[:emotion1378718061-2673775316.gif]
  • 謝謝媽媽的喜歡!!這是我的第一篇教學文,因為不懂要怎麼表達正確的教學方式
    就用比較個人化風格的方式下去寫,希望媽媽能成功順利改版喔 ^^

    沈小慧 於 2013/10/14 11:09 回覆

  • 咩咩
  • 你好 想問一下
    我是文章中的照面都是顯示小章
    滑鼠滑到上面後變大張
    請問要如何讓照片一直是大張呢?
    我改了你的語法都沒用耶
  • 咩咩您好 ^^
    針對您的問題,您可以到「管理後台」,左側欄位中、點選部落格管理中的「基本/進階設定」
    右邊出現的文章顯示相關設定中,把「文章圖片大小」的選項點選「依文章區塊寬度調整」
    點選完畢後、記得要儲存設定才算成功喔

    這樣一來、您就不會出現「滑鼠滑到上面後才變大張」的情形了!!您試試吧 [:emotion1378714966-174424739.gif]

    沈小慧 於 2014/02/27 10:53 回覆

  • 圓子亥
  • 小慧你好,
    我的還是無法更改耶!!
    我的問題是以下:
    1.滑鼠一碰到照片,照片就會放大,這要怎麼改呢?
    2.我是選擇自訂樣式簡易版03這個版本,可是我卻沒有辦法改他們的圖片,我想換成我自己想放的照片,因為我想要的是滿版的,也就是跟你目前使用的是一樣的(我之前套用痞客邦現有樣式,再用你這裡教我的方法改照片大小,有改成功喔!謝謝你!!)可是現在改成跟你一樣的版面卻無法更改照片,並且出現問題1,現在我可以怎麼做呢?

    希望你願意繼續指點,我才好不容易發了我的第一篇就...........
    我對電腦很笨,所以希望能改成有自己風格的格呀(我發現好像大家都會改><)[:emotion1378714967-882042217.gif]
  • 圓子亥您好!!抱歉我回晚了[:emotion1378714966-174424739.gif]
    針對第一個問題,是您設定上的問題,請您到痞客邦的「管理後台」
    在左側欄位中,點選「基本/進階設定」,接著在右邊的選項中「文章顯示相關設定」
    把裏面選項的「文章圖片大小」,點選「依文章區塊寬度調整」。。。按下右下角的「儲存設定」
    這樣就完成了!!!!很簡單吧!!!!這樣您的相片,就不會忽大忽小了

    至於問題二的版頭問題,您先到管理後台的「樣式管理」,點選「自訂樣式進階版」
    確認在「部落格最上面」的選項中,「背景圖片」是不是有上傳相片成功
    也許您的背景圖片沒有上傳成功,才會導致圖片沒有出現的樣子,又或者可以試試看另一張相片

    以上問題,不成材的小慧不曉得有沒有幫到您的忙,祝圓子亥改版成功喔[:emotion1378711203-454256725.gif]

    沈小慧 於 2014/03/26 15:56 回覆

  • 圓子亥
  • 小慧謝謝你!!!
    不晚不晚,有回我就好了,比起問身邊的朋友不如來網上找達人好人來的快速有效呀!我照你的方式改了,可是我的照片還是會因為滑鼠經過就放大,我找到痞客邦客服寄給我的信件,他們反而說要改成"不調整",才能固定我插入的尺寸,他們的解釋是這樣子的:

    他們說幫我查詢我的設訂"文章圖片大小"設定為"強制調整400px",因此大於400px的圖片滑鼠經過時就會放大為原本的大小,若小於400px的圖片將不會放大,結果我又照了他們建議方法試了,更慘!圖片就像你的文章說的一樣,被切掉了><

    請問我應該要先固定圖片的尺寸再做上傳嗎?如何固定呢?或是小慧你有別的方法?

    另外照你的方式我有把格改大,也有成功,可是就是出現線壓在照片跟文字上的狀況,我晚點改給你看就知道了,這怎麼辦呢??(這又是一個新的問題了,挖哩咧......)

    你的格現在的樣子剛好是我的理想版呀!我好喜歡這種滿版沒有線區分的格,你是套用哪一個呢?有推薦嗎?可以再幫幫我嗎?可以告訴我妳現在的格式怎麼做的嗎?^^

    我的問題好多,謝謝你耐心看完它[:emotion1378711205-3196562483.gif]
  • OK、那我們一個問題一個問題來吧

    首先、先用我的版型來說,我是選用「樣式選擇」中的「鐵塔」
    然後再進去「自訂樣式」中的「CCS原始碼編輯」,將上列文章中的CCS,一個一個依妳的需要改版

    將來上傳相片的話,妳就要依妳CCS中的設定改變大小後再上傳

    例如~我的版頭在CCS中設定是
    #header{
    position:relative;
    width:970px;
    height:425px;

    那在上傳相片時,我就先把相片大小改為寬是900後再上傳

    但是後來我又不滿意版頭的大小,所以又再改大後才變成現在的版頭,但是不想讓妳搞糊塗,所以我們一切以文章內的數據來討論,而妳可以自己先調CCS,調到妳滿意的大小後,上傳相片就只有差在改寬度後再上傳的問題了

    再來、是文章內的相片忽大忽小的問題!!
    文章中的CCS設定是
    #body-div{
    background: #fff;
    overflow:hidden ;
    width: 970px;
    margin: 0 auto;
    }

    文章中的寬度是設定970,那妳以後上傳相片的寬度就要修為大約900後再上傳
    (因為左右兩邊要預留一些空間,所以讓妳設寬900,當然也可以依個人喜歡,要設定滿版970的話也可以的)

    然後記得!!文章中的相片如果不要忽大忽小的話,一定要到痞客邦的「管理後台」
    在左側欄位中,點選「基本/進階設定」,接著在右邊的選項中「文章顯示相關設定」
    把裏面選項的「文章圖片大小」,點選「依文章區塊寬度調整」。。。按下右下角的「儲存設定」才行

    以上問題、先這樣了,剩下的等妳實地操作後,才能知道問題在哪

    PS CCS真的很麻煩,必需要有耐心慢慢的改,也預祝妳改版成功[:emotion1378714966-291308818.gif]

    沈小慧 於 2014/03/28 11:52 回覆

  • 圓子亥
  • 小慧,好幾天沒好好來整理CCS,因為要帶小孩呀!!(她才六個月><)
    希望她可以像吹氣球一樣,一夜長大就好了[:emotion1378711204-2216049203.gif]
    我想先來問你個小問題,也先來感謝你一下,我後來知道怎麼改我要上傳的照片大小了,謝謝你^^
    另外我的新問題是,有的樣式你進去他的原始CCS裡面,她的寬跟高顯示的單位是百分比耶,比如可能是height:70% 類似這樣子的顯示,而不是650px用px為單位,而且他甚至只會顯示單一一個寬或是高而已,不會寬跟高都顯示,請問這樣我應該怎麼調整寬高比例呢?這也一定會影響照片縮放的呀,怎麼辦,又是一個新問題了........[:emotion1378711205-2609117717.gif]再請妳指點了...

  • 那、就試試調整它的數字看看吧!!例如 height:70%,就把它改為 height:700%
    我習慣數字多一個零,這樣就能輕易的看出它的差別性了[:emotion1378718039-2028429450.gif]

    沈小慧 於 2014/04/09 10:44 回覆

  • 吾愛sky
  • 你好~想問一下,我部落格內文跟版型都調過了,有改變~
    但我點進去某篇文章流覽全部,內文跟版型又變成跟原本一樣,變小了!冏
    請問還要調哪裡,謝謝~
  • 吾愛sky您好!!
    「文章欄位變大」,要先在css語法裏找到這一串

    #content{
    width:650px ;
    float:left;
    _overflow: hidden;
    }

    width:650px ; 這裡的數字可以依照個人喜好文章欄位大小來作調整
    輸入您要的欄位大小後,記得要用「預覽」的方式來看
    如果欄位太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

    另外,如果您已經完成文章欄位大小的設定,右邊欄位如果下移/被卡掉等等原因的話
    不用擔心,您可以在css語法裏找到這一串

    #links{
    float: right;
    width: 265px;
    }

    width:265px ; 這裡的數字可以依照個人喜好文章欄位大小來作調整
    輸入您要的欄位大小後,記得要用「預覽」的方式來看
    如果欄位太大或太小的話,再回來作修整,直到您滿意之後、再點選「儲存」

    以上兩個語法再請您試試看!!希望我能幫到您的忙[:emotion1378718039-2028429450.gif]

    沈小慧 於 2014/12/09 11:49 回覆

  • vicky
  • 您好,謝謝您的分享,可否請教您一個問題呢?

    關於放大版型我都改好
    也改了依文章區塊寬度調整
    可我的照片還維持小尺寸600

    請問該如何調整照片寬度為700後上傳呢?
    是照片一張一張改,而無法從後台統一性一次改?
    且後台上傳照片只有中600 大1024

    若成功後,舊的文章,圖片大小就只能維持原來小尺寸而不符大版面 是嗎?

    再麻煩您了!!謝謝,感激不盡

  • vicky您好!!
    如果您的CSS都已經改好寬度是700的話,那建議您以後先修改相片的大小後再上傳
    修改相片大小的程式有很多,像是photoimpact、photo scape都是不錯的軟體
    修改大小後再上傳到後台,之後貼在文章裏應該就沒有問題了

    至於您說的上傳相片只有中600、大1024,您以後就選擇1024的
    (所以在修改相片時的寬度要大於1024才可以喔)
    成功後,因為舊的文章在上傳是600的寬度,所以還是一樣不會放大的


    其實、我個人是沒有使用痞克邦的相簿,我是用flickr儲存我的相片的
    flickr在上傳相片時是不用修改大小的(因為它的容量很大)
    而且在尺吋上也有多種的選擇,使用上真的很方便,推薦給您囉

    沈小慧 於 2015/07/07 14:40 回覆

  • vicky
  • 抱歉有一點不太明白
    第一種方法是說使用軟體調成700,到痞克邦後台再選以1024?還是有加Vip可用實際大小?
    第二種方法利用Flickr上傳所有照片再一次傳去痞克邦嗎?這上面可以直接調照片寬以符合版面寬嗎?減少ㄧ次作業嗎?
    不好意思謝謝您喔!
  • vicky您好!!
    簡單來說,您的相機拍出來的相片大小應該都是大於700 or 1024吧
    那麼在上傳到痞克邦的時候就不要管大小的問題了,直接原始檔上傳好了
    (這樣就不用經過修相片大小的這道程序了)

    這樣一來,痞克邦的後台,不管您選700 or 1024都沒有問題了
    只是!!!!痞克邦有容量的限制,所以當您的相片儲存到一定的容量後,就要花錢買vip再增加空間了
    所以我才會建議您使用Flickr,因為它的容量很大,重點是免費的

    Flickr的話,您可以用原始檔的相片上傳到Flickr,完全不用修大小(很方便吧)
    只是,在上傳完成後,要分享到痞克邦時,就只能一張一張的複製,然後在痞克邦的文章裏貼上使用
    程序上雖然比痞克邦麻煩,但是它的容量大,不必擔心未來空間不夠要花錢買空間
    而且在相片大小的選項上也很多種(有縮圖、小型、中型、大型、原始大小),一定有一個是您喜歡的
    像我文章裏,目前就是使用 中型 800 (800 x 534),所以相片看起來也比較大張

    您先使用Flickr看看,未來還有什麼問題再回來一起討論吧

    沈小慧 於 2015/07/10 11:33 回覆

  • vicky
  • 抱歉~我實際下載了Flickr,發現也太好用了吧!可以全部照片HTML直接貼去後台編輯

    只是我的中型是500 X 333,大型1024 X 683,發現沒有你說的800耶

    不知道怎麼回事??

    謝謝你分享Flickr
  • vicky您好!!
    可能您使用的方式跟我的不一樣!!您是用HTML的方式,我是直接把相片複製再貼上的

    我的方式如下:
    ①點選任何一張的相片
    ②在相片的右下角,點選最右邊的那一個(就是箭頭指下的那一個)
    ③點選「檢視全部尺吋」
    ④點選後出現的網頁裏,會有適用相片全部的尺吋,點選尺吋後,下圖的相片也會跟著變大變小喔

    我就是點選800的這一個,然後將相片複製,到痞克邦的文章裏貼上,這樣就可以了

    您再試試看吧!!有什麼問題再回來一起討論喔

    沈小慧 於 2015/07/10 15:07 回覆

  • vicky
  • 您好!!謝謝您耐心回復喔!!
    不過不太了解您說的第2步,在相片右下角點選最右邊的那一個
    在哪裡呢??謝謝喔!
  • vicky您好!!
    抱歉痞克邦的留言沒有辦法用圖檔來解說
    只好請您跟我一起文字上的操作了

    ①進入您的flickr
    ②點選任何一張的相片
    ③出現您點選的相片視窗後,在相片的右下角,有四個白色色體的圖案(在黑色視窗上)
    請您點選四個白色圖案的最右邊那一個(圖案是一個向下的箭頭,箭頭前還有一條白線)
    ④點選它之後,會出現((正方形、小、中、大、原始尺吋、檢視全部尺吋))的選項
    請您點選「檢視全部尺吋」
    ⑤點選後會出現相片的視窗,這裡就可以看到相片的全部尺吋了

    您再試試看吧!!有什麼問題再回來一起討論喔

    沈小慧 於 2015/07/10 15:36 回覆

  • vicky
  • 謝謝您,我發現我使用單機版,所以找不到那個按鈕
    現在使用網頁版已經可以了,太感謝了你如此耐心回我
    不過如果它有其他大小可以選擇以HTML一次貼就太方便了
    再次謝謝您!
  • vicky您好!!
    不用客氣啦!!我也很高興能幫上您的忙[:emotion1378711203-4036697321.gif]

    沈小慧 於 2015/07/10 15:50 回覆

  • 百萬部落客緋夜櫻
  • 我的改了但是顯示的欄位還是很小> <還有我的欄位會被卡到