版權所有+保留所有權利_+_+_
© 2010-2015 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

想要能常常「變身」,重要的是打好基本功底,建立屬於自己的「不二法門」,然後,常練勤更新,就能有屬於自己獨特的樣子。對於噗版而言,不可或缺的幾項資源與工具,有以下幾項:

1. 背景圖
2. 噗浪版型的CSS項目
3. 常用的CSS語法
4. 色碼查詢對照

在開始嘗試做出屬於自己風貌的噗版前,通常是因為一張好看的圖片或照片,誘發以此當作噗版背景的想法,然後一步步尋找適合參考套用的版型,試著換底圖,有了美圖後,又發現有許多地方想再修正,以符合這張美圖和自己的使用習慣,所以就一步步學習了噗浪版型中各個控制因素,如何用CSS語法自訂的功能,達成想要的噗景,讓自己每天看著噗就開心~ ^ ^

這個過程是持續的,發現美圖->應用噗版->修改CSS->完成新版型->每天用噗開心->發現美圖->++++++

接下來,就讓我與大家分享,1.2.3.4 每個步驟中我常用的資源庫與工具吧!

1. 建立背景圖來源書籤群組

San-X 俱樂部  http://www.san-x.co.jp/charapri/top.html

這是我想找新噗圖第一個會造訪的網址,因為~太可愛啦~XD

且會常常更新,每月還有新月曆推出~不只桌布可當噗版背景喔,讚!

Full HD Wallpapers  http://www.wallpapers-room.com/popular/

如果不走可愛路線,那麼,這個網站必是造訪找圖的最佳選擇,有各種尺寸、各種風格的桌布供下載,寬螢幕?沒問題!這邊有很多適合的大尺寸圖片喔~!

Customize.org  http://customize.org/

這是個多面向多種資源的網站,有很多有創意的桌布與版型作品。值得一提的是,它可以直接按照顏色下去找圖,每張圖片也都有附上該圖的色系,很好搭配喔~

Desktop wallpaper  http://www.socwall.com/

這個網站常常會出現特殊的照片、風格獨特的插圖,所以我的書籤寫著「超酷桌布網」,當然,是一定要加入我的圖片資源庫的~XD

Vladstudio.com  http://www.vladstudio.com/zh/home/

這是同一位作者大量產出的創意作品。他的風格我很喜歡,有一個大象的噗版就是使用他的圖做背景喔!還有深受歡迎的「圖書館」版型,背景圖也是出自他手!

Nyalan wallpaper  http://www.jalan.net/jalan/doc/nyalan/summer2007/wallpaper/index.html

可愛喵咪,是日本旅遊網中的代言貓!我常常使用他做為噗版中的主角~ 春夏秋冬都有好心情~

Sketchbook  http://sketchbook-moritake.com/main.html

手繪風的桌布,這個作者創作的圖畫都很舒服美觀,帶有女性輕柔優美的韻味~

bgpatterns  http://bgpatterns.com/

除了大張的背景圖外,你可以選擇像壁紙般簡單優雅的圖當作噗的背景~那就需要這個網站來幫助你囉~!製作平鋪式背景圖的好用網站!

 

可以將以上的網站加入書籤,組織成「噗版專用背景群組」,想換佈景時就去逛逛,一定會有引發你好點子的圖片出現~

2. 組織噗浪版型可自訂的CSS項目清單

除了預設的選擇,也就是自訂外觀中「畫面佈景」、「時間軸主題」、「主控台主題」的搭配外,可愛的噗浪開放了「進一步運用CSS自訂個人頁面」的功能,也因為如此,我們才能有這麼豐富多彩多姿的噗人生啦XD

為了不辜負這樣的美意,想要打造個人專屬噗版的噗友們,我整理了一份噗浪版型的CSS清單,裡面列出了所有目前我摸索過的語法項目,請大家參考取用,建立符合自己需要的項目以及說明清單,搭配第3項常用CSS語法,在各個項目中做變化,就能產生各式各樣好玩有趣的風貌喔~

