【Word Press】自分のブログにTwitterを埋め込む方法

Blog

ブログを始めた人

いろんな人のブログを見ていたら

Twitterを表示させている!!

どうやってやるの?

自分のブログにもTwitterを表示させたい。

 

こういった疑問を分かりやすく解説していきます。

 

✔ この記事の内容


➀WordPressで自分のブログにTwitterを埋め込む方法

 ・フッターとヘッダーの意味を知ろう

 ・自分のサイトにTwitterを埋め込む手順

 ・ツイッターの埋め込みをフッターに表示させる

 

WordPressで自分のブログにTwitterを埋め込む方法

このようにいろんな人のブログを見に行くとTwitterのタイムラインを表示させていて、自分のブログにも表示させたいと思ったことはないですか?

 

この表示のさせかたを分かりやすく画像を使って解説していきます。

やり方は簡単で5分もあれば表示させることができます。

 

フッターとヘッダーの意味を知ろう

最初に「フッター」と「ヘッダー」について知ってもらおうと思います。

なぜこの意味を知ることが必要かと言いますとこれからTwitterを埋め込む為に知ってて損はないから。というか知っていて設定がよりスムーズになります。

 

✔ フッター

「フッター」を分かりやすく言ってしまうとそのサイトの一番下に表示している部分。

正式に調べてみるとWikipediaでは下記のように書いてあります。

 

メインテキスト、または身体の下に位置する部分です。

コンピューターまたは他のデバイスに表示されるページの下部のスペースを識別します。

引用元:Wikipedia

 

✔ ヘッダー

「ヘッダー」とは実際の呼び方ではなく本来「ヘッダ」と言うそうです。

私たちは「ヘッダー」と言い慣れているのでその認識でも問題ないでしょう。

それで、「ヘッダー」の意味を分かりやすく言うとそのサイトの一番上に表示されている部分。

 

情報技術において、 ヘッダheader)とは、ファイルやパケットなどの先頭にあるデータである。

引用元:Wikipedia

 

このようにヘッダーは上、フッターは下に表示されている部分と覚えておきましょう。

 

自分のサイトにTwitterを埋め込む手順

さて、ここから本題です。

あなたのサイトにTwitterを埋め込む手順を8枚の画像を使って紹介していきます。

 

①【Twitter Publish】のサイトにアクセスします。

 

Twitter Publish」⇦こちらをクリック

 

 

②自分の【Twitter+アカウント名】を入力。

・「https://twitter.com/あなたのアカウント名」を入力

 

 

➂「埋め込みタイムライン」をクリック。

 

・埋め込みタイムライン:タイムラインを埋め込める

・ツイッターボタン:「フォローボタン」「メンションボタン」の埋め込みが可能

 

タイムライン、ツイッターボタンを埋め込めますが今回はタイムラインを埋め込みます。

 

 

④「コードをコピー」をクリック。

カスタマイズオプションを設定する高さ、幅、背景色、言語を変更可能

お好みで設定変更をどうぞ。

 

 

⑤Wordpressに戻り「外観」>「ウィジェット」をクリック。

 

 

⑥「カスタムHTML」をクリックし「ウィジェットに追加」をクリック。

下の方にスクロールしていくとあります。

「サイトバー」に✅が入っていることを確認する。

 

 

⑦【Twitter Publish】でコピーしたTwitter埋め込み用リンクをペーストする。

・「タイトル」にTwitterやタイムラインといったタイトルを付けるのもあり

 

 

これで終了です。自分のブログにTwitterのタイムラインが埋め込まれたかを確認してみましょう。

 

 

出来ていますね。

これでもいいのですが、もう一工夫してみましょう。

 

Twitterの埋め込みをフッターに表示させる

今の状態は「サイドバー」にTwitterのタイムラインを埋め込みしてあります。

これを最初に学んだ「フッター」に表示させてみましょう。

 

①「外観」>「ウィジェット」をクリック。

 

 

②「カスタムHTML」をドラッグする。

・右側に「フッター右」「フッター中」「フッター左」とあるのでお好みの場所へ

 

 

今回は「フッター右」に持ってきました。

 

 

それではどうなったか確認してみましょう。

 

 

この様にサイトも見やすくカスタマイズできました。

 

まとめ

⓵WordPressで自分のブログにTwitterを埋め込む方法

 ・フッターとヘッダーの意味を知ろう

 ・自分のサイトにTwitterを埋め込む手順

 ・ツイッターの埋め込みをフッターに表示させる

 

他にもこの様に「ウィジェット」を使っていろいろとカスタマイズできるので自分好みのサイトにしてみましょう。

コメント

  1. […] ✔ 【Word Press】自分のブログにTwitterを埋め込む方法 […]

タイトルとURLをコピーしました