添加 WordPress 裡的 blockquote 引言樣式

繼前篇「修改 WordPress 裡的 blockquote 引言樣式」之後,總覺得一篇文章中可能須呈現不止一種引言格式,以便區分。就我會經常用到的就有:一般引言、加底色的引言、加邊框的引言,和終端機模擬這幾種,必須先在「自定附加的CSS」裡,保留原有引言格式,然後再添加幾種自訂的新格式。

一、<blockquote>,最原始最清純的一般引言,除了縮排與斜體字之外,沒什麼花俏格式:

人生來就不是為了被打敗的。人能夠被毀滅,但是不能夠被打敗。

Man is not made for defeat. A man can be destroyed but not defeated.
-出自:海明威《老人與海》(1952)

CSS:(使用內建CSS,不做任何變更)

blockquote {
    quotes: none;
}

二、<blockquote-color1>,加了底色的引言,以與其它內文明顯區分:
李小龍:
一位真正的老師,一位真正的授武者,從來就不應是一位真理的施捨者,他應該是一位領路人,一位通向真理之路的引導者,而真理則必須由學生們自己來發現。

CSS:

blockquote-color1 {
    display: block;
    margin: 1em;
    padding: 0.5em 2em;
    background: #f0f0f0;
    font-style: italic;
}

三、<blockquote-border1>,加上全邊框的引言:
魯迅:
孩子是要別人教的,毛病是要別人醫的,即使自己是教員或醫生。但做人處事的法子,卻恐怕要自己斟酌,許多人開來的良方,往往不過是廢紙。
CSS:

blockquote-border1 {
    display: block;
    border: #00aeae 5px double;
    margin: 1em;
    padding: 0.5em 2em;
    font-style: italic;
}

四、、<blockquote-column1>,只有左邊框的引言:
一個人的價值,在於他貢獻了什麼,而不在於他能得到什麼。
 
原文:The value of a man resides in what he gives and not in what he is capable of receiving.

-愛爾伯特‧愛因斯坦

 
CSS:

blockquote-column1 {
    display: block;
    margin: 1em;
    padding: 0.5em 2em;
    border-left-style: solid;
    border-left-color: #00aeae;
    border-left-width: thick;
    font-style: italic;
}

五、<blockquote-terminal>,模擬終端機的引言:
lookart@linux-b5sa:~> cat hs_err_pid9704.log | more
#
# A fatal error has been detected by the Java Runtime Environment:
#
# Failed to write core dump. Core dumps have been disabled. To enable core dumping, try “ulimit -c unlimited” before starting Java again
#
# If you would like to submit a bug report, please include
# instructions on how to reproduce the bug and visit:
# http://icedtea.classpath.org/bugzilla
# The crash happened outside the Java Virtual Machine in native code.
# See problematic frame for where to report the bug.
#
–更多–

CSS:

blockquote-terminal {
    display: block;
    height: 200px;
    padding-left: 1em;
    overflow-x: scroll;
    overflow-y: scroll;
    font-size: 14px;
    line-height: 16px;
    word-break: keep-all;
    white-space: nowrap;
    color: #d3d3d3;
    background: #000000;
}

這樣就完成在「自定附加的CSS」裡加添 CSS 引言格式的工作了。

但是必須注意一點,這些自行添加的 CSS 格式,得是在文字編輯器的「文字模式」中更改才行,更改後記得要按編輯頁面右上角更新發表鈕儲存,然後按預覽預覽修改觀看結果。而且,可能由於內建編輯器的問題,在「文字模式」更改的語法,一旦切換回「預覽模式」便會消失不見。因此建議,最好留待文章發表前再做最後調整。

進階閱讀:將新添加的 blockquote 引言樣式,移置 child 子主題

====================

版本:WordPress 4.9.1

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *