RSS 記事のスタイルをカスタマイズする

Google ニュースパブリッシャーセンターで入手できる記事テンプレートや CSS オプションを使用して、Google ニュースでの RSS 記事の表示をカスタマイズできます。

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

ニュースメディアは、記事スタイルの機能を使用して RSS 記事の表示をカスタマイズできます。手順は次のとおりです。

Google ニュースパブリッシャーセンターにログインします。
パブリケーションを選択します。
[Advanced]（詳細設定）タブをクリックします。
[Article styles]（記事スタイル）までスクロールします。
その版の [CSS input]（CSS 入力）ボックスに CSS を入力します。
変更内容を保存してプレビューするには、[Save and preview]（保存してプレビュー）をクリックします。
CSS を保存すると、右側のプレビューパネルにスタイルの変更内容が表示されます。
ヒント: Android デバイスまたは iOS デバイスで Google ニュースのデザイナーモードを使用して、保存済みのスタイルをプレビューすることもできます。変更したスタイルをデザイナーモードで表示できるようになるまでには 1 分ほどかかることがあります。
CSS を適用したスタイルで記事を公開するには、[Publish]（公開）をクリックします。新たに公開したスタイルは 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 ニュースパブリッシャーセンターは以下の 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 ニュースの要素

Google ニュースパブリッシャーセンターでは、カスタマイズされた 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

CSS を使用したスタイル設定の例

次の例のように CSS を変更することで、Google ニュースの記事の特定の要素にスタイルを設定できます。

CSS の例

/* リンクをすべて赤にする*/

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

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

Google ニュースでは以下の 5 つのカテゴリの 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>

パブリッシャーセンターで今すぐカスタマイズ

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。