「知りたいことだけピンポイントでレッスンしています」
湘南・茅ヶ崎のパソコンスクールFLEX Web（フレックス ウェブ）のミナベです。
アメブロのサイドバーにTwitterのタイムラインを埋め込む方法をご説明します。
手順は次の3ステップとなります。
- Twitterタイムラインのウィジットを作成する
- アメブロのプラグインにTwitterウィジットを追加する
- アメブロのサイドバーにTwitterウィジットを配置する
STEP.1 Twitterタイムラインのウィジットを作成する
Twitterにログインし、設定画面を表示します。
左サイドメニューの下のほうに「ウィジット」ボタンがあるので、クリックしてウィジット画面を表示します。
右上に「新規作成」ボタンが表示されるのでクリックすると、メニューが縦に並んだプルダウンが表示されるので、その中の「プロフィール」をクリックします。
ウィジット作成画面が表示されます。ページを少しスクロールすると、Twitterウィジットの表示スタイルが4つ表示されます。今回はTwitterのタイムラインを表示しますので、右から二番目の「Embedded Timeline」をクリックします。
背景が透けた黒い画面が表示されるので、入力欄にご自身のTwitterアカウント名を入力します。FLEX webの場合は、わたくしミナベのTwitterアカウントを使っているので「@desco_dayo」となります。
入力後、「Preview」ボタンをクリックします。背景が透けた黒い画面が消えます。
ウィジット作成画面に、ご自身のTwitterアカウントのタイムラインが大きく表示されていると思います。このままのサイズでは、アメブロのサイドバーからはみ出してしまうので、ぴったり収まるようにサイズ調整を行います。
水色で書かれた「set customization options.」という文字をクリックします。
Twitterタイムラインウィジットのサイズや色を変えられる入力欄が表示されます。
左側の入力欄は縦幅なので「600」と入力します。右側の入力欄は横幅なので「300」と入力します。pxなどの単位は必要ありません。
必要であれば、ご自身のアメブロに合うように、色を変えたりしてみてください。
「Update」ボタンをクリックします。
「Update」ボタンをクリックすると、先ほどまで大きく表示されていたタイムラインが細長サイズになったことが確認できると思います。
この細長サイズのTwitterタイムラインのウィジットのソースコードをコピーします。「Copy Code」ボタンをクリックすれば、コピーされます。
コピーが成功するとCopied!と書かれた後ろが透けた黒い画面が表示されるので、「×」ボタンをクリックして黒い画面を閉じます。
Twitterでの作業はこれで終わりです。
STEP.2 アメブロにTwitterウィジットを追加する
アメブロの設定・管理画面のサイドバー設定「プラグインの追加」画面を開きます。
「フリープラグイン」のタブを選択し、先ほどコピーしたTwitterタイムラインウィジットのソースコードを入力欄にペーストします。
最後に「保存ボタン」をクリックします。
STEP.3 アメブロのサイドバーにTwitterウィジットを配置する
アメブロの設定・管理画面の配置設定「サイドバーの配置設定」画面を開きます。
「使用しない機能」の欄にある「フリープラグイン」を、「使用する機能」の一番右側のカラムにドラッグアンドドロップして移動させます。並び順は、ご自身のアメブロに合わせて変えてみてください。
最後に「保存ボタン」をクリックします。
以上で設定は終わりです。
ご自身のアメブロのサイドバーに、Twitterタイムラインが正しく表示されているか確認してみましょう。
アメブロのスキンによっては、横幅が300では大きい場合があるかもしれません。その場合、プラグイン追加画面の入力欄にペーストしたソースコード内の「300」という数値を小さくしてみてください。「280」とか「250」とか試してみていただければと思います。縦幅も「600」が絶対というわけではありませんので、適宜変更してみてください。
FLEXwebではTwitterアカウントを作っていないので、講師ミナベのTwitterタイムラインをアメブロに表示しています。
Twitterは、私がどんな人物なのかがちらっと見える、そんな役割を担っています。平日は毎朝オラクルカードを引いてその日のヒントを考察しているので、写真とともにそのことについてツイートしています。夜は夜で、楽しみにしている晩酌のツイートをしています。関心事や面白画像や動画をリツイートしたりもしています。
Twitterで親近感を抱いてもらえることもあると思いますので、上手に活用してみていただければと思います。
お読みいただき、ありがとうございました。
湘南・茅ヶ崎のパソコンスクール FLEX Web（フレックス ウェブ）のピンポイント問題解決レッスンでは、今回ご紹介した「Twitterタイムラインウィジット表示のやり方」もマンツーマンでレッスン可能です。
レッスンをご希望される方は、下記よりお気軽にお問合せください。（準備中につきVIVIBONDのお問合せページが開きます。）