1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebにツイッターのタイムラインを表示

iWebにツイッターのタイムラインを表示

最近ツイッターを始める方も増えてきていますが、iWebで制作したホームページ上に、ツイッターのタイムラインを表示させたいという方も多いのではないでしょうか。 そ […]

  • 2016/5/4
  • 2010/3/7

最近ツイッターを始める方も増えてきていますが、iWebで制作したホームページ上に、ツイッターのタイムラインを表示させたいという方も多いのではないでしょうか。

そこでこのページでは、ツイッターの公式ウィジェットを使って、タイムラインを表示させる方法をご説明します。

ウィジェットのソースコードを取得する

まずツイッターのウェブページでタイムラインをホームページ上で表示する「プロフィールウィジェット」のソースコードを取得します。ソースコードの取得の前に、必ずご自分のアカウントでツイッターにログインをしておいてください。

  1. Twitterにログインして、プロフィールウィジェットのページにアクセスします。
    Twitter / ウィジェット作成
  2. Preferences画面で表示する項目の設定
    次に左側のメニューにある「Preferences」メニューを選択します。

    これはウィジェットに表示させるツイートの数やタイムスタンプの表示/非表示などを設定する画面です。

    いろいろな設定があり、すべて英語で表示されていますが、それほど難しいものではありません。

    もし分からなければ画面下にある「Test settings」ボタンを押すと、設定した内容が右側のプレビューに表示されます。
    いろいろと試して、自分の好みにあう設定にしましょう。

  3. デザインとサイズの設定
    表示させるツイートの設定を行ったら、デザインをサイズを調整します。デザイン画面では、外枠の背景やリンク文字の色など細かく設定できます。

    ご自分のホームページのデザインに合わせて調整してください。またサイズも同様に、ウィジェットを配置する位置に合わせ、横幅と高さを調整します。

  4. 設定が終わったらソースコードを取得
    すべての設定が終わったら、画面の下にある「完了&コード取得」を押します。

    すると画面上に設定したウィジェットのソースコードが表示されます。このソースコードをすべてコピーしておいてください。

iWebでツイッターのウィジェットを表示させる

ツイッターのウィジェットのソースコードを取得したら、iWeb上でHTMLスニペットを使って表示させます。

iWeb’08では「メディアを表示」ボタンをクリックして、HTMLスニペットをウェブキャンパス上にドラッグし、iWeb’08では「Webウィジェット」ボタンから「HTMLスニペット」を選択します。

HTMLスニペットが表示されたら、先ほどコピーしたソースコードを貼付けて「適用」ボタンを押すだけです。
これでiWeb上にツイッターのタイムラインを表示させるウィジェットが表示されたはずですので、後はページ上のお好きな場所にウィジェットを移動させれば完了です。

TwitterのタイムラインをHTMLスニペットで設定しているところ

ツイッターのウィジェットに限った事ではないのですが、外部のウィジェットをiWeb上に配置する場合は、配置したウィジェットの下にあるテキストや画像などのオブジェクトとの間隔は、気持ち広めの方が良い事が多いです。

ツイッターウィジェットでは、ツイートの文字数によって行数が変わり、ウィジェットの高さも若干変わる事がある為です。
iWebのウェブページキャンパス上では問題なく表示されていても、実際にブラウザで見たら、ウィジェットの下にあるテキストに被っていた・・・なんて事もしばしばです。

ウィジェットを配置したら、必ずブラウザで位置やサイズを確認しておきましょう。

ツイッターの公式ウィジェットにはボタンも用意されています

余談ではありますが、ツイッターの公式ウィジェットには「フォローしてください!」などのボタンも用意されています。このボタンもタイムラインのウィジェット同様、HTMLスニペットを使ってiWebに配置する事ができます。

ただソースコードをそのままHTMLスニペットで配置すると、ボタンの周りにリンクのボーダーが表示されてしまいますので、ちょっとだけ加工が必要です。

下のように、画像を読み込んでいるタグの一番後ろに半角スペースを空けて「border=”0”」という指定を追加してください。これで、ボタンの周りにリンクのボーダーは表示されなくなります。

<img src="http://twitter-badges.s3.amazonaws.com/ja_follow_me-a.png" alt="Follow lblevery on Twitter" border="0" />

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

「役にたった」と思ったらシェアお願いします