レスポンシブ

まぐまぐの登録・解除フォームを 「レスポンシブ化&HTTPS化」 する方法

まぐまぐの登録・解除フォームは2018年7月6日現在、レスポンシブ化&HTTPS化されていません。

そのため、ブログやサイトなどをレスポンシブ化し、スマホやタブレット端末向けに最適化したページにまぐまぐの登録・解除フォームを埋め込むと、“はみ出してしまう”ことがあります。

同じようにブログやサイトをHTTPS化しても、まぐまぐの登録・解除フォーム埋め込みタグがHTTPS化されていないため、フォームを埋め込むとHTTPS状態に“ならない”、という残念な状態になってしまうのが現状です。

この記事ではこの2つを解決する方法を紹介しています。

Step1:レスポンシブ化する方法

次の手順で行います。

  1. 登録・解除フォーム「バナータイプ」をコピーしてテキストエディタに貼り付ける
  2. 該当部分を変更する
  3. 完了

1.登録・解除フォーム「バナータイプ」をコピーしてテキストエディタに貼り付ける

まず、まぐまぐにログインして自分が発行しているメールマガジンの「バナータイプ」のタグをコピーし、テキストエディタなどに貼り付けます。

 

まぐまぐ登録フォームタグ取得画面

↑画像の赤枠部分を全てコピーして、テキストエディタに貼り付けます。

テキストエディタはWindowsであればTeraPad、ChromebookであればCaretがオススメです。Macは使ったことはありませんが、標準で搭載されているテキストエディットで問題なさそうです。(私は現在Chromebookを使用しているので、それ以外の環境での方法は厳密には詳しくありません。)

2.該当部分を変更する

テキストエディタ内を、次のように変更してください。

  • width:500px;width:100%;
  • size=”35″size=”auto”

先程貼り付けたテキストエディタでCtrl+F(MacならCommand+F)を押してwidth:500px;を検索→width:100%;に変更。同じようにCtrl+Fを押してsize=”35″を検索→size=”auto”に変更。

(補足:Ctrl+FとはCtrlキーとFキーを同時に押すこと。Command+FとはCommandキーとFキーを同時に押すこと。これを使うことで、文章内を検索できるようになる。)

3.完了

これでレスポンシブ化は完了です。

Step2:HTTPS化する方法

次の手順で行います。

  1. 引き続きテキストエディタの内容を変更していく
  2. 該当部分を変更(置換)する
  3. 完了

1.引き続きテキストエディタの内容を変更していく

レスポンシブ化が完了したまぐまぐの登録・解除フォームのタグが今、テキストエディタに表示されているはずです。

このテキストエディタの内容を次から変更していきます。

補足1:一括置換したいなら、「一括置換できるテキストエディタ」に貼り付ける

この後、文字を11個置換する作業があります。1つ1つ置換するのが面倒くさい場合は、一括置換がオススメです。そのためには「一括置換できるテキストエディタ」を使います。

一括置換できるテキストエディタは先程オススメしたモノと同じです。

  • Wsindows:TeraPad
  • Mac:標準搭載のテキストエディット(参考
  • Chromebook:caret

それぞれを用意して、そのテキストエディタに、Step1で変更した「レスポンシブ化が完了した、まぐまぐ登録・解除フォーム」のタグを貼り付けます。

2.該当部分を変更(置換)する

タグ内にある「全てのhttp」をhttpsに変更(置換)します。

  • httphttps

レスポンシブ化する時と同じようにCtrl+Fでhttpを検索してhttpsに変換します。

※バナータイプの登録解除フォームのタグ内には「httpは11個」あります。その全てをhttpsに置換します。

新しいソフト(テキストエディタ)を使うのが面倒くさい場合は、1つ1つ手作業で置換していけばOKです。手作業でやる場合は11回、httpをhttpsに変更することになります。

補足2:1つ1つ置換するのが面倒くさい場合は一括置換する

一括置換する方法はそれぞれのテキストエディタで違います。

それぞれのテキストエディタで一括置換する方法は次を参照してください。

  • Windows:TeraPad
    • TeraPadでテキストの特定の文字列を一括変換する | Web Labs http://web-laboratories.com/terapad-okikae
  • Mac:標準搭載テキストエディット
    • Macのテキストエディットで文章中の狙った文字を全部一括で変換する方法 | へんもぶろぐ https://henmo.net/2016/06/02/okikae/
  • Chromebook:caret
    1. caret上でCtrl+Hを押して
    2. Search for部分にhttpを入力
    3. Replace with部分にhttpsを入力
    4. Replaceの右横「All」をクリック

3.完了

これでHTTPS化は完了です。

。。。

後は、フォームを表示させたい場所に、テキストエディタの内容(まぐまぐ登録・解除フォーム「バナータイプ」)を貼り付けて保存するだけです。

これで、まぐまぐの登録・解除フォームをレスポンシブ化&HTTPS化できました。