各種ツールの使い方

マイスピーの登録ボタンを画像に変更する方法!外部埋め込みタグを編集

こんにちは!

今回は、メルマガ配信スタンド「MyASP(マイスピー)」の登録フォーム編集についてのお話です。

外部サイトに登録フォームをする際に「登録ボタンをもう少しかっこよくしたい!」と感じる方は多いと思います。

かといってCSSなどでボタンを作るのは難易度が高い…

そこで、登録フォームのボタンのデザインを変える簡単な方法を解説させていただきます!

マイスピーの登録フォームのボタンデザインを変えたい!

マイスピーの登録フォームを外部サイトに設置するのは「登録フォームタグ」というものを貼り付けていく方法を使います。

ですが、デフォルトの状態だと文字も小さくてあまり目立たないんですよね…

なので今回は自分でボタン画像を作って、それを登録フォームに対応させる方法を解説していきます。

まずは画像を作る

まず初めに、元となるボタン画像を作っていきます。

画像が作れれば何で作ってもOKです^^

今回はKeynoteを使います。

画像を作ったらスクリーンショットでボタンだけを切り取って下さい。

こんな感じです。

登録フォームタグを編集して画像に変更

では、ボタン画像を登録フォームに入れていきましょう。

まずマイスピーのシナリオ管理メニューから「登録フォームタグの発行(HTML)」をクリック。

出てきたコードをコピーします。

このコードを登録フォームを設置したいサイトに貼り付けていきます。。

今回変更するのは、以下のコードです。

<input type=”submit” value=”登録する” />

上記の部分を以下のコードに変えてください。

<input type=”image” src=”(使用したい画像のURL)” alt=”登録する” />

※”無料で受講する”の部分はデフォルトでは”登録する”となっています。

これで画像ボタンを使用することができます。

この中の(使用したい画像のURL)という部分に先ほど作成した画像のURLを入れれば完了です。

画質を保ちながらサイズを変える

画像の取り込み方については、メディアを追加>ファイルをアップロード>新規追加で読み込ませた画像のURLをコピーしていきます。

ですが、この方法だと画像が大きすぎてボタンがとんでもない大きさになってしまうことがあります(笑)

この時の画像サイズは772ptなので当然こんな形になります。

なので、元画像の大きさを調整する必要があります。

PhotoScapeでサイズをいじると画質が悪くなってしまうので、ここでは違う方法を紹介させていただきます。

まず、コードから離れた場所or違うサイトのワードプレス画面のテキストエディタを開いてください。

※あとでコードに挿入するので、今はコードを触らないような場所で画像を調整していきます。

先ほど作成した画像をメディアを追加>ファイルをアップロード>新規追加で読み込ませましょう。

読み込んだら「投稿に挿入」をクリック。

そうすると、かなり大きいサイズのボタン画像が出てきます。

このままだと大きすぎてしまうので、ビジュアルエディタで直接画像をクリックしてサイズを変えていきます。

画像をクリックすると四隅に四角のマークが出てくるので、これをドラッグしてサイズを調整してもいいです。

ただ、それだと細かいサイズまで調整するのが難しいので「Edit|button」をクリックして編集するのがいいでしょう。

すると画像詳細画面が展開されますので「サイズ」のプルダウンから「カスタムサイズ」を選択し、幅を好みのサイズに変更して「更新」をクリックしてください。

そうすると画像が小さくなりますので、ここでテキストエディタに変更してください。

今回はhttps://〜116までを選択します。

画像のURLだけでなく、サイズの指定部分までの選択です。

そうしたら、先ほどのコードに戻り(使用したい画像のURL)という部分にペーストしてください。

()マークもちゃんと消してくださいね!

そうすると、大きかったボタンが小さく表示されるようになりました。

もっと小さくしたい場合は、また画像を編集してコードを作り直しましょう。

これで簡単にボタンが画像に変更できました。

お名前欄の改行の位置が変なのは、また別の時に調整方法を解説させていただきます。

画質が悪くなるのでオススメできないやり方

最後に番外編として、画質が悪くなるのでオススメできないやり方をいくつか紹介させていただきます。

上記のやり方以外で自己流で色々試した失敗例をここでお話ししておきますね^^

PhotoScape

私の作り方が下手だったのかもしれませんが、あまりうまくいかなかったのがPhotoScapeX。

今回紹介した方法で作ったスクショを編集した画像がこちら。

対して、PhotoScapeXで作成した画像がこちらです。

スクショの方が画質がいいのが分かりますね。

投稿に挿入する前に画像編集

今回の解説を見て、せっかちな方はもしかしたら画像を投稿する前にサイズを編集されたかもしれません。

メディアを追加>ファイルをアップロード>新規追加の次に「画像を編集」でサイズを変えるのも確かに可能です。

あまりやり方は変わらないように見えますが…結果これだけ画質に差が出ました。

上は挿入後に編集したもの、下は挿入前に編集したものです。

全然違いますよね!

登録ボタンの画質が悪かったり見栄えは悪いとちょっとカッコ悪いですよね。

ぜひ今回の方法を使ってボタンをかっこよくてカスタマイズしてみて下さい!

まとめ

マイスピーの登録フォームタグを編集してボタンのデザインを編集する方法を解説しました。

せっかく設置するならボタンもおしゃれなものにしたいですよね。

今回の方法を活用していただければ、デフォルト状態よりも目立つかっこいいデザインになります。

CSSをいじるのが苦手な方は、ぜひこの方法でボタンを設置してみてください!

最後まで読んでいただき、ありがとうございました!

Juri
Juri
私は現在、PC1台でシゴトをしながら湘南ライフを送っています。

海が近くにある大好きな街で、好きな時に起きて、好きなだけ働いて、好きな人とだけ過ごす...こんな自由な生活をしています。

今でこそストレスフリーな生活を送っている私ですが、つい最近までは普通の銀行員で家と職場を往復するだけの平凡な毎日を過ごしていました。

やりたいことはもちろん、これといって得意なことも、夢中で打ち込めるものもありませんでした。

では、私はどうやってここまでたどり着いたのか...興味がある方はよかったら私のプロフィールをご覧ください。

こちらからどうぞ▶︎▶︎JuriのPROFILE