ウェブつくには「free」スペースが最初から設定されていて、今回はこのfreeスペースを利用してTwitterのタイムラインを表示させる方法について解説します。
これからの時代はSEO対策だけではなく、SNS対策をすることでアクセスを集めるのが主流になってきているので、この設定は早い段階でやっちゃいましょう！
Twitterのアカウントを確認しよう
まずはTwitterのアカウントを確認していきましょう。
上の画像で私のTwitterアカウントを使って説明しています。
アカウントの確認部分としては上の画像の赤線の部分を見ます。
@affi_una
この2つが確認できると思います。どちらもTwitterのアカウントを示すものです。
https://～で始まるのはTwitter外の時に使うもので、Twitter内では「@affi_una」の表記でもリンクにすることができます。
詳しくは別の機会にまた説明させてもらいますね！
ではTwitterを実装する手順はこちらです。
- https://publish.twitter.com/に移動
- 埋め込みたいタイムラインのリンクを入力
- ウェブつくに合わせて高さ、幅、明るいか暗いか、を指定
- 表示されたコードをコピーしてウェブつくの表示させたい場所、今回は「free4」にペーストします。
- 保存➔サイト生成➔アップロード➔完了です
https://publish.twitter.com/に移動
サイトに移動したらまず最初に出てくるのがURLの入力画面。
どのTwitterアカウントの情報を扱うのか、扱うアカウントのURLを求められています。
URLを入力したらどんな表示をするのか、表示タイプを選びます。
ここではTwitterのタイムラインを更新しているのを表示したいので左側を選びます。
選んだら初期設定の表示が画面に表示されますが、ウェブつくのサイドバーに表示させるのには大きすぎるので表示させる範囲の設定をしていきます。
※これはwordpress（ワードプレス）のウィジェットに表示させるのと同じ設定です。
表示の設定をするのに赤い丸で囲った部分の文字「set customization options.」をクリックします。
そうしたら、高さ、幅、テーマカラーなどがカスタマイズできる画面になります。
今回は「高さ 700」、「幅 300」で設定して「updata」を押して決定します。
幅は300が良いと思いますが、高さに関しては好みにしていただいても問題はありません。
画面が戻ったら「copy code」を押して今設定したコードをコピーします。
無事にコピーできたらこの画面が出てきます。
ウェブつくに今コピーしたコードを設定していきましょう。
サイトエクスプローラー内で、「設定」➔「フリースペース」➔「フリー4（画像ではつぶやきと変更してあります）」とクリックします。
エディタ画面の下にある「テキスト」をクリックしてテキスト編集モードにします。
この状態で編集画面に先程コピーしたコードを貼り付け保存します。
「フリー４」の表示を変えるにはプロパティを表示させて「タイトル」を編集してください。
無事に設定ができたら「サイト生成」➔「アップロード」で確認してみましょう。