Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生した問題への対処時のメモ、ブロックテーマのカスタマイズなど

コメントブロックの「送信」ボタンを右寄せにする方法(メモ)

WordPressのコメントブロックのフォームにある「コメントを送信」ボタン。

なんだか左寄せになっているのが気に入らないので、右寄せにする方法をメモしておきます。

コメントブロックを使うのはブロックテーマのみだと思いますので、ブロックテーマを使用しているものとして紹介します。

手順1 CSSクラスを追加する

サイトエディターで、個別投稿や自身で追加した投稿用テンプレートを開き、コメントブロックを指定します。

右サイドバー最下部にある「高度な設定」を開き、「追加CSSクラス」欄へ適当なCSSクラスを追加します(このページのコードの場合は「ha-comment」を追加したものとして紹介します)。

手順2 スタイルコードを追加する

子テーマのstyle.cssなどへ、以下のコードを追加します

.ha-comment p.form-submit.wp-block-button {
    text-align: right;
}

たったこれだけで、本ページのように「コメントを送信」ボタンが右寄せになります。

最新のWordPressでは、テーマのグローバルスタイルで、ブロックごとにスタイルコードが追加できるようになっています。ブロックごとのCSSが利用できる場合は、そこへ追加してもいいでしょう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

※リンクやURLの挿入されているコメントは無視します

WordPressサイトのカスタマイズ方法、機能追加を行うプログラム例など
functions.phpからセキュリティヘッダーを追加する方法(例)