為 WordPress 文章內【引言】加上【說明】字樣

CSS 的修改
Spread the love

【聲明】本站任何文章都可能有聯盟行銷連結,當你透過文章內的連結購買產品,我可能獲得分潤,這不會增加你任何成本,並且我分享的都是自己實際使用過的資訊,更多細節請點這裡。 Disclosure: Any post on this site may contain affiliate links, meaning I get commission if you decide to make a purchase through my links, at no cost to you.


一時興起,改了一下<blockquote> 的 CSS 樣式,有 AI 實在太方便。底下是代碼。

因為之前設定了區塊編輯器、可以選擇我自定義的 CSS1,也已經有編號的 CSS2 可以作為給 AI 的範例所以現在臨時起意,只要去修改對應的 CSS 內容。之前寫了什麼,請參考文末連結。

AI 給我的代碼

AI 寫給我下面這一段:

/* 釋義 */
blockquote.is-style-explanation {
    border-inline-start: none;
    margin: 30px;
    padding: 16px 24px;
    box-shadow: 0 1px 5px 0 rgba(45, 62, 80, 0.12);
    border: 4px solid;
    border-image: linear-gradient(to right, #2872fa, #005A87) 1;
    border-radius: 3px;
    background-color: #fcfeff;
    background-color: #fff;
    /* 加入「說明」文字樣式 */
    position: relative;
}

blockquote.is-style-explanation:before {
    content: "說明"; /* 在釋義區塊前加入「說明」文字 */
    position: absolute;
    top: -10px;
    left: 10px;
    font-weight: bold;
    font-size: 14px;
    background-color: #fff;
    padding: 0 8px;
}

最主要的重點是第一部分的

    /* 加入「說明」文字樣式 */
    position: relative;

以及第二部分的

    content: "說明"; /* 在釋義區塊前加入「說明」文字 */
    position: absolute;

作用是這樣的:

  1. 定位相對於自身:position: relative; 這個屬性會使元素相對於其自身位置進行定位。如果在元素上設置了 toprightbottom 或 left 屬性,它們將基於元素的原始位置進行調整。
  2. 創建子元素的定位參考點:如果在元素內部創建了其他子元素,並對這些子元素設置了 position: absolute;,那麼這些子元素的定位參考點將是父元素(具有 position: relative;)的位置。

其他行都是一些顏色、大小、位置上的微调,不是重點。

我輸入的問題

基本上,這種我腦袋其實已經有想法的、甚至有類似想使用的程式碼的,我都會直接給 AI 範例,免得它自己發想跑偏。

改樣式的 AI 提示詞範例

有了範例,AI 會很清楚我指定的實現方式。

AI 依據範例給的回答

直接複製貼上測試一下看結果,【說明】字樣的顯示,我相當滿意。

引言樣式呈現結果

想知道之前怎麼設定的,參考底下文章:

  1. 自定義 WordPress 區塊編輯器樣式 ↩︎
  2. 嘗試使用 Google Bard 修改 CSS 自動編號 ↩︎
分享文章
Chaneswin
Chaneswin

【阿淳】漂流過網路行銷、組織行銷、被創業的光環迷惑過,體驗那些未曾想像的驚奇之後,最終的自由卻是擁有澄澈的雙眼、返璞歸真的看世界,我的冒險不在鎂光燈的絢麗舞台,而在迷宮中。把心路歷程化為故事、把工具筆記在雲端。在瞬息萬變的世界裡,慢慢來。
【阿淳的自由生活工具箱】前身小查的白日夢。從腦中的虛幻到真實世界,這裡記錄著一路上不同階段的想法、課程、工具、實踐、挫折,從此放下權威迷思。如果翻出你需要的工具,歡迎隨喜自取、提問討論 :)

文章: 352

發佈留言

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