之前有寫過跟這一篇相關的CSS教學,是有關於日誌首頁上more按鈕的樣式設定 ,那時認為只能改more的那個小圖示,文字的繼續閱讀是無法改的,結果Xuiter"男丁格爾"寫個教學將它改成圖案式的按鈕,所以將它的文章轉貼過來跟大家分享,原文在http://blog.xuite.net/abgne/diary1/13752641


不知道各位有沒有注意到,在 Blog 的文章列表時,每篇文章預設是只會顯示摘要,若要看完整的內容時,可以點繼續閱讀的連結。


不過文字模式的繼續閱讀連結看起來就鳥鳥的,讓我們來把它改成圖片的樣式吧。

首先當然是要先準備圖片,但是美術白癡的我那有可能弄出像樣的圖,所以我找了梅問題‧教學網的站長來幫我設計了兩個簡單的繼續閱讀圖片,一張是靜態的,而另一張是動態的;而圖片的寬高為100x29

檔案位置:http://abgne.myweb.hinet.net/blog/moreRead.gif

檔案位置:http://abgne.myweb.hinet.net/blog/moreRead_adm.gif

接著登入系統後,再到後台的面版管理->自定樣式(CSS)


CSS 樣式表中基本上是沒有特別跟繼續閱讀有關的語法,但是我有偷偷看過原始碼,發現裡面是已經有給定一個叫 fullpostclassName 了,所以就能利用這 className 來做修改。

注意的是,fullpost 裡面還包了一個連結,這連結才能連到文章的網址,但因為我們不是要隱藏繼續閱讀的連結,所以是要對 fullpost 裡面的連結動手腳才行。

讓我們自己在 CSS 樣式表中加入一段屬於 fullpost 的設定語法(我加在最後)

這邊我指定了剛剛的靜態圖片來當連結的背景圖片,同時設定的寬高跟圖片一樣為100x29,這樣圖片才能完整的顯示出來。其中的 text-indent 設為 -999px 是為了把繼續閱讀這幾個字給移出整個畫面,若不移走的話,連結的部份就會有圖也有文字

這樣簡直是...醜到不行啊,所以要記得加上 text-indent 的屬性喔。加完後就能預覽看效果了

看到了沒,這樣的效果不是比原來文字模式的好很多嗎!若把圖片換成動態的話,效果也是很棒的。

若是想隱藏繼續閱讀的連結時,只要用前幾篇教的方法來設定即可

這邊可以直接隱藏整個 fullpost,設完儲存後就可以看到效果了


當然啦~也可以透過 fullpost 來修改文字大小顏色等效果,若你不想用圖片的話


效果應該是沒圖片好啦,就看 Blog 整體的風格來弄囉

範例 Blog男丁格爾's 實驗室 


狗貓我將男丁格爾的語法弄成文字貼在下面↓,方便大家Copy & Paste,因為男丁格爾的教學是一張圖片!

改繼續閱讀文字變成按鈕
/*繼續閱讀*/
.fullpost a{
 width:100px;
 height:29px;
 background-image:url(http://abgne.myweb.hinet.net/blog/moreRead.gif);
 text-indent:-999px;
}

/*more*/
.morebtn{
 display:none;
}

另外隱藏繼續閱讀的語法↓
.fullpost {
 display:none;
}

96/10/29因為阿煙的補充(感謝他們的補充),我再加上如果[繼續閱讀]圖片要置中、或是置右的話的CSS語法變成↓
/*繼續閱讀*/
.fullpost a{
 width:100px;
 height:29px;
 background-image:url(http://abgne.myweb.hinet.net/blog/moreRead.gif);
 text-indent:-999px;
 }

.fullpost{
    left: 82%;
    position: relative;
}
效果如下↓


至於要置中的話,語法變成
.fullpost a{
 width:100px;
 height:29px;
 background-image:url(http://abgne.myweb.hinet.net/blog/moreRead.gif);
 text-indent:-999px;
 }

.fullpost{
    left: 42%;
    position: relative;
}
效果如下↓



隨機文章


  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。