記事の表示形式をカスタマイズする

Google ニュースでの記事の表示形式をカスタマイズするには、Google ニュース用 Producer の表示形式オプションから記事のテンプレートまたは CSS を使用します。

CSS を使用して版をカスタマイズする

ニュース メディアは、以下の手順で [Article style](記事スタイル)ページで版の表示形式をカスタマイズすることができます。

  1. Google ニュース用 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> タグの両方にスタイルを設定すると構文エラーとなります。

ニュース メディアによって作成された記事の HTML に対して Google ニュースが行う変更の一部を下記に示します。

ニュース メディアのタグ Google ニュースのタグ
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

使用できる要素セレクタ

HTML 要素

Google ニュース用 Producer でサポートされている HTML タグ:

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

注: タグの間にある「|」(縦線)は、HTML 要素の変換(上記参照)によって、そのいずれか 1 つのタグにのみスタイルが設定されることを示します。

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: #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; }

/*
 * セクション固有のスタイルが優先される。セクション名を指定する。
 * 例: 「Top News」セクション内のリンクをすべてグレーにする
*/

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; }

section セレクタ

section セレクタは、必ず style-id セレクタまたは要素セレクタと組み合わせて使用します。section セレクタを使用してセクション固有のスタイルを優先させる例を示します。

/* すべてのセクションでテキストを黒、背景を白にする */
p { color: #000000; background-color: #FFFFFF; }

/* 
 * 「Top News」セクションについてはテキストを白、背景を黒にする
 * 「section=」に続く値は有効なセクション名にする必要がある
 */
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

device セレクタ

device セレクタは、必ず style-id セレクタまたは要素セレクタと組み合わせて使用します。device セレクタを使用して端末固有のスタイルを優先させる例を示します。

/* すべての端末でテキストを黒、背景を白にする */
p { color: #000000; background-color: #FFFFFF; }

/*
 * タブレットではテキストを白、背景を黒にする
 * 現時点ではこのセレクタで指定できる値は「all」と「tablet」のみ
 */
p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

使用できるプロパティの宣言と値

以下の CSS プロパティのみ宣言できます。

「dp」と「sp」について

端末によってピクセル密度が異なるので、ピクセル(px)の代わりに密度非依存ピクセル(dp)を単位とします。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>

スパンと HR のスタイル

名前
color <hex-color>

 

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。