WordPress

【WordPress】Twitterの埋め込み方

こんにちは😀ブログ開設3日目の広瀬ユキです。

ここでは、初心者でもできるワードプレスへのTwitterの埋め込み方を書きます。

Twitterにログイン

まず、Twitterにログインします。

https://twitter.com/

自分のTwitterのURLを調べる

次に、自分のTwitterのURLを調べます。自分のTwitterを開いたら、検索バーにURLが記載されているので、それをコピーします。

表示されなければ、『https://twitter.com/』の後ろに、Twitterの@マークの後ろを付けたものが、自分のTwitterのURLになります。

https://twitter.com/yuki_hirose_

画像引用元:https://twitter.com/yuki_hirose_

https://twitter.com/ ➕ yuki_hirose_

このように『@』の後ろを付け加えると、自分のTwitterのURLになります。

埋め込みコードを作成する

専用サイトにアクセス

こちらのサイトにアクセスします。
アクセスしたら、サイトの真ん中にあるバーに先ほどコピーした自分のTwitterのURLを入力します。

画像引用元:https://publish.twitter.com/#

HTMLコードを作成する

すると、2種類のボタンができます。
  • Embedded Timeline
    こちらはニュースのように流れる仕様です。
  • Twitter Buttons
    小さいボタンです。
好きな方を選択し、『Copy Code』を押します。以下のように表示されれば、『HTMLコード』がコピーできたことになります。

サイズを変えたい場合

表示するサイズが大きすぎたり、長すぎる場合、表示サイズをカスタマイズすることができます。

Step.1

set customization options.」を押します。

画像引用元:https://publish.twitter.com/#

Step.2

タテとヨコのサイズを入力します。

今回は、タテHeight420(px) × ヨコWidth320(px)で設定しました。

他に、背景の色(Light or Dark)、アンダーバーの色、言語も変更可能です。

画像引用元:https://publish.twitter.com/#

Step.3

「Update」を押し、コードをコピーします。

  • 当ブログは、Height340(px)×Width330(px)でTwitterを埋め込んであります。
  • Twitterを埋め込むときに、HTMLの編集画面でタテとヨコの数字を変えて、サイズを変更することもできます。
  • Twitterを中央寄せしたい場合は、以下のように入力するとできます。
    <div style="text-align:center">取得したTwitterのHTMLコード</div>​

WordPressをカスタマイズする

今回は、サイドバーに設置するバージョンでご説明いたします。

カスタマイズの手順

WordPressの編集画面を開き、『外観』→『カスタマイズ』を押します。
『ウェジェット』を開きます。
『サイドバー』を開きます。
『+ウェジェットを追加』を開きます。
『カスタムHTML』選択し、好きな場所にウェジットを追加します。
ここで、先ほど作成し、コピーした『HTMLコード』を「内容」の部分に入力します。
※「タイトル」は入力してもしなくても、OKです👍
『完了』を押す。
『公開』を押す。

当ブログは、WordPress有料テーマJINを使用しています。ウェジットの追加方法は、各テーマのマニュアルをご参照ください。

完成です‼‼‼

きちんと表示されているか、パソコンおよびスマートフォンで確認してみてください。

編集後記

今回はサイドバーに設置するバージョンで書きましたが、他の場所にも設置できるので、自由にサイトをアレンジしてみてください。なお、今回紹介した『ウィジェット』の『カスタムHTML』はワードプレスの新しい機能のようですね🙂

ブログパーツを挿入しました!設定方法をご紹介します。ブログパーツの挿入の方法について書きました。当ブログでも挿入しています。合わせて、設定方法をご紹介します。...
【WordPress】有料テーマ【JIN】を購入しました!2019年5月16日(木)にブログを開設し、WordPressの有料テーマはJINを購入した理由について書いています。...
ブログ開設しました!2019年5月16日(木)に当ブログを開設しました。よろしくお願いします。...

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