居家的那些事

痞客。版型 |痞客照片右方被截圖之真相大白

2013-09-22

IMG_3539  

因為覺得痞客套版留的照片版面寬度不夠大,常常不能把畫質和整體感覺

呈現到我想要的樣子,所以在今年七月,下定決心挑戰痞客CSS語法

試著把部落格的照片版面加大,只是苦於對網頁一竅不通

為了找到關鍵數值,看的眼睛都快脫窗

在即將搞瞎的前夕才好不容易終於改好,而且在我的電腦上看正常無比

大小格式也大致滿意,獨立完成這麼難的事,開心的都快掉下淚來

只是一直不解的是,為何每每在手機上看,圖的右方老是會被截掉?

我一直解讀成是手機解析度問題,就不以為意

直到上一篇照片kuso對話,有熱心格友留言說看不到圖的右方

我才驚覺大事不妙,也才意識到手機是真實反應部落格格式調整有問題

我的電腦,你幹嘛醬騙我,哭~~~~

之前因為照片上沒有文字,乍看不會發現被截圖

但應該很多人都覺得雪倫照片構圖大有問題吧!(抱頭尖叫)

今天再次挑戰修改CSS,並決定記錄下來

除了是自己的筆記,也提供給需要的人參考

 

1.版型是套用 03

未命名

 

2.選擇主視覺/自訂圖片/上傳或點選圖片

系統會主動要求選取 950*300 的大小

1

    

3. 進入CSS原始碼編輯,由CSS原始碼最上方逐步往下修改

雪倫在此新增【font-weight:bolder;】

也就是把標題變成粗體。關於此點,在爬CSS文時發現有一位格主

因為不管在那加這個語法都無法變粗體而大怒

雪倫也遇到了,也才發現有的CSS是在一開頭就寫死,像這個版就是

所以一定要在源頭改掉,不然就算叫破喉嚨都不會有人理你

1  

因為這個版的CSS是把這幾處綁在一起,所以紅圈框起來的幾個地方

就一起變粗體,如果部份不要粗體,就得再另外研究分開寫才行

1

 

4.article-content是關鍵字,就是把照片版面調寬的地方。

width的原設定值是650。

1

▶ 專屬優惠看這裡

完成KLOOK註冊,即可獲得100元優惠碼:前往註冊頁面

更多美食景點不漏接:LINE加起來

 

5.照片版面加寬後,側邊欄位空間就會不夠,而被擠到最下面去

所以 #container3 就是把整個版面的寬度加寬。

原本width的數值是950。

1

 6.版面調好後,再微調字體的大小和顏色

想調字體的大小就請找【font-size】這個關鍵字

秘訣就是先記下原本的數值,然後改一個明顯大很多的數值

比如原本是12px,改為20px後再按預覽,就能看出這個是控制那一區塊的

然後再慢慢試出你要的字體大小

 

想調顏色就請找【color】這個關鍵字

秘訣和上面一樣,先記下原本的代號,然後打開色碼表,找出你要的

色碼代號,比如原本是coloer:#666,改為#0000EE

然後再按預覽,就能看出這個是控制那一區塊的顏色

 

找出字體大小和顏色不難,只是需要花時間不斷嘗試

希望大家都能找出最適合自己的版型

 

補上換版頭的設定

  • 回覆
    Gini
    2013-09-24 於 09:45:38

    好實用的一篇
    我也要自己來改~
    對什麼CCS一竅不通啊! 我~ >///<
    版主回覆:(10/01/2013 11:17:58 AM)
    CCS根本不是給人看的嘛!丟筆XD

  • 回覆
    可可 + 仲凡
    2013-09-24 於 05:31:10

    妳要先把橫幅的照片寬度跟高度先裁成跟你版面一樣的大小,
    然後上傳到相簿,接著再去後台(自定樣式進階版)選擇第二,
    (部落格最上面 #header) 在那邊會有個(背景圖片)
    把該照片網址貼上去,這樣就OK了~
    版主回覆:(10/01/2013 11:19:49 AM)
    太感謝你了~

  • 回覆
    葉子
    2013-09-24 於 05:15:01

    好強喔,大家都在CSS…
    葉子當時光是用自訂樣式就搞了半死…
    雖然最近起心動念想改版…但一想到…萬一…就害怕….XDD
    既然知道高手在此…或許他日心理建設好了,再來登門請教….
    版主回覆:(10/01/2013 11:20:51 AM)
    總之先把自己原本的CSS複製貼上WORD存起來,就算亂搞不成,再貼回去就是了~~

  • 回覆
    雁情
    2013-09-24 於 03:42:47

    我對於語法並不熟
    現在在雪倫這裡學到了
    回頭就來試試~~~
    一直想試著布置自己想要的樣子
    但都無從著手
    謝囉!^^
    版主回覆:(09/24/2013 04:22:37 AM)
    你的版型很好看,可是照片真的太小,這樣都看不過癮,快來把照片版面加寬,嘉惠我們的眼睛吧!!

  • 回覆
    小白鯨
    2013-09-24 於 02:25:06

    呵呵~~~小白鯨前一陣子,也是自學摸索這CSS語法,
    終於稍微瞭了一些皮毛,調整版型。
    現在見到雪倫這麼細心的提醒,小白鯨恍然大悟呢!
    改天再來研究看看^^v
    版主回覆:(09/24/2013 04:42:41 AM)
    我現在正苦惱想把版頭橫幅的照片換掉卻找不到地方換,嗚嗚~~痞客幹嘛這麼神秘啦!!

  • 回覆
    Ivy
    2013-09-24 於 00:41:15

    有時被截圖真的看了好難過,
    你真是太有才了,想不到這樣也能破,
    辛苦!辛苦!
    版主回覆:(09/24/2013 04:43:46 AM)
    還好有發現,才不會一直被截下去@@

  • 回覆
    皮皮君
    2013-09-22 於 16:56:47

    想當初皮皮君也是對CSS一竅不通
    努力研究了一個多星期還是一知半解
    還好遇到熱心版友(淩雲)指導
    再加上自己一個一個參數去try,終於改成功了!
    可惜沒把當初的設定步驟好好記下來
    感謝雪倫的文章,這次皮皮君一定要珍藏起來~ XD
    版主回覆:(09/24/2013 04:46:57 AM)
    其實是要努力TRY一定都能修,只是苦了眼睛而己@@

  • 回覆
    小珊珊
    2013-09-22 於 14:43:34

    推4~
    喔~上面的那個大圖喔!
    小珊珊一開始也研究超久滴,只差沒有摔電腦@@"
    不過,有了雪倫這篇,以後改版面更輕鬆哩!
    版主回覆:(09/24/2013 04:47:51 AM)
    哈哈~結果現在我又找不到地方換掉最上方橫幅的照片,又繼續苦惱中~~~

  • 回覆
    麥仔
    2013-09-22 於 14:17:04

    推3
    好厲害~我對語法一竅不通!!!但看了你的詳細介紹我也想要來試試看
    版主回覆:(09/24/2013 04:48:15 AM)
    希望有點幫助 ^^

  • 回覆
    小風
    2013-09-22 於 13:18:18

    我最近也剛改版成功
    真要一個一個測試^^
    版主回覆:(09/24/2013 04:48:35 AM)
    這是實實在在的苦工啊~~

1 2 3 4

發表留言

這個網站採用 Google reCAPTCHA 保護機制,這項服務遵循 Google 隱私權政策服務條款