シンプルな引用句レイアウトCSS（+GeneratePress テーマ）

최근 WordPress テーマを変更してからこそ BLOCKQUOTE タグが正しく適用されず、通常のテキスト形式で表示される現象が発生しました。 それで、単純な引用句（blockquote）フォーマットを検索して適用してみました。

[この記事は2023年8月28日に最終更新されました。 ]

引用とは？

タグは、他のソースから引用されたセクションを指定します。 WordPressでは、「引用符」ブロックを使用して引用符を表示できます。 例：

3日に7時間を歩けばXNUMX年後に地球を一周することができる。

出典：サミュエル・ジョンソン

ブロックエディタ（Gutenberg）では、「/引用」と入力して単に引用ブロックを追加できます。

• 時間と効率を向上させる WordPress Gutenberg キーボードショートカット

シンプルな引用（Blockquote）レイアウト（CSS）

次のCSSコードを使用しました。

blockquote { margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; } // Source: css-tricks.com

これにより、次のように引用がシンプルな形式で表示されます。

必要に応じて、左にあるサイドバーのレイアウトを調整してシンプルさをなくすことも可能でしょう？ たとえば、左枠を次のように変更する：

border-left: 6px solid #c76c0c;

引用の形が下の図のように変わります。

box-shadow効果をしておくと、もう少し形が改善されます。

border-left: 6px solid #c76c0c; border-right: 2px solid #c76c0c; -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow：2px 2px 15px＃ccc;

その後、形が次のように影が追加されます。

必要に応じて色を青系に変更しても大丈夫のようです。 （そのサイトの色と調和する色を選択するといいようです。）

GeneratePress テーマで引用を変更する

この記事を書いた後、私はいくつかのテーマを変えました。 今は GeneratePressという比較的軽くて速いと評価されるテーマが設置されています。

GPテーマを使用した当初は、次のCSSコードが使用されました。

/* GeneratePress 테마 인용구 서식 */
.single-post .entry-content blockquote {
  background:#f9f9f9;
  border-left:10px solid #ccc;
  margin:1.5em 10px;
  padding:1.2em 30px 1.2em 75px;
  quotes:"\201C""\201D""\2018""\2019";
  text-align: left;
  font-style: normal;
	font-size: 0.99em;
}

.single-post .entry-content blockquote::before {
font-family:Arial;
content: "\201C";
color: #9eaea9;
font-size: 4em;
position: absolute;
left: 10px;
top: -10px;
}

.single-post .entry-content blockquote::after{
content: '';
}

.single-post .entry-content blockquote p:not(:first-child) {
  display:inline-block;
  line-height: 1.65em;
  margin-bottom: 21px;
  text-transform: none;
}

.single-post .entry-content blockquote p:first-child,
.single-post .entry-content blockquote p:last-child {
  display:inline;
  line-height: 1.1em;
  text-transform: none;
}



.single-post .entry-content blockquote cite {
padding-top: 20px;
display: block;
    font-style: italic;
    font-size: 15px;
}

これにより、次のような形で引用が表示されます。

引用要素は、他のソースから引用したセクションを指します。 引用句内の内容は、他のソースから引用したものでなければなりません。

Blockquoteとは何ですか？

上記のCSSコードを適切に修正してサイトのデザインに合わせて変更してください。 他のテーマでも同様の方法で応用できます。

CSSコードをカスタマイズする（外観>カスタマイズ>追加CSS）に追加するか、 チャイルドテーマ 内のスタイルシートファイル（style.css）に入力します。

追加：カートゥーンスタイルの引用

活気に満ちた明るいスタイルの引用が必要な場合は、次のコードを追加してテストしてください。

/* Cartoon-style blockquote for the WordPress GeneratePress Theme */

.single-post .entry-content blockquote {
  background: #ffebc8;
  border: 5px dashed #ff9933;
  margin: 3em 0;
  padding: 2em;
  position: relative;
  font-size: 1.2em;
  line-height: 1.8;
  color: #333;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 5px 5px 0 #ff9933;
}

.single-post .entry-content blockquote::before, 
.single-post .entry-content blockquote::after {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  content: "\201C";
  color: #ff9933;
  font-size: 3em;
  position: absolute;
}

.single-post .entry-content blockquote::before {
  top: -10px; 
  left: -10px;
}

.single-post .entry-content blockquote::after {
  content: "\201D";
  bottom: -10px; 
  right: -10px;
}

.single-post .entry-content blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffebc8;
  transform: translateX(-50%);
}

.single-post .entry-content blockquote p {
  margin-bottom: 20px;
  text-align: center;
}

.single-post .entry-content blockquote cite {
  display: block;
  font-style: normal;
  font-size: 1em;
  text-align: center;
  color: #555;
  margin-top: 20px;
}
.single-post .entry-content blockquote {
  background: #ffebc8;
  border: 5px dashed #ff9933;
  margin: 3em 0;
  padding: 2em;
  position: relative;
  font-size: 1.2em;
  line-height: 1.8;
  color: #333;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  box-shadow: 5px 5px 0 #ff9933;
}

.single-post .entry-content blockquote::before, 
.single-post .entry-content blockquote::after {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  content: "\201C";
  color: #ff9933;
  font-size: 3em;
  position: absolute;
}

.single-post .entry-content blockquote::before {
  top: -10px; 
  left: -10px;
}

.single-post .entry-content blockquote::after {
  content: "\201D";
  bottom: -10px; 
  right: -10px;
}

.single-post .entry-content blockquote::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ffebc8;
  transform: translateX(-50%);
}

.single-post .entry-content blockquote p {
  margin-bottom: 20px;
  text-align: center;
}

.single-post .entry-content blockquote cite {
  display: block;
  font-style: normal;
  font-size: 1em;
  text-align: center;
  color: #555;
  margin-top: 20px;
}

上記のコードを使用すると、次のように引用符のスタイルが変わります。

土はまだ地面に戻り、神は与えられた神に戻る前に覚えておいてください。 伝道者が横になって無駄になり、無駄になるすべてが無駄になる

箴言12：17-18

メモ：

• WordPressにCSSを適用する方法[基本]