WordPressの引用元だけ斜体になる？引用文と出典の表示を確認する方法

引用文・出典名・リンク・自分の説明を分ける

引用文は、資料から引いた文章です。出典名は、その文章がどの資料によるものかを示します。元ページへのリンクと、記事を書いた側の説明も別の役割です。文字の傾きを直す前に、この四つを読み分けられるか確かめます。

ここでは、架空の部品加工会社が「加工相談の準備」という記事へ、短い架空資料の文章を載せる案を使います。以下の引用文は説明のために用意した短文で、外部の著作物の転載や、実際の会社の提供条件ではありません。

この例では、引用文と資料名を同じ引用のまとまりに置き、自分の説明をその外へ続けています。出典名が斜体でも、引用文・資料名・自分の説明が混ざっていないかを先に読みます。元資料を実際に使う場面では、出典名だけでなく、確認したURLへ読者が進める表示も別に確かめます。

この引用文は、どの資料名と、どの説明に対応する？引用のまとまりと、その外の自分の説明を見比べてください。

原寸画像を開く

斜体の一語だけを見るのではなく、どの引用文の出典名か、元ページは未確認か、自分の説明がどこからかを続けて読みます。図は一つの架空記事の説明で、実際のCSSやリンクの確認結果ではありません。

通常の文字にした別の記事案は、修正後の証拠ではない

園芸店の案は部品加工会社の案と別会社・別記事です。通常の文字という設定を、先の案の修正成功としては扱いません。どちらも実際の公開結果や、適用されたCSSの出所、出典リンクを開いた結果は未確認です。このページの引用例の見せ方も、説明用のCSSによるものです。

根拠をどの資料で示すか、本文の一文から資料へ戻れるようにする考え方は、記事の根拠と出典の示し方で確認できます。ここでは資料の選定や利用可否を判断し直さず、引用ブロックの出典の表示に絞ります。

出典だけ斜体になる指定を、実際のHTMLから確かめる

編集画面の「斜体」ボタンだけを見ると、別の表示指定を見落とすことがあります。公開側の出典名がどのHTML要素になり、その要素へどの文字スタイルが適用されているかを確認します。

引用ブロックの文章と出典欄を確認する

記事の編集画面で該当する引用ブロックを選び、引用文と出典欄の内容を読みます。WordPress公式の引用ブロックの説明には、文字の斜体やリンクの操作、Default・Plainなどのスタイルが案内されています。ただし、スタイルの選択肢や見た目はテーマによって異なります。Plainへ変えれば必ず出典の斜体だけが直る、とは考えないでください。

WordPressの開発者向け仕様では、標準の引用ブロックは投稿本文に保存する種類で、引用の値にはblockquote、出典にはciteという要素を示しています。実際のテーマ・版・別の引用機能で出力が変わる可能性があるため、自分のページのHTMLも照合します。

cite要素と、文字の傾きの指定を分けて見る

<cite>は、作品や資料などの題名を示すHTML要素です。MDNのcite要素の説明は、ブラウザーが通常、内容を斜体にすることがあると説明しています。斜体が見えることだけで、利用中のテーマがそう指定したとは言えません。

一方、font-styleは文字の傾きに関わるCSSの指定です。MDNのfont-styleの説明にあるnormalやitalicなどの値を、対象の出典名で確かめます。要素の意味、文字の見た目、実際に効いた指定の出所を別に確認するのが要点です。

1. 公開側の出典名を選んで調べる。

   ブラウザーの開発者ツールで対象を選び、出典名がcite要素に入っているかを読みます。引用文全体や隣の自分の段落を、出典の文字と取り違えないようにします。

2. 実際に効いたfont-styleを見る。

   ChromeではElementsのComputed（計算済み）で対象の値を確認し、Styles（スタイル）で適用された規則や、その出所のリンクを見ます。ブラウザー既定、テーマや追加CSS、文字へ直接付いた指定などを調べる入口になります。

3. 出典だけの指定か、親からの影響かを分ける。

   引用文まで斜体なのか、出典の要素だけなのかを比べます。複数の規則が見える場合は、書かれている規則すべてではなく、実際に適用された値と規則を照合します。

Chrome公式のCSS確認手順は、StylesとComputedの役割を説明しています。ここでの確認は読み取りから始め、調べるためにサイト全体のCSSや設定を変更しないようにします。

出典のURL属性と、読者が押せるリンクも別物

HTMLのblockquoteに付けるciteというURL属性と、資料名を示すcite要素は別です。URL属性を付けたことだけで、読者が押せる可視リンクができるわけではありません。実際に開けるリンクにする場合は、確認した元ページへ進むリンク要素と、その表示・行先を確かめます。この架空例の未確認URLを、見た目だけのリンクへ補完しません。

