移行
      ホームに戻る
      2. 設定・管理
      3. 移行

      今あるLPをSquad beyondに実装する（HTMLエディター編）

      ページダウンロードの準備



      • 1ページだけダウンロードする場合
      1. 保存したいページをウェブブラウザのChromeで開きます。

        Chromeの右上の「Google Chromeの設定」⇒「その他のツール」⇒「ページを別名で保存」をクリックします。

        ※Macショートカットキー（Command + S ）でも保存できます

      2. パソコンの保存場所を指定します。その際にファイルの形式は「ウェブページ、完全」を選択して「保存」をクリックします。

      3. さきほど指定した保存場所にhtmlファイルと、その他の画像、JS、CSS関係のファイルが「_files」というフォルダに保存されます。

      4. これで保存終了です。

      • サイトごとダウンロードする場合(Mac)
      1. サイトをまるごとダウンロードするSiteSuckerアプリをダウンロードします。無料版は赤マークの箇所です。

        　　https://ricks-apps.com/osx/sitesucker/index.html

      2. ダウンロードしたdmgファイルをダブルクリックし、展開したらSiteSuckerアプリをApplicationsフォルダにドラッグアンドドロップします。

      3. 起動して、赤枠にダウンロードしたい実装したい元URLを入力、ダウンロードボタンをクリックでダウンロードフォルダに保存されます。

      4. これで保存終了です。

      • サイトごとダウンロードする場合(Windows)
      1. サイトをまるごとダウンロードするHTTrack Website Copierアプリをダウンロードします。

        http://www.httrack.com/page/2/

      2. ダウンロードしたファイルをダブルクリックして実行します。セットアップの案内がでたら「Next」をクリックします。

      3. ライセンス契約への同意が表示されたら、「I accept the agreement」を選択して「Next」をクリックします。

      4. インストール先フォルダはそのままにして「Next」をクリックします。

         

      5. スタートフォルダの指定もそのままにして「Next」をクリックします。


             

      6. 追加タスクの選択もそのままで「Next」をクリックします。

      7. インストールの確認が表示されたら「Install」をクリックします。

      8. インストールが始まるので、しばらく待ちます。

      9. セットアップが完了されたら「Finish」をクリックします。

      10. インストールが終わるとデスクトップにショートカットが作成されるので、ダブルクリックしてHTTrack Website Copierを起動。もしくはインストール後、そのまま起動されます。初回起動時のみ、言語選択のダイアログが表示されるので、「Japanese」を選択し「OK」をクリックします。

      11.  HTTrack Website Copierを再起動することで選択した言語が有効になります。
      12. 「次へ」をクリックします。



      13. ダウンロードしたいホームページの保存先情報を入力します。自分のパソコンの保存場所になります。半角英数字以外は失敗することがあるため、注意してください。



      14. ダウンロードするホームページのURLを入力します。「URLの追加」をクリックします。

      15.  URLの部分は「http://」表示ですが、「https://」の入力も大丈夫です。

         

         

      16. 「次へ」をクリックします。
      17. 「完了」をクリックするとダウンロードが始まります。

      18. ダウンロードが終わるとこちらの画面に切り替わります。「終了」を押します。これで保存終了です。

      Squad beyondへのアップロード

       

      1. <script>がJSファイルを読み込んでいる場合は、JSファイルをbeyondにアップロードします。
        • ※Macショートカットキー：command + option + U

        ページのソースコードから<body>タグと</body>の間のコードをbeyondのHTML欄に貼り付けます。

        <body>タグ内の<script>コードはJavascript body欄へ貼り付けます。


        ※ページのソースコード上でcommand + F を押すと検索がかけられます。

        　例：<body　と検索するとbodyタグの始まり、</body>　と検索するとbodyタグの終わりがヒットします。

         

         



      2. JSファイルをHTML欄右上にあるファイルアイコンからアップロードします。


        アップロードするとファイル名がリスト表示されます。

        該当ファイル右側に表示のアイコン３つの内、真ん中のアイコンをクリックすると、スクリプトを読み込む記述のタグごとコードがコピーされます。

        実装したい元LPのソースコード同様、上から順にJavascript Body欄へ貼り付けます。


        ※【左：ファイルURLのみコピーする】

        　【真ん中：ファイルを読み込む記述付きコードをコピーする】

        　【右：ゴミ箱へ移動する】


        ※beyond HTMLエディタへCSSファイル、JSファイルをアップロードすると

        　セキュリティにより、ファイル名は乱数名に変換されます。

        　HTMLエディタ内に置いたファイルがどのファイルかわからなくなった場合は、下図、赤枠のアイコンをクリックで、該当ファイル名のハイライト表示やファイル置換ができます。

         

      3. 画像一式をアップロードします。

        HTML欄へ貼り付けたコード内の画像パスが絶対パス（https://から始まるURLのパス）の場合は、右側の外部サーバー画像アップロードアイコンから、一括で各画像を元サーバーからbeyondのメディアフォルダへアップロードできます。

         

        相対パス（今いる場所（階層）を基準にして、ファイルがどこにあるのかを示す記述）の場合は、beyond HTML欄上で command + F を押すと、検索窓が表示されるので、検索後に一括置換で画像パスを相対パスから絶対パスへ変換することができます。

         

        画像パスを相対パスから絶対パスに置換することで、外部サーバー画像アップロード機能をご利用いただくことが可能になります。

        例：画像の相対パスが、/wp-content/uploads/画像名.jpg/ だった場合、前半の/相対パス/ 部分で検索後、ドメイン名/相対パス/ で一括置換すると画像パスが絶対パスになります。

         


        「外部サーバー画像アップロード機能」を使用しない場合は、HTML欄右上にある画像アイコンからアップロードします。

        ※「Versionにアップロードする画像を選択（４枚まで）」ボタンを選んだ場合、アップロード時点で、HTML欄へそれらの画像が自動的に追加されるため、「まとめてアップロードする画像を選択」ボタンから画像一式をアップロードしてください。

         



        ※SVGファイルはアップロードできないため他の画像形式へ変換します。

        変換サイト例：

        https://svgtopng.com/ja/

        もしくはPhotoshop、Illustorator画像加工ソフト等で変換



      4. 画像アップロード後、HTML内を「img」で検索してHTML欄に貼りつけたコードの<img>タグ画像パスをbeyondへアップロードした画像のURLに差し替えていきます。

        HTML欄右上にある画像アイコンから、画像を選択して、右側のコピーアイコンをクリックすると、画像パスがコピーされます。

        HTML欄上の差し替える画像パスと入れ替えます。

         


        HTML欄に貼り付けた実装したい元ページの画像パスが絶対パスの場合は、より簡単に画像を入れ替えられます。

        下記添付画像から赤枠の矢印アイコンをクリックします。


        編集画面上でのページプレビューが表示されるので、プレビュー内の画像をクリックするとbeyondのメディアフォルダが表示されます。

        beyondにアップロードした画像と元の画像を入れ替えます。


      5. HTML欄に貼ったコード<a>タグのリンクURLが相対パスの場合、絶対パスへURLを差し替えます。HTML欄で「href」で検索もしくは右側アイコン一覧のリンク置換からもURL変更できます。

      ダウンロードしたCSSファイルを開きます（編集ソフトをお持ちの方はスキップして、「次の7．CSSファイルアップロード前にファイル内を「url」で検索」へお進みください）

      MacのDockから「Finder」⇒「アプリケーション」⇒「テキストエディット」をクリックします。



      1. CSSファイルアップロード前に、ファイル内を「url」で検索して画像のURLがあればbeyondアップロード後の画像URLに差し替えて保存します。

        ※検索ショートカットキーは「Command + F」Macの場合

        ※.svgは変換した拡張子に変更

      2. CSSファイルの中に、@import "ファイル名.css"; や @import url("パス/ファイル名.css");という記述が先頭にあった場合、そのCSSファイルから別のCSSファイルを読み込む指定をしているため、それらのCSSファイルもbeyondへアップロードしていきます。

      3. CSSファイルとjavascriptファイルを、HTML欄右上にあるファイルアイコンからアップロードして、ページのソースコード<head>タグと</head>タグ内同様上から順にJavascript Head欄へ貼り付けます。

        ※真ん中のコードアイコンをクリックすると、スクリプトを読み込む記述タグごとコードがコピーされます。

      4. ※冒頭のページダウンロードの準備にて、ダウンロードできなかったCSSファイルや、JSファイルがあった場合は、該当ファイルを個別にダウンロードします。

        元LPページへ行き、検証ツールを開く（Macショートカットキー Command + option + i ）

        検証ツールを開いて、上側にある赤枠で囲んだSourcesタブをクリックすると、下にフォルダ階層が表示されるので、その中から該当ファイル名を見つけます。

        該当ファイルを見つけたら、ファイル上で右クリックを押すと、ポップアップが表示されるので、Save asを押してファイルをダウンロードします。


        ダウンロードしたファイルをbeyond HTMLエディター上へアップロードして、再度Javascript Head欄へペーストしていきます。



      5. これでHTMLエディタへのLP実装の完了です。

      注意事項

      • Lazyloadについて：Squad beyond内では画像にLazyloadが付与されます。

        • カルーセルやスクロールアニメーションなど画像の高さ取得が必要なスクリプトを使用していると、一部遅延ロード前に画像を読み込んだり、遅延ロード後に初期化やリフレッシュをするよう修正が必要な場合があります。

      • 画像最大幅について：アップロードした画像の横幅は最大1600pxに変換されます。

        • 横幅1600px以上の画像を使用している場合、移行時に表示崩れや画像の不鮮明化が発生することがあります。

      • 背景画像について：背景画像のbackground指定でurl部分に””（ダブルクォーテーション）がない場合は、背景画像がダウンロードされないので、chromeの拡張機能「背景画像を表示」を追加してダウンロードください。こちらからChromeに追加をクリックします。

        背景画像が表示されているページで右クリックより「背景画像を表示」で表示する事ができます。

         


        新しいタブに背景画像だけが表示されました。右クリックで「名前を付けて保存」で画像を保存できます。