自訂報導呈現方式

您可以透過 Google News Producer 中的呈現方式選項,使用報導範本或 CSS 來自訂 Google 新聞的報導呈現方式。

使用 CSS 自訂刊物

發佈者可以按照以下步驟,透過「Article style」(報導樣式) 頁面進一步自訂刊物的呈現方式:

  1. 登入 Google News Producer
  2. 按一下 [Article style] (報導樣式)。
  3. 在刊物的「CSS input」 (CSS 輸入) 方塊中輸入 CSS。
  4. 準備儲存並預覽變更時,請按一下 [Save draft style] (儲存草稿樣式)。
  5. 儲存 CSS 後,右側的預覽窗格會反映您的樣式變更。
    • 如果樣式並未影響您正在查看的報導,請按一下頂端的 [X] 查看其他報導。
    • 您還可以在 Android 或 iOS 裝置上使用 Google 新聞「設計人員模式」預覽儲存的樣式。
      注意:樣式變更可能要過 1 分鐘後才會顯示在「設計人員模式」中。
  6. 如要公開顯示 CSS 樣式,請按一下 [Publish draft style] (發佈草稿樣式)。新發佈的樣式將在 2 小時內反映在 Google 新聞中。

Google 新聞 HTML

Google 新聞不會照本宣科地放送發佈者在動態饋給中發佈的 HTML。當 Google 新聞將發佈者產生的報導加到資料庫時,會將報導轉換為用戶端可以閱讀的資料。進行變更之後,Google 新聞將無法區分特定標記。

為確保樣式定義正確無誤,如果您為 2 個會轉換成同一個標記的不同標記設定樣式,Google 新聞就會回報語法錯誤。舉例來說,同時為 <div><p> 標記新增樣式會產生語法錯誤。

以下是 Google 新聞對發佈者產生的報導 HTML 所做的一些變更:

發佈者標記 Google 新聞標記
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

允許的元素選取器

HTML 元素

Google News Producer 支援下列 HTML 標記:

  • </a>
  • <b> | <strong>
  • <blockquote>
  • <cite> | <small>
  • <del> | <s> | <strike>
  • <div> | <p>
  • <em> | <i>
  • <h1>
  •  … 
  • <h6>
  • <ol>
  • <q>
  • <sub>
  • <sup>
  • <u>
  • <ul>

注意:標記之間的「|」符號表示 HTML 元素變更時,系統只會針對其中一個標記設定樣式 (如上所述)。

Google 新聞元素

在 Producer 中,您可以使用自訂的 Google 新聞元素來設定報導的樣式。請查看下方列出的可用元素:

Google 新聞元素 說明 螢幕擷取畫面範例
<ns-caption-copyright> 圖片的版權 1
<ns-caption> 圖片下方的說明文字 2
<ns-edition-name> 刊物名稱標題 3
<ns-author-timestamp> 作者和發佈時間標題文字 4
<ns-author-timestamp-separator> 作者和發佈時間之間的圓點 5
<ns-slideshow-copyright> 投影片下方的版權文字 6
<ns-slideshow-caption> 投影片下方的說明文字 7
<ns-subtitle> 報導副標題 8
<ns-title> 新聞報導的標題文字 9
<ns-header-divider> 報導標題和作者時間戳記之間的分隔符號 10
<ns-logo> 報導頂端的標誌 11

 

Article styles elements in Producer

Article style elements in producer

CSS 樣式範例

以下範例說明如何在 Google 新聞中設定某些報導的元素樣式:

/* 所有連結均顯示為紅色。*/
a { color: #cc0000; }

/* 所有報導文字顯示為黑色、水平置中,並位於白色背景上。*/
p {
  color: #000000;
  -ns-block-align: center;

  /* 在「p」標記上設定的 background-color 會套用到整篇報導的背景。*/
  background-color: #FFFFFF;

  /* 「p」標記的字型設定會成為「預設」樣式,並由其他標記的樣式規則所覆寫。*/
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }

/* 您也可以設定 Google 新聞專用的元素!*/
ns-title {
  font-weight: 700;
  text-decoration: underline;
}

/* 
 * 利用「class="style-id:firstHeaderOne"」屬性設定所有標記的樣式,指定顯示紅色文字。
 * 受影響的 HTML 範例如下:<h1 class="style-id:firstHeaderOne">
 */
[style-id="firstHeaderOne"] { color: #cc0000; }

/*
 * 版面專用樣式覆寫設定 (請使用版面名稱)。
 * 例如:讓「焦點新聞」版面的所有連結顯示為灰色。
*/

a [section="Top News"] { color: #0c0c0c; }

/* style-id 專用樣式可以搭配版面覆寫設定使用。*/
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }

/* 您也可以針對顯示在平板電腦中的報導寫入自訂樣式。*/
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Google 新聞專用的 CSS 擴充功能

style-id 選取器

要將某個樣式套用於 style-id:my-style-id 類別中的所有元素,請使用 style-id 選取器,而不是元素選取器:

[style-id="my-style-id"] { color: #cc0000; }

版面選取器

版面選取器必須搭配 style-id 選取器或元素選取器使用。覆寫版面專用樣式時,請使用版面選取器:

/* 將所有版面設定為白底黑字。*/
p { color: #000000; background-color: #FFFFFF; }

/* 
 * 將「焦點新聞」版面設為黑底白字。
 * 「section=」後方的值必須是有效的版面名稱。
 */
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

裝置選取器

裝置選取器必須搭配 style-id 選取器或元素選取器使用。覆寫裝置專用樣式時,請使用裝置選取器:

/* 在所有裝置上顯示白底黑字。*/
p { color: #000000; background-color: #FFFFFF; }

/*
 * 在平板電腦裝置上顯示黑底白字。
 * 這個選取器目前僅支援「all」值和「tablet」值。
 */
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

允許的屬性宣告和值

系統只允許下列的 CSS 資源宣告:

關於「dp」和「sp」

密度獨立像素 (dp) 是用來代替像素 (px) 的計量單位,因為不同的裝置具有不同的像素密度。使用 dp 可確保某個樣式在不同像素密度的裝置上,都能維持相同的呈現效果。

縮放獨立像素 (sp) 與 dp 的運作方式大致相同,但也取決於使用者的字型大小設定。如果使用者將字型放大,sp 也會隨之放大尺寸。

要進一步瞭解 dp 和 sp,請查看質感設計參考指南

可用的區塊樣式

名稱
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone
margin
margin-right
margin-left
margin-top
margin-bottom
dp | sp {1, 2, 4}
dp | sp
dp | sp
dp | sp
dp | sp
padding
padding-right
padding-left
padding-top
padding-bottom
dp | sp {1, 2, 4}
dp | sp
dp | sp
dp | sp
dp | sp

文字樣式

名稱
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

HR 樣式

名稱
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

區塊和文字樣式

名稱
background-color <hex-color>

Span 和 HR 樣式

名稱
color <hex-color>

 

這對您有幫助嗎?
我們應如何改進呢?