【痞客邦外掛】如何自訂痞客邦文章段落樣式? 6個範例樣式讓文章更有質感

by Kent
發佈: 最後更新
攻城濕不說的秘密 - 如何自訂痞客邦文章段落樣式

痞客邦是台灣目前最大的部落格平台之一,簡單註冊帳號後就能開始寫文章,不過內建的文字編輯器的段落樣式不多,幸好痞客邦有2個外掛可以提供我們自訂痞客邦文章段落樣式,只要輸入一次就能記錄起來,下次就不用再輸入一次語法,是不是很方便呢?

安裝外掛

1.快速插入 HTML 語法

快速插入HTML語法可以在文字編輯器模式快速的加入想要的段落,如果找到喜歡的 HTML 但切換到原始碼模式就找不到要加入的位置,這個外掛絕對是好幫手。

 

舉例:嵌入 Youtube 影片,把喜歡的 Youtube 影片嵌入語法複製後找到想要的位置用「快速插入HTML語法」功能加入。

👉 點這裡前往痞客邦市集安裝快速插入HTML語法

 
 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦快速插入HTML語法教學步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦快速插入HTML語法教學步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦快速插入HTML語法教學步驟3
 

STEP 4

攻城濕不說的秘密 - 痞客邦快速插入HTML語法教學步驟4
 

STEP 5

攻城濕不說的秘密 - 痞客邦快速插入HTML語法教學步驟5
 

2.Snippet

可以儲存常用的樣式,Kent 存放樣式有標題、有顏色的引用區…等,裡面的文字可以自行修改,再加入你想要的地方。

樣式代碼只需要加入一次,之後點選儲存的代碼並輸入文字就能加入,如果有正在使用的樣式只要按取消就能回到樣式選單。

使用時請 一定要把游標點到想加入的位置 ,不然位置會跑掉。

👉 點這裡前往痞客邦市集安裝安裝Snippet

 

Snippet 樣式分享

1.標題樣式
<p style="border-left:5px solid #452EBC; background-color: #f8f8f8; padding: 5px; line-height:2.5em; font-weight:600; font-size:20px;">$title_text</p>

實際呈現樣式:

標題文字

 

代碼說明:
border-left: 5px solid #452EBC; # 區域左邊邊線 粗度5px 實體線 顏色 #452EBC 可以自行更換
background-color: #f8f8f8; # 背景顏色 #f8f8f8 可以自行更換
padding: 5px; # 內距 5px 可自行調整
line-height:2.5em; # 行高間距 2.5倍行高
font-weight:600; # 文字粗體
font-size:20px; # 文字大小

PS:顏色代碼可以參考 HTML 色碼表

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入標題樣式步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入標題樣式步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入標題樣式步驟3
 

STEP 4

攻城濕不說的秘密 - 痞客邦Snippet外掛加入標題樣式步驟4
 

STEP 5

攻城濕不說的秘密 - 痞客邦Snippet外掛加入標題樣式步驟5
 

2.引用樣式
<blockquote style="background: #f8f8f8; padding: 15px;">❝ $quote_text ❞</blockquote>

實際呈現樣式:

❝ 這是一段引用文字 ❞

代碼說明:
background: #f8f8f8; # 背景顏色 #f8f8f8 可以自行更換
padding: 15px; # 內距 5px 可自行調整

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入引用樣式步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入引用樣式步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入引用樣式步驟3
 

STEP 4

步驟2、3只需要做一次,之後第1步接第4步就能直接加入樣式。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入引用樣式步驟4
 

STEP 5

攻城濕不說的秘密 - 痞客邦Snippet外掛加入引用樣式步驟5
 

3.步驟樣式
<p><span style="background:#e8e8e8; color:#000; display:inline-block; font-size:18px; font-weight:600;padding: 10px 30px;">STEP $STEP</span></p>

實際呈現樣式:

STEP 1

 

代碼說明:
background:#e8e8e8; # 背景顏色 # e8e8e8 可以自行更換
color:#000; # 文字 顏色 #000 可以自行更換
display:inline-block; # 顯示方式為文字區塊
font-size:18px; # 文字 大小
font-weight:600; # 文字粗體
padding: 10px 30px; # 內距上下 10px 左右 30px

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入步驟樣式步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入步驟樣式步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入步驟樣式步驟3
 

STEP 4

步驟2、3只需要做一次,之後第1步接第4步就能直接加入樣式。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入步驟樣式步驟4
 

STEP 5

攻城濕不說的秘密 - 痞客邦Snippet外掛加入步驟樣式步驟5
 

4.重點提醒
<p style=”border:1px solid rgb(247, 157, 151); background-color: rgb(254, 237, 236);padding: 15px;”><span style=”color:#FF0000; display:inline-block; margin-bottom:1.5em; text-align:center; width:100%”><span style=”font-size:20px”>$warning_title</span></span><br>
<span style=”color:#000000;font-size:18px;”>$warning_text</span></p>

 

