歐森 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;
}
這樣就完成囉!很簡單吧?;)
聯盟推廣揭露說明
本文章含有聯盟推廣連結,當您透過本站連結至相關服務商,租用服務/購買產品,歐森將會獲得一筆推廣佣金,用以維護本站營運。敬請放心,您不需為此支付任何額外費用,亦不會因此損失任何服務/商品應有權益,非常感謝您:)
歡迎留言一起討論!
留言一覽 (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,有機會的話當然可以,不過我也是剛開始寫聯盟行銷的文章,還在學習努力中,期待幾個月後能看到一些成果!
了解!感謝回覆~~