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 ニュースの要素 | 説明 | スクリーンショット例 |
---|---|---|
<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 セレクタ
/* すべてのセクションでテキストを黒、背景を白にする */
p { color: #000000; background-color: #FFFFFF; }
/*
* 「Top News」セクションについてはテキストを白、背景を黒にする
* 「section=」に続く値は有効なセクション名にする必要がある
*/
p [section="Top News"] { color: #FFFFFF; background-color: #000000; }
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 |
|
dp | sp {1, 2, 4} dp | sp dp | sp dp | sp dp | sp |
|
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> |