實際呈現樣式:

警告標題
慎重的提醒你此篇文章的操作有風險,請自行評估後再進行操作,本人不對任何自行操作的風險負責,且操作前務必備份

 

代碼說明:
最外層 p
border: 1px solid rgb(247, 157, 151); # 邊框顏色 rgb(247, 157, 151) 可用 HTML 色碼表裡的顏色代碼更換
background-color: rgb(254, 237, 236); # 背景顏色 rgb(254, 237, 236) 可用 HTML 色碼表裡的顏色代碼更換
padding: 15px; # 內距

 

標題樣式
color: #FF0000; # 文字顏色為紅色
display: inline-block; # 顯示方式為文字區塊
margin-bottom: 1.5em;  # 與下方區塊間距 1.5倍行高
text-align: center; # 文字置中
width: 100%; # 寬度100%
font-size: 20px; # 文字大小

 

內部文字
color: #000000; # 文字顏色黑色 可自行替換
font-size: 18px; # 文字 大小

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入重點提醒樣式步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入重點提醒樣式步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入重點提醒樣式步驟3
 

STEP 4

步驟2、3只需要做一次,之後第1步接第4步就能直接加入樣式。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入重點提醒樣式步驟4
 
攻城濕不說的秘密 - 痞客邦Snippet外掛加入重點提醒樣式步驟5
 

5.在文章的任何位置加入 Likecoin  拍手區域
<p><iframe frameborder="0" height="230" src="https://button.like.co/in/embed/$liker_ID/button?referrer=$post_url" width="100%"></iframe></p>

 

實際呈現樣式:

 

代碼說明:
height=”230″ # 拍手區域高度
width=”100%” # 拍手區域寬度

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin拍手區塊步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin拍手區塊步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin拍手區塊步驟3
 

STEP 4

步驟2、3只需要做一次,之後第1步接第4步就能直接加入樣式。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin拍手區塊步驟4
 

STEP 5

複製你自己的痞客邦文章網址時請複製到數字結尾即可,如果有安裝「 Likecoin For 痞客邦 」外掛拍手數量才會一致。

例: https://xz021980.pixnet.net/blog/post/318696986-likecoin-for-pixnet  複製到紅色字體標註起來的位置即可。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin拍手區塊步驟5
 

6.Likecoin 呼籲拍手
<p style="background-color:#fff5d8; word-break: break-word; padding: 20px 30px; font-size:18px">如果您喜歡我的文章,<strong>請在文章最末按5下Like!</strong><br>我將得到 Likecoin 的回饋:)<br><br>回饋由<a href="https://like.co/">&nbsp;Likecoin&nbsp;</a>基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,流程超快),按五次左鍵,可以贊助我的文章且完全不會花到錢!<br>支持創作,正向交流:)</p>

 

實際呈現樣式:

如果您喜歡我的文章,請在文章最末按5下Like!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資,您只要註冊/登入帳號(fb、google帳號都可以註冊,流程超快),按五次左鍵,可以贊助我的文章且完全不會花到錢!
支持創作,正向交流:)

 

代碼說明:
background-color: #fff5d8; # 背景顏色
word-break: break-word; # 強迫文字斷行
padding: 20px 30px; # 內距上下 20px 左右 30px
font-size: 18px; # 文字大小

 

操作教學:

STEP 1

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin呼籲拍手區塊步驟1
 

STEP 2

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin呼籲拍手區塊步驟2
 

STEP 3

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin呼籲拍手區塊步驟3
 

STEP 4

步驟2、3只需要做一次,之後第1步接第4步就能直接加入樣式。

攻城濕不說的秘密 - 痞客邦Snippet外掛加入Likecoin呼籲拍手區塊步驟4
 

總結

不論用痞客邦還是 Wordpress,每個部落格平台都會提供好用的工具,只是我們沒有發現,但是只要善加利用就能提高文章的品質。

 

雖然痞客邦並沒有像 Wordpress 那樣的自由,但是透過剛才介紹的「快速插入 HTML 語法」以及「 Snippet 」外掛加入好看的樣式,讓不懂程式語法的人也能將文章變得更好看,希望這次分享的文章你會喜歡,我們下次再聊~

 

延伸閱讀

👉 【部落格入門】痞客邦外掛推薦 5個好用外掛讓你快速入門
👉 【網頁技巧】文章太呆板嗎? 加入特效讓你的圖片動次動次起來~
👉 【網頁設計】如何調整網頁圖片尺吋? 3種小技巧簡單上手!!
👉 【2021圖空推薦】我給你這一輩子都不想失聯的……圖片

您也許會想看

撰寫留言