本站使用日本人氣 No.1 商業佈景主題【SWELL】架設!瞭解更多

SWELL|如何隱藏頁面H1標題,並去除H1標題下方的外距(margin)

歐森 Olsen

我想把頁面標題去掉……

常規狀態下,【SWELL】提供了兩種非常漂亮的頁面標題呈現方式;但有時候在設計頁面時,將頁面標題隱藏起來,可以獲得更乾淨的版面及寬廣的設計空間。

基於SEO考量,【SWELL】尚未提供隱藏頁面標題的控制選項,但是我們可以透過內建的「カスタムCSS & JS」欄位,用簡單的CSS代碼完成。

Let’s dive in!

目錄

簡單3步驟

STEP
開啟要修改的頁面

建議只針對要隱藏的頁面逐一設定,未來修改時會比較有彈性!

STEP
點開下方的「カスタムCSS & JS」
STEP
在「CSS用コード」中,貼上下方程式碼
/** 隱藏本頁面(page)H1 標題,但H1標題下方的外距仍存在 **/

h1{
display:none;
}

/** 去除H1標題下方的外距**/
.l-mainContent__inner>.post_content {
margin-top: 0;
}

這樣就完成囉!很簡單吧?;)

聯盟推廣揭露說明

本文章含有聯盟推廣連結,當您透過本站連結至相關服務商,租用服務/購買產品,歐森將會獲得一筆推廣佣金,用以維護本站營運。敬請放心,您不需為此支付任何額外費用,亦不會因此損失任何服務/商品應有權益,非常感謝您:)

請分享給更多人!^^
  • 已成功複製本頁網址(URL)!
  • 已成功複製本頁網址(URL)!

責任編輯

不在電腦前寫稿剪片,就在探索世界角落的路上。信仰「內容」的力量,相信發自內心的真誠分享,就是數位時代能攏聚一眾人心的關鍵密碼!:)

歡迎留言一起討論!

留言一覽 (7)

  • 想請教一下,怎麼把留言區的日文改成中文的、頁尾跟左測邊分享列的SNS圖標怎麼換成這麼可愛的XD、有些字有螢光筆,要怎麼把螢光筆改成條紋版的~

    • 嗨妳好~
      1.SWELL除了區塊編輯器中的塊功能之外,其他前後台顯示的日文,幾乎都可以透過外掛自行翻譯(我是使用 Loco Translate)。
      2.SNS圖標我是透過自定義CSS修改的;SWELL也內建有一些樣式,妳可以到後台 > 外觀 > 自訂 > 投稿・固定ページ > SNSシェアボタン 中調整哦~
      3.SWELL可以調整螢光筆底線相關設定,路徑是:後台>SWELL設定 > エディター設定 > マーカー,從スタイル下拉選單中就可以調整成條紋囉!

      希望對妳有幫助:)

  • 感謝歐森回覆 很有幫助!!
    1. 目前已翻譯完成,不過我佈景主題是用swell child,但翻譯的主題只有swell可以選擇,想問您的佈景主題也是用swell child嗎 (我是不是應該要用swell,而不是swell child)
    2. 請問自定義CSS需要再自己找SNS圖標的圖片嗎,還是CSS修改完就可以了,具體的修改方式不知道能不能詳細說明~

    3.另外想問,選單的“首頁 服務項目 設計概念…”,是怎麼在底下添加一排英文的呢~~

    不好意思,我問題比較多

    • 呵呵不用客氣,也很謝謝妳~我正在編寫錄製SWELL線上課程,妳的提問對我設計課程很有幫助:)

      1.我也是使用子主題,Loco Translate(LT)所編譯的.po檔,母/子主題是同一個檔案,所以理論上無論妳在LT中選擇編輯SWELL或SWELL Child,都是一樣的;另外,我個人習慣也建議使用子主題,寫自定義CSS時不用擔心動到母主題~尤其SWELL好玩也好客製,我相信妳總有一天會想自己寫code的 XD

      2.這是純CSS修改,無須再另外找SNS圖標圖片哦~如妳熟悉CSS,可到後台>外觀>自訂>附加的CSS中編寫妳要的code即可,SWELL的核心程式很乾淨,很少遇到寫完前台沒反應(蓋不過去)的狀況,妳可以盡量試試;比較不好意思的是,因為這是我之前幫客戶改寫的,為保障其權益,可能不方便直接提供相關程式碼給妳,此一節還請理解:)

      3.這行副標題,在SWELL是讀取各選單項目中的「內容說明」欄位,所以在後台的選單設定中,於該選單項目的「內容說明」欄位寫入妳要的文字即可~

      希望對妳有幫助:)

  • 感謝歐森回覆~~
    加油! 期待SWELL課程上線
    1.了解!原來是同一個檔案的,不過我有發現「後台>外觀>自訂」這區的字、編輯文章時用到的區塊編輯器的按鍵會翻譯不了,所以在編輯文章時,有些按鍵會不太知道是什麼意思,但是前台的字都翻譯的了,不知道您有同樣的情況嗎~

    我對CSS也蠻有興趣的XD,之後應該會嘗試來寫(不過目前先以文章內容為主)

    2.沒問題~我再自己研究看看

    • 呵呵 課程如有順利上線,再跟大家分享。妳的文章寫得很好,未來有機會也想跟妳請教聯盟行銷的部分:)

      「後台>外觀>自訂」這區的文字,我試過,95%以上是可以翻譯的唷;區塊編輯器的部分,SWELL似乎是使用json編譯,但這部分技術細節我也不熟悉,就我實際經驗,LT也是無法成功翻譯的,故目前無解,呵呵。

  • 沒問題XD,有機會的話當然可以,不過我也是剛開始寫聯盟行銷的文章,還在學習努力中,期待幾個月後能看到一些成果!

    了解!感謝回覆~~

撰寫留言

目錄