[phoe-icon name="fa-twitter fa-fw fa-lg fa-"]　ウィジェットにTwitterタイムラインを表示してみた

私は、このブログの投稿記事を自動的にTwitterにも同時投稿する設定にしています。そのことを確認する意味でも、本ブログのサイドバーにTwitterのタイムラインを表示させることにしました。今回は、その手順を忘れないうちに書き留めておきたいと思います。

Twitterの挿入コードを取得

(1) まず、Twitterの新規ウィジェット作成画面を開きます。

https://twitter.com/settings/widgets

ここで、「新規作成」ボタンにカーソルをあて、「プロフィール」をクリックします。

(2) 表示したいタイムラインのデザインを選択します。

ここでは、Embedded Timelineを選択してみます。

(3) 表示したい自分のTwitterのURLを入れます。プレビュー画面ができますから、確認し、Set Custamization Optionをクリックします。

すると、挿入する画面の高さと幅を指定するページになりますから、ここで、たとえば高さを500pxと指定します。これを指定しないと、サイドバーに際限なくタイムラインが表示され、不都合です。幅はとくに指定しなくても大丈夫です。指定が終わったら、Updateのボタンを押します。すると再び先ほどのページに戻りますので、ここでCopy Codeのボタンを押して、ウィジェットに入れるコードを取得します。

ウィジェットでサイドバーにテキスト入力用ウィジェットを作成

WordPressのウィジェットメニューを開き、テキスト入力用のウィジェットを「サイドバーウィジェット」に挿入します。そのあと、ウィジェットを開き、タイトルを入れ、下の内容欄にさきほど取得したTwitterコードをペーストします。

これで、サイドバーに自分のTwitterのタイムラインが表示されるはずです。

サイドバーのタイトルにTwitterのアイコンをつける

ここからは、おまけですが、目を引くために、Twitterのタイムラインの見出しにTwitterのfontawesomeアイコンをつけてみました。その方法はちょっと面倒ですが、他にも応用が効くので試してみました。記事投稿画面のように、単純にfontawesomeのアイコンをタイトルわきに付け加えることはできません。少し工夫が必要です。

要は、サイドバーの特定の見出しに、fontawesomeアイコンを入れるCSSを書いてあげることです。それには、Twitterタイムラインを入れたウィジェットの見出しにどんな名前がついているか（見出しのID属性）を調べる必要があります。

調べるためのツールは、Google Chromeブラウザにあります。ブラウザを開いて、Twitterタイムラインの見出しにカーソルをあて、右クリックでメニューを開き、「検証」を選択します。

すると、右上に、このページのソースコードが開きます。

仔細にコードを調べてみると、

というタグがあり、これがTwitterタイムラインの見出しを示していることがわかります。このid部分をCSSで指定すればいいのです。TwitterアイコンをサイドバーにつけるためのCSSは次のとおりです。

/*  サイドバー　Twitter 見出しにTwitterアイコンをつける  */
#simplicityclassictextwidget-3 h3:before {
font-family:"FontAwesome";
margin-right:5px;
font-size:120%;
color:deepskyblue;
content:"\f099";
}

このコードの中で、\f099というのは、Fontawesomeアイコンの中で、twitterアイコンのユニコードです。ユニコードを取得するには、次のサイトを開いて、検索画面でtwitterと検索すれば、アイコン名だけではなく、Unicodeも取得できます。

http://fontawesome.io/icons/

上のCSSコードを、Style.cssまたはカスタムCSS画面に貼り付ければ、Twitterの見出しにTwitterのアイコンが自動的に表示されます。

Font Awesomeアイコンの使い方については、こちらの記事をごらんください。

http://medialabo.info/blog/post-443/

ついでに、見出しのテキストとアイコンにシャドウをつけてみました。アイコンがいっそう映えますね。

参考までに、CSSは次の通りです。

/*  サイドバーの見出しに細枠とテキストシャドウをつける  */
#sidebar h3{
  text-align:center; /* タイトルの中央寄せ */
  border:solid 1px #3cb371; /* 枠線色 */
  text-shadow: 3px 2px 3px #ccc; /* 影付けと影色 */
}

次のサイトを参考にさせていただきました。