![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEaXiv835A4JpO6XmO-821eXKXmWdeltU8edmpf_mQtfX4ypZ9kJ7_e51JirLWFM1tcLLMZgedc2PdQUpzcB8qlwAOWG_FSWqBDPZ2-JnclGJ4Jko1jVkZ6H-E6e5f0_qVoj_xyEYepc_mUCjrUyXwys4Ccd6AHTZSfHxwdttZnNlyJDeFj52Jj9PhiY/s1600-rw/website-6700615_1280.png)
昨日としてはほぼほぼできてきたのですが、ここからはあったらいいな便利機能を搭載していきます。
今回は、以前から言っている、テンプレートHTMLをカスタマイズする機能です。
この機能を実装することでもはやデザインは独自デザインにすることができてしまうので、ツールをリピートで使用するメリットができてしまいます。
どんな機能?
今回のツールは、単純にAmazonアフェリエイトリンクをこれまでと同じ用に出力するという機能ではなく、デザインを重要視したいという、Web制作者の要望も組み込んだ(自分の要望)ツールなので、
今回構築するテンプレートのカスタマイズは、必須機能と言ってもいいでしょう。
Amazonの商品ページのURLを入力するだけで、バナーが作成されるという仕様はとても便利なので、テンプレートも一度セットしておくとその後変更されたテンプレートを使い続けられるという仕様を考えていました。
出来上がったHTMLは、単純にコンテンツHTMLとして独立してセットできるので、今回のコンバータとは切り離して表示できるため、その後のトラブルもシステム依存しずらいという形式にしています。
メリットはいろいろとありますが、デメリットとしては、以前にも書きましたが、動的な値に対応できないという点です。
あと、一度ホームページに貼り付けたタグは、その後デザインなどを変更したい場合は、手動で変更しなければならないというめんどくささはあります。
でも、ブログなどの固定化したほうが良いというケースもあるので、デメリットであってそっちの方がいいという意見もあるので、微妙デメリットして考えておくのがいいでしょう。
使い方
もうすでに構築したので、使い方を解説しておきます。
これまでの、URLやアソシエイトIDなどの設定箇所(コントロールパネル)の一番下に「HTMLテンプレート」という項目を追加しました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0bmHvsTiK9EB5NrvYhUzNrh2o9rHGnZC5zKRkX0MtvrkzeKrDfpFFPzSvjqlySalVmc_wmQYTDxTMJH_bsXVxkW3dlcitjd2m9jwyX6AA3iwo65qv_e9jYqdAiUVCXmieo-vQXJ5WOnkwr5hDrBTocH0tZxtDNjdtHJterJznuwygIAL6mblgXY7kFsg/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-13%2010.20.29%202.png)
となりにある「表示」の文字をクリックすると、設定画面が開きます。(もう一度クリックすると閉じます)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVPxYNqSGHwl8wj6bNHiwdev9twma7pssSgNmimUW1VriP1m9JZxtxk6sd4f5WbhzMC6ekJkkLnNsT-MN-GJJzUCdjZTx6A6hlnYENcy0-xxJIUsNKd4fN6vnkQchiWYWtnd9MhzJU_qehwm6ok9s9ezkytQvGcmjShL5gUJ9Xd4yMazloRoeUOmWQzY/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-13%2010.20.29.png)
設定画面は、こんな感じ。上部が入力フォームで、下部が説明になっています。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-WyKD6PmoomT1VFrzCJLPozRAIi8xsOa4212VM9tGlQcAv2qBSwC1B2I_0SrBg5nLaONWuJrOaKWdgS5svhcRMOtJCqcGZ-V2krD4rRsa-Xx4gYVeR7Qpbq5xs91PlNLVSsnQJJilG6CctO0XLldHKdVirqu5ZGfIiL-nbdK6l-Q51bzWUCU6zeYkwX8/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-13%2010.21.16.png)
上部のHTMLをお好きに書き換えるだけで自動的にテンプレートが保存されて、それだけでバナー表示(プレビュー)や、出力されたタグコードに反映されます。
もとのテンプレートに戻したい場合は、「リセット」文字をクリックしてください。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhra0K79mXNumIgKJC-XZtjlk4UirNRxunE9F6lflo9aPVYg9hNFR6m-Hem_V6duABBv4s0CWDCulYkThEL1k5AXkZFy71QI8wT26hyIB27g9gH9PiN5xGbOtb2OZO3PpwJAR5obHauXCiyDHFwJpwrjuL55TICkh-D_AwRMTjOOqLgooaWwID5MwEIDc/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-13%2010.25.18.png)
自分の変更したデータは消えてしまいますが、デフォルト提供の状態に戻すことができます。
※もし自分の変更を保持しておきたい場合は、現時点では機能を設けていないので、ご自身のローカル環境にファイル保存するか、メモ帳などにコピペして管理してください。
あとがき
アフェリエイトリンク作成ツールとしては、これでほぼ機能FIXだと思います。
このブログも今回で完了だと思った人・・・まだまだ甘いですね。
もっともっと使いやすくするポイントがあるんですよ。
引き続き次回以降も楽しみに読んでみてください。
エンジニアポイントがアップするかもね。
0 件のコメント:
コメントを投稿