CMSで会社のホームページを作ってみよう
-第5弾-TwitterをHPに埋め込む

2017年1月20日

CMSで会社のホームページを作ってみよう第5弾では、ホームページにTwitterのタイムラインを埋め込む方法をご紹介します。

前回までの記事はこちら

目次

  1. 1. タイムリーなつぶやきで反響アップ
  2. 2. アルファメールプレミアで会社のホームページを作ろう
    1.表の挿入
    2.トピックスの追加
    3.Twitterの埋め込みコードを挿入
    (1) Twitterの管理画面からコードを取得
    (2) 埋め込みコードを貼り付ける
    4.表示を整える

1.タイムリーなつぶやきで反響アップ

数年前からTwitterを宣伝に活用している企業も多いと思います。例えば、不動産会社の場合、空き物件の情報を載せたり、キャンペーンの告知をしたりとタイムリーな宣伝ができます。物件情報を見たユーザから返信が来たり、リツイートされて拡散されたりと大きな反響を呼ぶこともあります。

今回は、Twitterのタイムラインをホームページに埋め込む方法をご紹介します。

2.アルファメールプレミアで会社のホームページを作ろう

第1弾第2弾で作ってきた架空のリフォーム会社「ダイレクトリフォーム」のホームページにTwitterのタイムラインを埋め込むことでより親しみやすいホームページに仕上げていきたいと思います!

1. 表の挿入

アルファメールプレミアの会員サイトからログイン後、「Webサイト作成」をクリックし、管理画面に入ります。
※初回設定時にWebサイト作成メニューから「通常メニュー」で作成したサイトを編集しています。「簡易メニュー」ではありません。
編集ページ一覧からトップページを選び、「ページの編集」をクリックします。前回までに「リフォーム施工実績」のコンテンツまでを作成しました。

まずは、表の挿入でコンテンツの枠を作ります。

ツールバーから「表の挿入」を選択し、列数「2」、行数「1」、「枠線なし」にチェックを入れて、表を挿入します。

施工実績の下に表が挿入されました。

2.トピックスの追加

挿入した表の左枠にカーソルを合わせて、「見出し」の「Headline2」を挿入します。
「見出し」を「トピックス」に書き換えて、見出しの下に日付とコメントを書き込みましょう。

3.Twitterの埋め込みコードを挿入
(1)Twitterの管理画面からコードを取得

Twitterの管理画面にログイン後、自分のアイコンをクリックして設定画面に入ります。

左メニューから「ウィジェット」のページを表示させます。
ウィジェットの「新規作成」から「リスト」を選択します。

下の画像のような英語のサイトが開きます。


空白の部分に自分のTwitter URLを入力します。


URLを入力すると、Twitterタイムラインのプレビューが表示されます。
今回は、ホームページに埋め込むタイムラインのサイズも決めたいので、「set customization options.」をクリックして詳細を設定します。

サイズの「Height (px)」に「500」、「Width (px)」に「340」と入力し、「Update」のボタンを押します。

希望サイズのタイムラインが表示されたら埋め込みコードをコピーするために「Copy Code」をクリックします。

(2)埋め込みコードを貼り付ける
Twitterの管理画面でコピーした埋め込みコードをCMS編集画面に貼り付けます。

挿入した表の右枠にカーソルを合わせて、上部のツールバーから「<>タグ」をクリックします。「HTMLタグ挿入」の画面が表示されます。取得したTwitter埋め込みコードを貼り付けて、挿入ボタンを押しましょう。

Twitterのタイムラインが表示されます。

4.表示を整える

Twitter部分に見出しを付けて、表示も中央揃えに整えます。
まず、挿入したTwitterのタイムライン左上にカーソルを置いて、見出しを付けます。
見出しには「Twitter」と書きましょう。

Twitterの見出しにカーソルを合わせて右クリックし、「セルを上揃えに変更」を選択します。

最後に、Twitterのタイムラインを中央揃えにします。Twitter部分にカーソルを合わせて、ツールバーの「中央揃え」をクリックします。「トピックス」と「Twitter」の欄を綺麗に整えることができました。

これで、ホームページにTwitterのタイムラインを埋め込むことができました。

チュートリアルはいかがだったでしょうか。アルファメールプレミアのCMS機能を使って、ホームページを作成し、FacebookやYouTube、Twitterを埋め込むことでより充実したサイトに作り上げました。 アルファメールプレミアでは、14日間無料体験ができますので、ぜひお試しください。

提供するサービス

co.jpの取得に最適  アルファメールの紹介サイト

0120-528-258 平日9:00~18:00(弊社休業日を除く)
メールでお問い合わせ