【初心者でも簡単】はてなブログのツイッター埋め込み【サイドバーとスマホに】

どうもこんにちは。

4児パパです。

先ほど下記のツイートをしました。

twitterと連結する時、はてなブログでブログやる時PC表示ではサイドバー、スマホ表示した時下方にて表示した方が良いですよ。
スマホ表示で重くなるからという理由でつけていない人もいますが、私自身、着目しているブロガーさんのブログを訪れた際、ついでにブロガーさんのツイートも把握したいので。 pic.twitter.com/qlOQSx8Rry

— ４児パパ (@ARTS_papa) 2019年7月12日

twitterと連結する時、はてなブログでブログやる時PC表示ではサイドバー、スマホ表示した時下方にて表示した方が良いですよ。スマホ表示で重くなるからという理由でつけていない人もいますが、私自身、着目しているブロガーさんのブログを訪れた際、ついでにブロガーさんのツイートも把握したいので。

ここ数日で色々と学びました。ブログの記事を書きつつも、デザインを修正する為にたくさんのことを学びました。

Follow @arts_papa

■目次

▶1.ブログへのツイッター埋め込み必要理由

▶2.はてなブログのサイドバーへツイッター埋め込み

▶3.はてなブログのスマホ表示でツイッター埋め込み

▶4.Twitterはメディアとして扱う

▶5.最後に

いつも読んで頂きどうもありがとうございます。

今回2分ほどで読み切れると思います。

最後までお付き合いと共に参考にして頂けましたら幸いです。

１.ブログへのツイッター埋め込み必要な理由

ブログへのツイッター埋め込みは簡単です。

初心者でも出来ます。

ブログへのツイッター埋め込み必要な理由

そもそも何故必要のか。色々思惑はたくさんありますが、

ツイッターからのアクセスを狙う
ブログへアクセスしてもらう読者にツイッターも同じサイトで見てもらえるので、読者もTwitterを開けなくてすむ。
私自身では、参考にしたいブロガーさんの記事を毎日見ているのですが、その際ブログにTwitterが埋め込みされているので、一緒に注目します。

こういった感じですかね。

2.はてなブログのサイドバーへツイッター埋め込み

さて早速ブログへのTwitterの埋め込みお伝えします。

最短の方法でお伝えします。

ブログのサイドバーへ埋め込む為のリンクを準備

下記サイトにアクセスします。

https://publish.twitter.com/#

自分のアカウントの入ったURLを入れます。

私の場合ですと、https://twitter.com/ARTS_papaですね。

入力後次の画面に行きます。

次の画面に進むと、サンプル画面に進みます。

Twitter側以上。

次にはてな側に進みます。

『ダッシュボード』→『デザイン』→『カスタマイズ』→『サイドバー』→『モジュールの追加』までアクセスしていきます。
モジュール追加をクリック後、タイトルの記入はお好きなように入れましょう。そのままサイドバーに反映されます。

サイドバー　モジュール　HTML
コピーしたリンクを貼ります。
表示件数などカスタマイズ出来ますが、ここではとりあえずここまで。

3.はてなブログのスマホ表示でツイッター埋め込み

はてなブログで、レスポンシブデザインだとそのままでも、スマホ表示したら出ると思いますが、私のこのはてなブログのテーマは『DUDE』です。レスポンシブに対応してませんので、コーディングする必要あります。

はてなブログTwitterの埋め込みスマホ側の設定

まず『ダッシュボード』→『デザイン』→『スマートフォン』→『フッタ』→『フッタのスマートフォン用にHTML設定』までアクセスしていきます。
フッタのスマートフォン用にHTML設定においてコードを記述します。フッタをクリックしたら、『フッタのスマートフォン用にHTML設定』をクリックします。
先ほどリンクをコピーしたものをそのまま貼り付けるのですが、<!– twitter　 –>をタイプ後その下にコピーしたリンクを貼り付けましょう。

Twitter　リンク　貼り付け　コメントアウト
以上これでスマホ表示でもTwitterが見れますね。