お役立ち情報 ブログ

ブロックエディタで引用文章の引用元だけを右寄せにする方法【WordPress】

2021年8月21日

ブロックエディタで引用元を右寄せしたい。

だけど、引用文章まで一緒に右寄せされてしまう。

引用元だけを右寄せするにはどうしたら良いんだろう…。

こんな疑問にお応えする記事です。

この記事でわかることは、下記のとおりです。

この記事でわかること

  • ブロックエディタで引用文章の引用元を右寄せにする方法がわかる

結論、 外観→カスタマイズ→追加CSSにコード入力するだけ。

追加CSSコード

.wp-block-quote > cite {

    display: inline-block;

    text-align: right;

    width: 100%;

}

ぜひ、参考にしてくださいね。

CSSを追加して引用元を右寄せにする

ブロックエディタで引用元だけを右寄せするには、追加CSSを入力するだけ。

WordPress上の「 外観 」→「 カスタマイズ 」を選択します。

quote-right

カスタマイズを開いたら、テーマメニュー内「 追加CSS 」を選択します。

quote-right

追加CSSの一番下にコード入力ができますので、下記のコードを入力。

quote-right

追加CSSコード

.wp-block-quote > cite {

    display: inline-block;

    text-align: right;

    width: 100%;

}

CSSコードを入力したら、「 公開 」します。

これで完成。

記事内では、引用文が一緒に左寄せになっています。

プレビューや公開で見ると、引用元だけ右寄せになっています。

記事内で中央寄せに設定すれば、全て中央寄せになります。

プレビューで見ると引用文は中央、引用元は右寄せに。

まとめ:ブロックエディタで引用文章の引用元だけを右寄せにする方法

結論、引用元だけを右寄せにしたい場合は追加CSSコード入力するだけ。

外観→カスタマイズ→追加CSSに下記のコードを入力します。

追加CSSコード

.wp-block-quote > cite {

    display: inline-block;

    text-align: right;

    width: 100%;

}

今回のCSSコードを追加するだけで見栄えが良くなりますね。

見た目もブログ運営では重要な要素のひとつですから。

この記事があなたの参考になるとうれしいです。

スポンサーリンク

-お役立ち情報, ブログ
-, , ,