/*噗浪語法項目*/
/*Organize by Be Myself Inc. M6--------------------------------------*/


/*畫面佈景--------------------------------------*/
body, html {

/*語言字型*/
body.language-large-font {

/*標題*/
#page_title {

/*編輯文字*/
#top_bar .content a#edit_link {
#top_bar .content a:hover#edit_link {

/*通知數字*/
#alert_beacon {

/*頁首左邊文字*/
#top_bar, #top_bar a {
#top_bar a:hover {

/*頁首右邊文字*/
#top_login, #top_login a {
#top_login a:hover {

/*頁尾文字*/
#footer, #footer a {
#footer a:hover {

/*語言選單*/
#languge_selector {


/*時間軸主題--------------------------------------*/
#timeline_holder {

/*換日線*/
#timeline_bg .day_bg .div_inner {

/*日期文字*/
.day_start .bottom_start, .day_start .div_start {

/*時間分隔線*/
#bottom_line {

/*線上時間文字*/
.bottom_start, .bottom_end  {

/*每則噗對應時間顯示*/
#time_show span {
#time_show, .evening,.night,.day,.morning {

/*噗浪生物*/
#dynamic_logo ,#logo img {
img#creature{

/*時間軸往前往後圖示*/
.cmp_arrow_right,
.cmp_arrow_left,
.cmp_back_to_today  {

/*所有的plurk標籤--------------------------------------*/
#filter_tab  {
#filter_tab a.off_tab  {
#filter_tab a.off_tab:hover  {
#filter_tab a.filter_selected {
#filter_tab a.filter_selected:hover {

/*更新通知*/
#updater {
#updater .text {
#updater a {
#updater a:hover {

/*更新通知音效按鈕*/
.cmp_sound_off,
.cmp_sound_on {

/*音樂播放器*/
#music_player {
#music_player:hover {
#music_player a {
#music_player a:hover {

/*發噗區_每日照片_搜尋-------------------------------------*/
#pane_plurk,
#pane_daily_photo,
#pane_search {

/*選項標籤*/
#toggle_tab {
#toggle_tab li {
#toggle_tab li.tt_selected {

/*標籤圖示*/
#toggle_tab li span#plurk_tab,
#toggle_tab li span#photo_tab,
#toggle_tab li span#search_tab {

#toggle_tab li.tt_selected span#plurk_tab,
#toggle_tab li:hover span#plurk_tab,
#toggle_tab li.tt_selected span#search_tab,
#toggle_tab li:hover span#search_tab,
#toggle_tab li.tt_selected span#photo_tab,
#toggle_tab li:hover span#photo_tab {

/*每日照片文字*/
#pane_daily_photo a {
#pane_daily_photo a:hover {

/*每日照片圖示*/
#snap_photo .webcam{
#snap_photo .computer{

/*搜尋區文字*/
#pane_search a{
#pane_search a:hover {

/*搜尋面板按鈕*/
input.orange-but {

/*搜尋面板文字輸入區*/
input#current_query {

/*搜尋趨勢標題*/
.hot_searches a {
.hot_searches a:hover {

/*噗文輸入區--------------------------------------*/
textarea#input_big, textarea#input_permalink {
textarea#input_big.content {

/*發噗按鈕*/
.cmp_plurk {

/*私密語系選項*/
#more_options .on,
#more_options,
#more_options_holder,
#more_options_link {

/*尚餘字數*/
.char_updater {
.char_highlight {

/*使用者名稱*/
#main_poster .qual_holder{

/*語助詞*/
.q_says,.q_is {
.qualifier, .m_qualifier, .r_qualifier {

/*主控台主題--------------------------------------*/
#plurk-dashboard {
#plurk-dashboard a {
#plurk-dashboard a:hover {
.dash-segment .segment-content {
#dash-stats, #dash-fans, #dash-friends {
#dash-stats h2, #dash-fans h2, #dash-friends h2 {

/*個人簡介--------------------------------------*/
#dash-profile {
#dash-additional-info {
p#about_me {
#full_name {
#span_years , #m_or_f {

/*個人圖像縮放*/
#profile_pic {
#profile_pic:hover {

/*統計資料--------------------------------------*/
#dash-stats {
#dash-stats table {
#dash-stats table td {
#dash-stats h2 {

/*卡馬*/
#karma {
.karma_hover {
.karma_arrow {

/*小徽章*/
.award_bar {
.award_bar div {
.award_bar img{

/*朋友區--------------------------------------*/
.show_all_friends {
#dash-friends {
#dash-friends a {
#dash-friends h2 {
#dash-friends #friend_holder {

/*朋友搜尋*/
#dash-friends p, #dash-friends form {

/*入門說明*/
div #tw_help {

/*邀請朋友*/
div a#dashboard-invite {

/*粉絲區--------------------------------------*/
#dash-fans {
#dash-fans a {
#dash-fans h2 {

/*分享連結*/
div #sharePlurk {

/*社交小圖示*/
.dash-icon {

/*朋友粉絲圖--------------------------------------*/
.friend_holder {
.friend_holder table {
.friend_holder td {
.friend_holder .user_link{
.friend_holder img{
#dash-friends-pics .user_link, #dash-fans-pics .user_link {
#dash-friends-pics img, #dash-fans-pics img {

/***********朋友粉絲與發送私密噗按鈕**************/
.friend_man.add_follow,
.friend_man.remove,
.friend_man.add_friend,
.friend_man.pending,
.friend_man.block,
.friend_man.private_plurk {

/***********主題----其他--------------------------------------***********/

/*浪上噗友小視窗*/
.AmiMenu.info_menu,
.AmiMenu.info_menu td.on,
.AmiMenu.info_menu .user_info.on,
.AmiMenu.info_menu .separator {
.AmiMenu.info_menu .block {
.cmp_tooltips-down {
.cmp_tooltips-up {

/*說明小視窗*/
.tooltip_cnt {
.tooltip_cnt img{
.AmiTT_main{

/*功能視窗視窗標題列*/
.GB_Window .header {
.GB_Window .header td.caption {
.GB_Window .close {

/*註冊使用BAR*/
#validate_email,#sign_up_small,#registerToday,.plurk_box .login_to_see a,.red_link,.plurk_box .login_to_see  {
#top_login a#sign_up{

/*表情符號圖示*/
#emoticon_selecter img,
#emoticon_selecter a:hover img {
#emoticons_tabs ul li a,
#emoticons_tabs ul li {

/*loading圖--------------------------------------*/
.cmp_loading {
#div_loading .cnt {
.loading img {
.loading {

/*河道上的噗------------------------------------------------------------*/
.plurk_cnt  {
.plurk_cnt, .inner {
.plurk {
.plurk td {
.plurk table {
#timeline_cnt {
#timeline_cnt:hover{

/*噗文字*/
.td_cnt .text_holder,
#timeline_holder table td,
#timeline_holder .plurk_cnt {

/*噗上的連結*/
.plurk a.ex_link {
.plurk a.ex_link:hover {

/*噗上的人名*/
.name {
.name:hover {

/*回應列表整體*/
.plurk table,
.list,
.mini_form,
.info_box {

/*回應列表標題*/
.plurk_box .caption {

/*回應列表展開*/
.plurk_box .plurk_cnt {
.plurk_box .list {
.list .plurk_cnt .td_qual {
.list .plurk_cnt .td_cnt .text_holder {
.list .plurk_cnt  {
.list .plurk_cnt tr {
.plurk_cnt tr:hover {

/*原噗者的回應*/
.list .highlight_owner .td_cnt {
.list .highlight_owner .td_cnt a {
.list .highlight_owner .td_cnt .text_holder {
.list .highlight_owner .td_cnt a.ex_link {
.list .highlight_owner .td_cnt a:hover {

/*其他噗友回應*/
.list .td_cnt {
.list .td_cnt a {

/*沒有回應的噗打開後*/
.list .empty {

/*時間軸空白_檢視所有的噗*/
#empty_timeline_fg {
#empty_timeline_fg a {
#empty_timeline_bg {
#empty_timeline_bg a {

/*噗打開後下方輸入區--------------------------------------*/
td.td_cnt textarea {
textarea#input_small {
.mini_form{
.mini_form .qual_holder {
.mini_form .char_updater {
.info_box {
.info_box a {
.info_box a:hover {

div.favorite_count {  /*喜愛的人數*/
div.limited_box {  /*私密的噗給*/

/*回應時間標示--------------------------------------*/
.response_time .holder {
.response_time .holder+div img {

/*回應數*/
.response_count {   /**已讀回應**/
.new .response_count {  /**未讀回應**/
.dots .inner {   /**中間的. . .**/

/*浪上的噗友圖*/
.p_img {

/*刪除編輯消音取消*/
.manager, .manager .action {
.cancel, .delete {
.unmute, .mute {

/*影音圖片*/
.youtube img,.pictureservices img {
.youtube:hover img,.pictureservices:hover img {
.video:hover img,.pictureservices:hover img {

/*單一Plurk頁面--------------------------------------*/
.user-nick {
.user-nick:hover {
div.bigplurk h1.content {
div.bigplurk h1.content .plurk_content {
div.bigplurk h1.content a.ex_link {
div.bigplurk h1.content a.ex_link:hover {
div.contentwrapper h1.content {
div.time {
img.bubble_edge {
div.user img {

/*上一則_下一則訊息*/
#prev_plurk, #next_plurk {

/*回應區標題*/
#plurk_responses h2 {
div #plurk_responses h2 a {
div #plurk_responses h2 a:hover {

/*回應區*/
#plurk_responses {
#plurk_responses a {

/*回應區個人暱稱*/
.user {
.user:hover {

/*回應區連結*/
.plurk_content a.ex_link {
.plurk_content a.ex_link:hover {

/*回應區內容*/
.message a {
.message {

/*回應區原噗者*/
.highlight_owner .plurk_content {

/*回應區個人圖像*/
img.avatar {

/*輸入訊息區*/
#reply  #reply_box {
#reply h2  {
div#reply_box_holder .plurkaction {
#reply_box_holder .qual_holder {
#reply_box #input_big{

/*登入或註冊以回應*/
div #not_logged_in h2  {
div #not_logged_in h2 a {
div #not_logged_in h2 a:hover {


3. 把自己常用的語法建檔 (文字檔最好用喔 .txt或RTF)

關於背景圖的排列方式、字體大小顏色與字型等等常用選項,記得把他們歸納到一個文字檔中,這樣每次要設計新噗版時,只需打開2(噗版項目清單),再把3(常用CSS)依序填入,就能快速整理出新的噗型,也能迅速找到並更新更符合自己使用的23組合啦!這樣會形成自己的「基礎篇」或說「基本款」噗版,以後用基本款下去換圖改色調整修正,會發現「變身」所需的時間越來越短,也越來越能得心應手換上自己想要的新噗樣式喔!!

我最常用的3如下:

/*噗浪常用CSS*/
/*Organize by Be Myself Inc. M6--------------------------------------*/


/*背景類*/
background:url( ) center top no-repeat;  /*圖片置中靠上對齊、不重複*/
background-attachment: fixed;   /*背景圖固定*/
background-color:#;

/*位置類*/
margin:;
width:;
height:;
padding:;
vertical-align:;
text-align:;

/*字體類*/
font-family:;  /*字型樣式*/
font-size:;    /*字體大小*/
font-weight: ;   bold(粗體)
text-transform:;
text-decoration:;  underline(底線)
font-style:;
color:#;   /*顏色*/
line-height:;  /*行距*/
letter-spacing:;  /*字距*/

/*透明度*/
filter:alpha(opacity=) ;
-moz-opacity:;
opacity:;
-khtml-opacity:;

/*圓角*/
-khtml-border-radius: px;
-moz-border-radius: px;
-webkit-border-radius: px;
border-radius: px;

/*框線*/
border:;
border-style:; solid(直線) dotted(點線) dashed(虛線)
border-width: px;
border-color:#;

/*優先選項*/
!important;

/*字的陰影效果*/
text-shadow:;

/*外框陰影效果*/
-moz-box-shadow:;
-webkit-box-shadow:;
box-shadow:;


「O Book」就是我最新的23組合,也將是我打造新噗版的「基本款」最新版本:

O Book

安裝網址: http://www.plurk.com/installDesign/5143441-efaf3acce7

 

此「O」與之前我部落格中這篇「噗浪CSS基本(T)」相互參照搭配,就是我用來創造新噗版的下手處。

在以上1. 2. 3.項落實與勤練後,願大家都能有自己的「O」和「T」囉~ ^^

接下來,輔助的工具4.,能幫助大家在配色的協調性中更能掌握一二。

 

4. 以圖定色與循色索驥

在決定使用的背景圖後,我們可以用 輸入圖片網址 就能產生主要顏色  的這個網站 來幫助我們搭配噗版的顏色:

DeGraeve.com  http://www.degraeve.com/color-palette/

決定噗版的主色系後,可以用 色碼對照查詢 的好用網站 來決定是用對比色、相近色或深淺變化來形塑整個噗的風格:

Colorschemer  http://www.colorschemer.com/online.html

這兩個網站也是必加入書籤的實用工具。

 

開始想要「變身」了嗎?

學習和樂趣是不可分的喔,在設計噗版這件事上尤如是。而一步步紮好基礎功,更是能長久變化多樣風貌的唯一之路。

建立自己的噗版變身基礎法門吧!Enjoy and Colorful Your Life!

創作者介紹
M6

金羽銀華

M6 發表在 痞客邦 PIXNET 留言(9) 人氣()


留言列表 (9)

發表留言
  • Mario Liao
  • 好帖!

    這麼棒的文章,不推就對不起我的讚點了!(咦,有這種點嗎?)
  • ^ ^ 謝謝

    M6 於 2010/05/14 12:25 回覆

  • Dick
  • 如此活躍的文字, 妳好棒哦!
  • =W=

    M6 於 2010/06/03 19:57 回覆

  • Betty
  • 期待期待,期待您的更新啊!
  • ^ ^

    M6 於 2010/06/10 16:11 回覆

  • 小闇
  • 是想問一下「未讀訊息載入中……」這個元素叫甚麼?我在寫佈景時經常以為是在#updater那兒的,本來那文字是要變白色的,不管怎樣設都是變回黑色唷?超奇怪的!
  • 應該是在 #updater 沒錯

    #updater {
    color: #FFF !important;
    }

    就會顯示白色了

    M6 於 2010/06/26 15:45 回覆

  • 悄悄話
  • Maki
  • 您好,修改到現在還是有兩個物件找不到
    http://www.plurk.com/maki109
    我想把自介的詳細都直接放出來,不要讓他被內縮
    ID的文字想要在大一號
    請問這些的語法標籤是@@?
    謝謝回答
  • 1. 把自介區這段語法刪除即可:
    p#about_me
    {
    max-height:15px !important;
    overflow:hidden !important;
    }
    p#about_me:hover
    {
    max-height:300px !important;
    }

    2. 指左邊自我介紹的姓名嗎?
    #full_name
    {
    font-size:15px !important;
    }

    M6 於 2011/08/29 19:53 回覆

  • Maki
  • 我的版面找不到#full_name這個標籤
    那我該在哪一區加入@@?
  • 沒有的話,直接放入就可以了,
    可以加在主控台自介區的附近,這樣會比較好找到他。

    M6 於 2011/08/29 20:13 回覆

  • Ling-Ling
  • 非常謝謝你的分享,有系統的說明,讓我們學習更容易~
  • :)

    M6 於 2012/09/27 11:18 回覆

找更多相關文章與討論