FC2メールフォームをCSSでカスタマイズする方法

  • 投稿 : 2011-05-27
  • 更新 : 2020-01-25

本記事は広告およびアフィリエイトプログラムによる収益を得ています

追記:2020/01/25
いまだに、アクセスがあるようなので、書き直しました。

idとかclassを調べる方法


Chromeの場合は、ブラウザ上で表示させて、右クリックメニューの「検証」を選択します。


そうすると、javascriptで生成されたHTMLがそのまま表示されます。これで、idとかclassが判明するので、これを使ってCSSを書くだけになります。

※を(必須)に書き換える方法


<style>
#coution2:after{
  content:"(必須)";
  visibility:visible;
  font-weight:500;
}
#coution2{
  visibility:hidden;
}
</style>

たとえば、※がわかりにくいので、必須という文字に置き換えたい場合は上記のようなCSSをついかすれば可能です。

以前の記事

idとかclassとかわからないからと悩んでいる人向けの記事です。
HTMLのソースを見るとJavascriptなので分からないです。そこでブラウザー上で範囲を指定してホームページ作成ツールに貼り付けします。すると、出力されているHTML形式で貼りついてHTMLソースをみれば、idとかclassなどがわかるようになります。

私が設置しているメールフォームだと以下のようになります。
fc2mailform20110527.html
※ファイルを保存して、ソースをみれば判明します。

私は、ホームページビルダしか持ってないのでわかりませんが、Windowsの標準機能のコピー&ペーストだと思うので、たいていのホームページ(WEB)作成ツールでもそうだろうと思います。

ホームページ・ビルダー16 体験版 (Vector)もありますので、試用がてらに使ってみてもよいでしょう。(試用期間:30日)


スポンサーリンク