今日は、Wordpressの人気プラグイン、Contact Form7で「メッセージ本文」の横幅と縦幅を調整する方法のご紹介です。この記事は我流の設定方法をご紹介するものですので予めご承知おきくださいませ。
＜ポイント＞
・横幅と縦幅はオプション値を設定することで変更することができる。
＜オフィシャル解説ページ＞
コンタクトフォームオフィシャルページの該当解説箇所
１．Contact Form 7
Wordpressユーザーには言わずと知れたプラグインの概要は、改めてご紹介するまでもないでしょう。プラグインを導入し、ショートコードを貼り付けるだけでお問い合わせフォームが作れるというとても便利で人気あるプラグインです。
２．本文の横幅を変更してみる
デフォルトの「メッセージ本文」記入欄は少々小さく、スタイルを考えると、横幅を広げてやりたい処です。
ところで、日本語で書かれたオフィシャルページの「使い方」によると、外観については、ショートコードにオプションタグを設定することで実現できるようですが、メッセージ本文の横幅調整の手法についてはグーグル先生に色々と聞いてみても答えが見つかりませんでしたので、お役に立てればと今回出稿しております。
なお、私の方法は、ショートコードのオプション設定を変更して簡単に横幅を変えてしまおう、と言う考え方に基づいています。スタイルシートを使って設定することは最初から考えていません。
３．具体的な方法
まず、管理画面の左側に縦表示されるメニューバーにある「お問い合わせ」をクリックして設定を行います。「お問い合わせ」をクリックすると
次の画面が表示されます。
この中で、本文の設定は、赤丸で囲んだ部分ですので、ここにオプションを付け加えます。
さて、ここでは設定値に関し２カ所に留意する必要があります。この例では、「60/10」としていますが、この「60」は、半角での文字数を、「10」は行数を表しています。つまり、単位が「ピクセル」ではないことが、最初の留意点です。
また、オフィシャルの解説では、オプションの記載方法を「40×10」と言う風に書いていますが、この「x」は「半角小文字のエックス」です。私は「/」を使って上手くいきましたのでそのままにしています。これが二つ目の留意点です。
私は最初、単位がピクセルだと思い、「600/200」で設定すると…「なんじゃこりゃ？」と言った大きな枠になりました。
横幅の設定値が文字数であると言うことは、「スタイルシートで設定した当該箇所の横幅と本文入力欄の横幅をドンピシャリで調整するのは難しい」ことを意味していますね。本当にジャストで合わせるならスタイルシートで設定する必要があるでしょう。
この方法でピッタリなように合わせるなら、大まかな処までは目分量で設定して、後は「１」単位ずつ増やしたり減らしたりしながら、その都度設定を保存して画面をリフレッシュして確認するのが、原始的ながら、もっとも分かりやすい方法ではないかと思います。
ご参考になれば幸いです。