「コメントを送信」ボタンの大きさを変更する方法：賢威7

今回の記事では、WordPressテーマ：賢威7のコメント欄に表示される「コメントを送信」ボタンの大きさを変更する方法を紹介したいと思います。

賢威7をインストールしたばかりの状態ではボタンが少し大きめに指定されているので、タイトル通りボタンの大きさを変更する方法と、それと一緒に文字の大きさや角の丸みを変更する方法も紹介していきます。

カスタマイズ前

↓ カスタマイズ前の「コメントを送信」ボタン

↓ ボタンの大きさを変更（ボタンを小さくして、一緒に角を四角に変更）

↓ ボタンの大きさを変更＋文字の大きさも変更

[ad]

今回のカスタマイズでは見た目を変更したいので、CSSファイルを編集していきます。

「コメントを送信」ボタンの大きさを変更するには、親テーマ（賢威7本体）の base.css や子テーマのCSSファイルに、以下のコードを追加します。

.btn-form01 {
    padding: 5px 10px;
    border-radius: 0;
}

これで「コメントを送信」ボタンが小さくなりました。

先ほどのコードでは border-radius: 0; というコードを追加して、丸かったボタンの角を四角にしましたが、丸いままの方が良い、という場合には border-radius: 0; を外して、、、

.btn-form01 {
    padding: 5px 10px;
}

というコードにすれば、ボタンの角が丸いまま大きさを変更することができます。

コメントを送信ボタンをお好みの大きさにするには、先ほどのCSSコードに出てきた padding: ○○px; 部分を編集します。

例えば縦7px、横12px の（余白の）ボタンにするには、

.btn-form01 {
    padding: 7px 12px;
}

となり、縦横 15px の（余白の）ボタンにする場合は以下のようになります。

.btn-form01 {
    padding: 15px;
}

ちなみにこれは、下のようなCSSコードにしても大丈夫です。
（縦横15pxのボタンが出来上がります）

.btn-form01 {
    padding: 15px 15px 15px 15px;
}

もし上のようなコードの省略に慣れていない、という場合には「css padding 指定省略」などで検索すると良いかもしれません。

最後に「コメントを送信」ボタンの文字サイズを変更してみましょう。
CSSファイルに下のコードを追加すると、、、

.btn-form01 {
    padding: 15px;
    font-size: 12px;
}

ボタンも文字サイズも小さくなります。

文字の大きさは、font-size: 12px; という部分で指定しているので、ボタンの大きさ（余白）と同じように、○○px 部分を変更すれば、お好みの文字サイズにすることができます。