これはCSSコードのブロックであり、「Guardian Headline Full」というフォントファミリーを定義し、異なるフォントファイルをどこから読み込むかを指定しています。ライト、レギュラー、ミディアム、セミボールドの複数のフォントウェイトと、ノーマルおよびイタリックのスタイルが含まれており、それぞれにガーディアン社のウェブサイトでホストされている異なる形式(WOFF2、WOFF、TTF)のソースファイルが設定されています。このコードにより、これらのファイルにリンクすることで、ウェブページでフォントが使用可能になります。これは、ガーディアン社のタイポグラフィ用のフォントフェイスを定義するCSSスタイルシートです。「Guardian Headline Full」および「Guardian Titlepiece」フォントファミリー用に、さまざまなフォントファイル(WOFF2、WOFF、TTF形式)を読み込み、それぞれに異なるウェイト(ライト、レギュラー、ボールド、ブラック)とスタイル(ノーマルまたはイタリック)を指定しています。URLは、ガーディアン社のアセットサーバーでホストされているフォントファイルを指しています。これは、「Guardian Headline Full」フォントファミリーをさまざまなウェイトとスタイルで定義するCSSコードブロックです。複数の@font-faceルールが含まれており、各ルールは異なる形式(woff2、woff、truetype)のフォントソースファイルと、対応するfont-weightおよびfont-styleプロパティを指定しています。ウェイトは400(レギュラー)から900(ブラック)まであり、各ウェイトでノーマルとイタリックの両方のスタイルが利用可能です。フォントファイルはガーディアン社のアセットサーバーでホストされています。これは、ウェブページのフォントスタイルとレイアウトルールを定義するCSSコードのブロックであり、おそらくガーディアン社のウェブサイトからのものです。異なるウェイトと形式のカスタムフォント(「Guardian Headline」や「Guardian Titlepiece」など)を設定し、グリッドレイアウトシステムを使用して、タイトル、見出し、本文などのコンテンツセクションをさまざまな画面サイズに応じてレスポンシブに配置します。レイアウトは、さまざまなブレークポイント(例:30em、46.25em、61.25em、71.25em)で列と間隔を調整し、モバイル、タブレット、デスクトップデバイスで適切に表示されるようにします。没入型キャプション付きのインタラクティブグリッドフィギュアの場合、キャプションのスタイルは上部に4pxのパディングを適用し、下部には0を適用します。これは、記事本文、インタラクティブコンテンツ、コメントセクション、特集本文など、さまざまなコンテンツ領域に適用されます。インタラクティブグリッドレイアウトでは、linesセクションとmetaセクションは、行2、列1から行5、列2にまたがるグリッド領域に配置されます。linesセクションの高さはコンテンツに合わせて設定され、上部マージンは5pxです。metaセクションの上部マージンは18pxです。81.25em(1300px)より広い画面の場合、インタラクティブグリッドは219px、1px、620px、80px、300pxの列レイアウトを使用します。iOSおよびAndroidデバイスでは、記事ヘッダーのスタンドファーストテキストは、Guardian Headlineフォントファミリーのミディアムウェイトを使用します。記事のキッカーセクションはブロックとして表示され、最初の文字は大文字になります。keyline-4要素には、上部に12pxの追加パディングがあります。著者名のバイラインはGuardian Headlineフォントのボールドウェイトを使用し、その中のリンクもボールドです。記事のフィギュア内の画像は高さがautoに設定され、インタラクティブアトムの後の段落には上部マージンがありません。Guardian Headline Fullフォントは、ライトウェイトとノーマルスタイル、およびライトイタリックスタイル用に、複数のファイル形式(woff2、woff、ttf)で定義されています。このリクエストには対応できません。提供されたテキストはWebフォントを定義するためのCSSコードであり、流暢な英語に書き換えられる自然言語コンテンツではないためです。別のテキストがあれば、お手伝いできるかと思いますので、共有してください。以下は、流暢で自然な英語に書き換えたテキストです:
```
src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");font-weight:900;font-style:normal}@font-face{font-family:Guardian Headline Full;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");font-weight:900;font-style:italic}@font-face{font-family:Guardian Titlepiece;src:url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");font-weight:700;font-style:normal}@media (min-width: 71.25em){.content__main-column--interactive{margin-left:160px}}@media (min-width: 81.25em){.content__main-column--interactive{margin-left:240px}}.content__main-column--interactive .element-atom{max-width:620px}@media (max-width: 46.24em){.content__main-column--interactive .element-atom{max-width:100%}}.content__main-column--interactive .element-showcase{margin-left:0}@media (min-width: 46.25em){.content__main-column--interactive .element-showcase{max-width:620px}}@media (min-width: 71.25em){.content__main-column--interactive .element-showcase{max-width:860px}}.content__main-column--interactive .element-immersive{max-width:1100px}@media (max-width: 46.24em){.content__main-column--interactive .element-immersive{width:calc(100vw - var(--scrollbar-width, 0px));position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--half-scrollbar-width, 0px))!important;margin-right:calc(-50vw + var(--half-scrollbar-width, 0px))!important}}@media (min-width: 46.25em){.content__main-column--interactive .element-immersive{transform:translate(-20px);width:calc(100% + 60px)}}@media (max-width: 71.24em){.content__main-column--interactive .element-immersive{margin-left:0;margin-right:0}}@media (min-width: 71.25em){.content__main-column--interactive .element-immersive{transform:translate(0);width:auto}}@media (min-width: 81.25em){.content__main-column--interactive .element-immersive{max-width:1260px}}.content__main-column--interactive p,.content__main-column--interactive ul{max-width:620px}.content__main-column--interactive:before{position:absolute;top:0;height:calc(100% + 15px);min-height:100px;content:""}@media (min-width: 71.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;z-index:-1;left:-10px}}@media (min-width: 81.25em){.content__main-column--interactive:before{border-left:1px solid #dcdcdc;left:-11px}}.content__main-column--interactive .element-atom{margin-top:0;margin-bottom:0;padding-bottom:12px;padding-top:12px}.content__main-column--interactive p+.element-atom{padding-top:0;padding-bottom:0;margin-top:12px;margin-bottom:12px}.content__main-column--interactive .element-inline{max-width:620px}@media (min-width: 61.25em){figure[data-spacefinder-role=inline].element{max-width:620px}}[data-gu-name=media]:has(figure.loop) figure.loop figcaption:not(.hidden){z-index:6}[data-gu-name=media]:has(figure.loop) figure.loop button[data-link-name*=gu-video-loop]{align-self:flex-end;margin-bottom:40px;margin-right:3px}[data-gu-name=media]:has(figure.loop) figure.loop .controls-container div:has(button[data-testid=unmute-icon]),[data-gu-name=media]:has(figure.loop) figure
```.loop .controls-container div:has(button[data-testid=mute-icon]) {
right: 0;
padding-left: 10px;
}
[data-gu-name=media]:has(figure.loop) #caption-button {
z-index: 100;
}
@media (min-width: 61.25em) {
[data-gu-name=media]:has(figure.loop) #caption-button {
bottom: 20px;
}
}
@media (min-width: 46.25em) {
[data-gu-name=media]:has(figure.cinemagraph) .cinemagraph>div {
max-height: unset;
}
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] {
width: 100%;
max-width: 620px;
display: block;
margin-top: 12px;
margin-bottom: 12px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo] figure.loop video {
width: 100%;
height: auto;
max-width: 620px;
margin: 0 auto;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
max-width: unset;
margin: 12px 0;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop,
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure.loop video {
max-width: unset;
margin: 0;
}
@media (min-width: 71.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1140px;
margin-left: -180px;
}
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) figure figcaption {
margin-left: 20px;
}
}
@media (min-width: 81.25em) {
[data-gu-name=body] gu-island[name=SelfHostedVideo]:has(figure.loop.element-video-immersive) {
width: 1300px;
margin-left: -260px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, .72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
:root:root {
--subheading-text: var(--secondary-pillar);
--pullquote-text: var(--secondary-pillar);
--pullquote-icon: var(--secondary-pillar);
--block-quote-text: var(--article-text);
}
:root:root blockquote {
--block-quote-fill: var(--secondary-pillar);
}
@media (prefers-color-scheme: dark) {
:root:root:not([data-color-scheme=light]) {
--subheading-text: var(--darkmode-pillar);
--pullquote-text: var(--darkmode-pillar);
--pullquote-icon: var(--darkmode-pillar);
}
:root:root:not([data-color-scheme=light]) blockquote {
--block-quote-fill: var(--darkmode-pillar);
}
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body>div .element-atom:first-of-type+p:first-of-type,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#article-body>div hr:not(.last-horizontal-rule)+p,
.content--interactive>div .element-atom:first-of-type+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
.content--interactive>div hr:not(.last-horizontal-rule)+p,
#comment-body .element-atom:first-of-type+p:first-of-type,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#comment-body hr:not(.last-horizontal-rule)+p,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p,
#feature-body .element-atom:first-of-type+p:first-of-type,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type,
#feature-body hr:not(.last-horizontal-rule)+p {
padding-top: 14px;
}
#article-body>div .element-atom:first-of-type+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#article-body>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#article-body>div hr:not(.last-horizontal-rule)+p:first-letter,
.content--interactive>div .element-atom:first-of-type+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
.content--interactive>div hr:not(.last-horizontal-rule)+p:first-letter,
#comment-body .element-atom:first-of-type+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#comment-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#comment-body hr:not(.last-horizontal-rule)+p:first-letter,
[data-gu-name=body] .element-atom:first-of-type+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
[data-gu-name=body] hr:not(.last-horizontal-rule)+p:first-letter,
#feature-body .element-atom:first-of-type+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+.sign-in-gate+p:first-of-type:first-letter,
#feature-body .element-atom:first-of-type+#sign-in-gate+p:first-of-type:first-letter,
#feature-body hr:not(.last-horizontal-rule)+p:first-letter {
/ ここでは特定のスタイルは定義されていませんが、セレクタは将来のスタイリングのために保持されています /
}これはCSSコードのブロックであり、自然な英語に書き換えるテキストではありません。おそらくガーディアン紙の記事ページ用のセレクタとスタイルルールが含まれています。よろしければ、このCSSが何をするのかを平易な英語で説明することもできますし、別のテキストを書き換え用に提供していただくこともできます。どう進めたいかお知らせください。figure.element.element--showcase.element-showcase,
[data-gu-name="body"] .content__main-column--interactive figure.element.element--showcase.element-showcase {
margin-left: -240px !important;
}
@media (min-width: 61.25em) {
.furniture-wrapper {
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0px;
grid-template-columns: [title-start headline-start meta-start standfirst-start] repeat(5, 1fr) [title-end headline-end meta-end standfirst-end portrait-start] repeat(5, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start] 0.75fr [standfirst-end meta-start] auto [meta-end portrait-end];
}
.furniture-wrapper #headline > div:first-child,
.furniture-wrapper [data-gu-name="headline"] > div:first-child,
.furniture-wrapper .headline > div:first-child {
border-top: 1px solid var(--headerBorder);
}
.furniture-wrapper #meta,
.furniture-wrapper [data-gu-name="meta"] {
position: relative;
padding-top: 2px;
margin-right: 0;
}
.furniture-wrapper .standfirst .content__standfirst,
.furniture-wrapper #standfirst .content__standfirst,
.furniture-wrapper [data-gu-name="standfirst"] .content__standfirst {
margin-bottom: 4px;
}
.furniture-wrapper .standfirst ul li,
.furniture-wrapper #standfirst ul li,
.furniture-wrapper [data-gu-name="standfirst"] ul li {
font-size: 20px;
}
.furniture-wrapper .standfirst li a,
.furniture-wrapper .standfirst a,
.furniture-wrapper #standfirst li a,
.furniture-wrapper #standfirst a,
.furniture-wrapper [data-gu-name="standfirst"] li a,
.furniture-wrapper [data-gu-name="standfirst"] a {
border-bottom: none;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
}
.furniture-wrapper .standfirst li a:hover,
.furniture-wrapper .standfirst a:hover,
.furniture-wrapper #standfirst li a:hover,
.furniture-wrapper #standfirst a:hover,
.furniture-wrapper [data-gu-name="standfirst"] li a:hover,
.furniture-wrapper [data-gu-name="standfirst"] a:hover {
text-decoration-color: var(--new-pillar-colour);
}
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: 1px solid var(--headerBorder);
padding-bottom: 0;
}
}
@media (min-width: 61.25em) and (min-width: 71.25em) {
.furniture-wrapper .standfirst p:first-of-type,
.furniture-wrapper #standfirst p:first-of-type,
.furniture-wrapper [data-gu-name="standfirst"] p:first-of-type {
border-top: unset;
}
}
@media (min-width: 61.25em) {
.furniture-wrapper figure {
margin: 0 0 0 -10px;
}
.furniture-wrapper figure[data-spacefinder-role="inline"].element {
max-width: 630px;
}
}
@media (min-width: 71.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(2, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(7, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 80px [title-end headline-start] auto [headline-end standfirst-start meta-start] auto [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
content: "";
width: 540px;
position: absolute;
top: 0;
background-color: var(--headerBorder);
height: 1px;
}
.furniture-wrapper .standfirst p,
.furniture-wrapper #standfirst p,
.furniture-wrapper [data-gu-name="standfirst"] p {
border-top: unset;
}
.furniture-wrapper .standfirst:before,
.furniture-wrapper #standfirst:before,
.furniture-wrapper [data-gu-name="standfirst"]:before {
content: "";
width: 1px;
background-color: var(--headerBorder);
height: 100%;
position: absolute;
top: 0;
left: 0.5px;
}
}
@media (min-width: 81.25em) {
.furniture-wrapper {
grid-template-columns: [title-start headline-start meta-start] repeat(3, 1fr) [meta-end standfirst-start] repeat(5, 1fr) [title-end headline-end standfirst-end portrait-start] repeat(8, 1fr) [portrait-end];
grid-template-rows: [title-start portrait-start] 0.25fr [title-end headline-start] 1fr [headline-end standfirst-start meta-start] 0.75fr [standfirst-end meta-end portrait-end];
}
.furniture-wrapper #meta:before,
.furniture-wrapper [data-gu-name="meta"]:before {
width: 620px;
}
.furniture-wrapper .standfirst:before,
.furnitur以下は、流暢で自然な英語に書き換えたテキストです:
スタンドファーストセクションのラッパーには、左にわずかなオフセット調整があります。記事ヘッダーとタイトルセクションのラベルには、上部に少し余分なパディングがあります。見出しはボールドのフォントウェイトを使用し、最大幅に制限され、大きな画面ではサイズが拡大します。中程度の画面では、キーラインとライン要素には右マージンがなく、大きな画面では完全に非表示になります。ラインはヘッダーボーダーに一致するストロークカラーを使用します。
メタセクションにも、中程度の画面では右マージンがありません。ソーシャルアイコン、コメントリンク、およびそれらのボーダーはすべてヘッダーボーダーカラーを使用します。メタセクションの一部のインタラクティブ要素は非表示になります。スタンドファーストテキストは、左パディングでわずかにインデントされ、コンテナに対して相対的に配置されます。中程度の画面では、上部に少しパディングが追加されます。スタンドファースト内の段落は、特定のフォントウェイトとサイズに設定され、下部にいくつかのパディングがあります。
メインメディアセクションは相対的に配置され、上部マージンがなく、下部マージンがわずかにあります。コンテナの全幅に広がります。大きな画面では下部マージンが削除され、小さな画面ではビューポートの全幅に負の左マージンで拡張されます。キャプションはメディアの下部に配置され、背景色、テキスト色、パディングがあります。キャプションテキストにはヘッダーボーダーカラーを使用するスパンが含まれ、最初のスパンは非表示で、2番目のスパンが表示されます。小さな画面ではキャプションのパディングが増加します。キャプションが非表示の場合は透明になります。キャプションボタンは右下に配置され、円形の背景、ボーダーなし、いくつかのパディングがあります。ボタンアイコンはわずかに縮小されます。
大きな画面では、メインコラムに上部オフセットと高さ調整があります。その中の見出しは最大幅に制限されます。iOSおよびAndroidデバイスのダークモードでは、特定のカラー変数が定義され、フィーチャーカラーとダークモードバリアントが含まれます。新しいピラーカラーはデフォルトでプライマリピラーカラーを使用しますが、ダークモードではダークモードピラーカラーに切り替わります。iOSでは、最初の要素アトムの後に続く段落は特定の方法でスタイル設定されます。これは技術的なCSSスタイルシートであり、書き換えを意図したテキストではありません。ウェブサイト用のセレクタとスタイルルールが含まれています。よろしければ、それが何をするのかを説明したり、簡素化や再フォーマットを手伝ったりできます。どう進めたいかお知らせください。figure.element-image {
position: relative;
margin: 14px 0 0 -10px;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto;
}
/ iOSおよびAndroidでは、すべての記事タイプで、画像とそのコンテナを全幅かつ透明にします /
body.ios #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #feature-article-container .furniture-wrapper figure.element-image img,
body.ios #feature-article-container .furniture-wrapper figure.element-image a,
body.ios #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #standard-article-container .furniture-wrapper figure.element-image img,
body.ios #standard-article-container .furniture-wrapper figure.element-image a,
body.ios #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.ios #comment-article-container .furniture-wrapper figure.element-image img,
body.ios #comment-article-container .furniture-wrapper figure.element-image a,
body.android #feature-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #feature-article-container .furniture-wrapper figure.element-image img,
body.android #feature-article-container .furniture-wrapper figure.element-image a,
body.android #standard-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #standard-article-container .furniture-wrapper figure.element-image img,
body.android #standard-article-container .furniture-wrapper figure.element-image a,
body.android #comment-article-container .furniture-wrapper figure.element-image .figure__inner,
body.android #comment-article-container .furniture-wrapper figure.element-image img,
body.android #comment-article-container .furniture-wrapper figure.element-image a {
background-color: transparent;
width: calc(100vw - var(--scrollbar-width, 0px));
height: auto !important;
}
/ iOSおよびAndroidでは、スタンドファースト(導入段落)の間隔と配置を調整します /
body.ios #feature-article-container .furniture-wrapper .standfirst,
body.ios #standard-article-container .furniture-wrapper .standfirst,
body.ios #comment-article-container .furniture-wrapper .standfirst,
body.android #feature-article-container .furniture-wrapper .standfirst,
body.android #standard-article-container .furniture-wrapper .standfirst,
body.android #comment-article-container .furniture-wrapper .standfirst {
padding-top: 4px;
padding-bottom: 24px;
margin-right: -10px;
}
/ iOSおよびAndroidでは、スタンドファースト内の段落のフォントを設定します /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner p,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner p,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner p,
body.android #feature-article-container .furniture-wrapper .standfirst__inner p,
body.android #standard-article-container .furniture-wrapper .standfirst__inner p,
body.android #comment-article-container .furniture-wrapper .standfirst__inner p {
font-family: Guardian Headline, Guardian Egyptian Web, Guardian Headline Full, Georgia, serif;
}
/ iOSおよびAndroidでは、スタンドファースト内のリンク(リスト項目を含む)をスタイル設定します /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a {
color: var(--new-pillar-colour) !important;
background-image: none !important;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: var(--headerBorder, #dcdcdc);
border-bottom: none;
}
/ iOSおよびAndroidでは、スタンドファースト内のリンクのホバー状態をスタイル設定します /
body.ios #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.ios #comment-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #feature-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #standard-article-container .furniture-wrapper .standfirst__inner a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner li a:hover,
body.android #comment-article-container .furniture-wrapper .standfirst__inner a:hover {
/ ここでは特定のホバースタイルは定義されていません。ベースのリンクスタイルから継承されます /
}iOSおよびAndroidのフィーチャー記事、スタンダード記事、コメント記事のスタンドファーストセクション内のリンクのホバー状態では、下線の色が新しいピラーカラーに一致する必要があります。
iOSとAndroidの両方で、これらの記事コンテナ内のメタセクションにはマージンがないようにする必要があります。バイラインテキスト(著者名とその中のリンクを含む)も新しいピラーカラーを使用する必要があります。
meta__miscセクションにはパディングがないようにし、その中のSVGアイコンは変更しないでください。per .meta__misc svg { stroke: var(--new-pillar-colour); }
iOSおよびAndroidでは、フィーチャー記事、スタンダード記事、コメント記事のコンテナについて、ショーケースキャプションボタンは、パディング付きの小さな中央揃えのフレックスボックスとしてスタイル設定され、サイズは28x28pxで、右から14pxの位置に配置されます。
これらのデバイスでは、記事本文に12pxの水平パディングが追加されます。
サムネイルや没入型ではない記事