未経験からWebディレクターになった話

未経験からWebディレクターになれるか…なれます!本人のやる気次第です。そこで具体的に私が何に取り組んできたかを書きます。

はてなブログのサイドバーにtwitterのタイムラインを表示する方法

スポンサーリンク

f:id:tkhs-nnon:20170528000848p:plain

今日もこんにちは、Webディレクターのtkhs_nnonです。

今日ははてなブログのカスタマイズについてのお話です。

はてなブログでtwitterのタイムラインを設置しているサイトをよく見かけますよね。

自分のブログでもtwitterを埋め込んでみたいけれども、どうするのかわからない…そんな方に向けて、twitterのタイムラインの埋め込み方法をご紹介します!

twitterのタイムラインとは?

当ブログではサイドバーの下側にて埋め込んでいます。

※赤枠で囲ってある箇所ですね。 

f:id:tkhs-nnon:20170430191344p:plain

色々な方法があるようですが、シンプルで簡単な方法をご紹介します!

はてなブログにtwitterのタイムラインを埋め込んでみましょう。

1.twitterにログインしましょう。

ブログに表示させたいtwitterに、ブラウザ上でログインしましょう。

2.twitterの公式サイトにアクセスしましょう。

twitterのアカウントにログインしましたら、同じブラウザにて下記のURLにアクセスしてください。

(twitterにログインしていない別ブラウザで下記アドレスにアクセスしても、ログインした意味がないのでご注意)

Login on Twitter

私の場合ですと、上記のURLにアクセスすると以下のような画面が表示されます。

(twitterにログインしてからアスセスしているため、既に「https://twitter.com/gogo30_link」とtwitterアカウントが入力されていますね。)

f:id:tkhs-nnon:20170430192519p:plain

3.表示するスタイルの選択をします。

「Here are your display options」という表示が出てきますので、左側の「Embedded Timeline」を選択してください。

f:id:tkhs-nnon:20170430210921p:plain

4.埋め込むタイムラインの縦幅や横幅を調整します。

表示形式を選択すると、下図のような内容が出てきます。

タイムラインの表示サイズなど、調整を行う必要がありますので、「set customaization options.」という青いテキストリンクをクリックしてください。

f:id:tkhs-nnon:20170430211236p:plain

クリック後、下図のような設定画面が出てきますので、こちらより埋め込むタイムラインの形式を調整します。

縦幅や横幅をpxで入力、リンクの色などブログで統一している場合はそちらのカラーコードを入力(#で始まる6桁のコードですね)、一番下の言語の選択は「Automatic」で良いです。

入力が終わったら右下の「Update」をクリックしましょう。

f:id:tkhs-nnon:20170430211748p:plain

5.調整後の内容が反映されたコードをコピーしましょう。

先ほどと同じ画面が出てきますので、今度は赤枠の「Copy Code」をクリックします。これで調整した内容が反映されたコードをコピーできました。

f:id:tkhs-nnon:20170430211956p:plain

6.はてなブログにコードを貼り付けます。

はてなブログにログインし、管理画面へアクセスしてください。ダッシュボードの左のメニューより「デザイン」を選択し、スパナアイコンの「カスタマイズ」をクリック、「サイドバー」をクリックしてください。

次に「+モジュールを追加」をクリックしてください。

入力画面が出てきますので、タイトルを入力(なんでもいいですが、そのままブログの画面に出てきますので分かりやすいものを入れるべきです)、下のテキストエリアにコピーしたコードを貼り付けましょう。

f:id:tkhs-nnon:20170430212712p:plain

「適用」ボタンを押すと、登録が完了します。以下のように追加されます。

f:id:tkhs-nnon:20170430212721p:plain

これだけではブログに反映されませんので、メニューの上にある「変更を保存する」という青いボタンを押すことを忘れずに!

これでtwitterのタイムラインの埋め込みは完了です。

f:id:tkhs-nnon:20170430213026p:plain

7.ブログでタイムラインが表示されているか確認しましょう。

問題がなければ以下のようなタイムラインが表示されているはずですが、いかがでしょうか?

まとめ

ブログの更新が滞ってしまっても、twitterの更新を行っていれば、それがブログでもわかるため、ブログにアクティブ感を出すことができるようになります。
また、読者がtwitterアカウントを持っている場合、「フォロー」してやすくなりますし、「リツイート」をしてもらえれば、twitterを通してあなたのブログを拡散してもらうことが可能となります。

はてなブログを利用されているのであれば、twitterは積極的に使うことをオススメします:)