でWordPress記事編集では、共通の「ブロック引用」ボタンがあります▼
使用すると、引用文またはハイライトを呼び出すためのマーカー。
blockquote とはどういう意味ですか?
以下はチェン・ウェイリアンブログの引用スタイル:
blockquote XHTML タグは非常に便利な要素です (十分に活用されていない場合)。意味的には、別の情報源 (別のスピーカー、別の Web サイトなど) から長いテキストを引用するときはいつでも、blockquote を使用する必要があります。これは、テキストを区切り、他のソースと一緒に表示する方法です。
スタイルに関しては、段落タグの特別なクラスを使用してこれらすべてを行うことができます...しかし、それは意味的に役に立ちません。 ブロック引用には、デフォルトでいくつかのスタイルがあります。
ほとんどのブラウザーは、blockquote タグ内のテキストをインデントします。これにより、ユーザーは何らかの方法でテキストを識別できます。しかし、そこでやめるべきだと誰が言えるでしょうか?CSS を使用して引用符のスタイルを設定する方法は次のとおりです。
test-css.html をテストし、css セクションを html 本文に追加します。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS blockquote</title> </head> <blockquote> <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br> Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p> </blockquote> </body> </html>
ブロッククオートの使い方は？
一部の WordPress テーマでは、style.css ファイルに参照スタイルが追加されていないことが判明しています。
次の青い背景の角丸スタイルをコピーして、テーマの style.css ファイルに貼り付けます▼
blockquote, q {
font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
color: #000;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
padding: 3px;
max-width: 95%;
quotes: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}参照スタイルは、本文のテキスト (サイズ、色)、背景色、空白、境界線などを決定します...
ボーダースタイル
このスタイルは比較的単純です。つまり、左の境界線を設定し、太さを設定します。色はフォントの色を制御し、背景色は背景色 (または直接背景グループ) を制御します。
マージンはウィンドウ要素までの距離を制御し、ボーダーの左側は左ボーダー スタイルを制御し、パディング (特に左パディングの左側) はテキストから (左) ボーダーまでの距離を制御します。
このスタイルは、シンプルなブログと同じくらいシンプルです。
次の黄色の背景スタイルをコピーして、テーマの style.css ファイルに貼り付けます▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- 上記は 2 つの引用スタイルです。
- 複数の同じスタイルを追加すると上書きされます。
- そのため、それらのいずれかを選択して、テーマの style.css ファイルに追加してください。
Hope Chen Weiliang ブログ ( https://www.chenweiliang.com/ ) が共有した「引用符の使い方は? HTML の blockquote タグのデモ効果で、あなたを助けます。
この記事のリンクを共有することを歓迎します。https://www.chenweiliang.com/cwl-2123.html
Chen WeiliangのブログのTelegramチャンネルへようこそ。最新のアップデートを入手できます！
📚 このガイドには非常に価値のある内容が含まれています。🌟これはめったにない機会です、お見逃しなく! ⏰⌛💨
気に入ったらシェア＆いいね！
あなたの共有といいねは、私たちの継続的な動機です!