【模写】iSaraサイト模写 コンバーション編

isara 【プログラミング】


こんにちは、すずです。

現在、フロントエンドエンジニアの大定番「iSara」のサイト模写をやっています。
そこで得た知識をブログにアウトプットしていこうと思います。

では、早速参りましょう!

【模写】iSaraサイト模写 コンバーション編

  • 制作時間:2H
  • 作業:テキスト追加、お問い合わせボタン・SNSボタン追加、センタリング

つまづいた部分とその解決法

SNSボタンの作り方

画面下部にある、このTwitterとFacebookのボタン。
これをどう作ろうか悩みました。

<button></button>と1から作ろうとも考えましたが、なんと、ボタンを簡単に作る方法がありました。

Twitterボタンの作り方と、Facebookボタンの作り方を、順番に解説していきます。

◆Twitterボタンの作り方

まずは、Twitterのツイートボタンを作ります。
下記のサイトで、簡単に作ることができます。

開くと、こんな画面が出てきます。

下に少しスクロールして、赤枠の「TwitterButtons」をクリック。

そうすると、このような画面が立ち上がるので、赤枠の「Share Button」をクリック。

そうすると、こちらの画面に戻ってくるので、赤枠の「set customization options.」をクリック。

あとは、「What language would you like to display this in?」のセレクトボックスから「Japanese」を選び、右下の[Update]ボタンを押す。

これで、ボタンが完成しました。
画面下部に、今作成したボタンのサンプルができています。

あとは、[Copy Code]をクリックして、aタグをコピーし、HTMLに貼ってあげればOKです。

◆Facebookボタンの作り方

次に、Facebookのいいねボタンとシェアボタンを作ります。
下記のサイトで、簡単に作ることができます。

いいね!ボタン – ソーシャルプラグイン
https://developers.facebook.com/docs/plugins/like-button

開くと、こんな画面が出てきます。

そうしましたら、レイアウトのセレクトボックスから「button」を選択。
「シェアボタンを追加」にチェックがついていることを確認し、[コードを取得]を押す。

そうすると、コードが生成されます。

今回はJavaScriptではなく、IFrameの方を使いたいので、赤枠の「IFrame」をクリックしてから、コードをコピーし、HTMLに貼り付けてあげればOKです。

完成したSNSボタンがこちら。

お手本どおり、できていますよね。

まとめ

以上、iSaraサイト模写 コンバーション編でした。

今回のミソは、SNSボタンだったと思います。

知っている人にとっては超簡単だったかもしれませんが、わたしのようにツールを初めて知った方もいらっしゃるのではないでしょうか?

これから模写する方にも、今回の記事が役立てばいいなと思っております。

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