調整するなら、対象の引用と出典に範囲を絞る

斜体であること自体を一律の欠陥にせず、その記事で出典が読めるかを見て調整の要否を決めます。変える場合も、引用文や全サイトのciteをまとめて変えるより先に、対象の引用の出典欄へ範囲を絞ります。

編集画面の文字装飾か、CSSの表示指定かを確認する

出典名の文字に編集画面の斜体装飾を付けている場合は、その対象の装飾を確認します。装飾を外しても、citeに適用されるCSS側の斜体が残る場合があります。ボタンの状態を変えたことと、公開側の表示が変わったことは分けて確かめてください。

テーマやブロックに使える文字スタイルの設定がある場合も、引用文・出典・引用全体のどこへ効くかをプレビューで見ます。出典だけを変えたかったのに、引用文や余白まで変わっていないかを確認します。

CSSで調整する場合の、対象を限定する例

次は、対象の引用ブロックに説明用クラスconsultation-quoteを付け、その直接の子がciteである場合の例です。実サイトを調べずに貼る修正コードではありません。クラス名とHTMLの関係は、実際の対象に合わせて確認します。

<blockquote class="consultation-quote">
  <p>図面の寸法と素材名を先に確認します。</p>
  <cite>架空資料『相談に必要な資料』</cite>
</blockquote>

.consultation-quote > cite {
  font-style: normal;
}

この例の>は、指定した引用の直接の子のciteを対象にする意味です。実際には別の要素が間に入っていれば、この条件には一致しません。構造を確かめず、効かないからと全サイトのciteへ指定を広げたり、強い上書きを増やしたりする方法にはしません。

WordPressの引用ブロックの公式説明には、高度な設定として追加CSSクラスなどが案内されています。利用できる項目、CSSを保存する場所、操作できる権限は、使っている版・テーマ・運用によって確認が必要です。ブラウザー内だけの試し変更と、公開用スタイルの保存は別に扱います。

一つの相談で動いたCSSを、そのまま全サイトへ移さない

Ollieのサポートでの本人相談では、未公開サイトの出典だけ斜体になるという質問に対し、開発者がciteの既定表示とCSS例を説明し、本人が動いたと報告しています。この一件の報告を、別テーマや当サイトの原因・修正成功へ転用しません。実際の対象と、変更後の表示で判断します。

保存後に同じ記事と別の引用を読み合わせる

確認では、同じ記事の同じ引用文・出典名を使います。出典名の表示を調整する作業で、引用文そのものや自分の説明を変えた結果を混ぜないようにします。

1. 保存した本文と公開URLをそろえる。

   編集画面のプレビューか、保存後の公開先かを分けます。引用文、資料名、自分の説明、元ページへのリンクが意図した内容かを読み合わせます。

2. 狭い幅とPCで読み分ける。

   例えば320px・390px相当の狭いブラウザー幅とPCで、引用文の終わり、出典名、自分の説明の始まりを確認します。斜体を変えても、資料名の折り返しや境界が分かりづらくなっていないかを見ます。狭いPC表示を、実際のスマホでの確認と同一視しません。

3. リンクを設けた場合は、実際の行先を確かめる。

   確認した元ページのリンクを開き、目的の資料へ進めるかを見ます。キーボードではTabで対象へ進み、Enterで移動し、文字の場所を見失わないかも確認します。この架空二案ではURLが未決なので、リンクが成功した結果は付けません。

4. 共通指定を変えた場合は、別の引用も見る。

   同じ指定が効く別記事の引用や出典名を確認し、意図しない文字・位置の変更がないかを見ます。一つの表示を確認したことだけで、全引用・全端末での解消を認定しないようにします。

本文の番号から補足へ進む脚注を編集したい場合は、WordPressの脚注の追加・編集・削除で操作を分けて確認できます。引用ブロックの出典欄を通常の文字にすることと、脚注の追加や往復リンクの編集は別の作業です。

まとめ：引用文を変える前に、出典欄の指定を確かめる

WordPressの引用元だけが斜体でも、引用文を変えたりテーマの不具合と決めたりする前に、出典欄のHTMLと適用されたfont-styleを確認します。citeの意味と見た目、読者が押せるリンク、自分の説明を分けて扱います。

調整が必要なら、対象の引用と出典欄に範囲を絞り、同じ原稿のスマホ・PC・公開先で読み分けと行先を確かめます。共通指定を変えた場合は、別の引用への影響も見直してください。

会社の記事の引用表示や、編集画面と公開先の確認を整理したい場合は、対象記事と困る部分をDREEXYへお知らせください。支援範囲・費用・条件は個別に確認します。記事の引用表示を相談する