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

twitter はてなブログ スマホ表示 埋め込み

twitter はてなブログ スマホ表示 埋め込み

どうもこんにちは。

4児パパです。

 

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

 

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

 

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

 

  

■目次

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

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

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

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

5.最後に

 

 

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

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

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

 

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

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

初心者でも出来ます。

 

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

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

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

 

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

 

 

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

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

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

 

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

 

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

https://publish.twitter.com/#

publish twitter

publish twitter

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

twitter アカウントURL

twitter アカウントURL

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

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

Twitter Embedded Timeline

Twitter Embedded Timeline

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

twitter アカウント リンク

twitter アカウント リンク

 

Twitter側以上。

 

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

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

    サイドバー  モジュール HTML

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

 

 

 

 

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

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

 

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

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

    Twitter リンク 貼り付け コメントアウト

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

 

 

 

 

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

 Twitterは自分から発信できるブログと共に大切なメディアとして扱う

どういうことかというと、自分からフォローしてくれているフォロワーに情報発信できるのと、一つのコミュニケーションツールとして使用出来ます。

 

ブログがかけない時は、今までにツイートしてきた内容で、記事ネタにすると良いですよ。

 

www.papa-programing.jp

 

 

 

 

5.最後に

 ほぼ毎日ブログを更新していますが、月収50万は遠いです。笑

 

でも少しずつですが、成長しているのを感じます。

 

www.papa-programing.jp

 先日サラリーマンの収入には限界がある事について、励みになるDMを頂きました。とても嬉しかったです。

朝から自分の成長になりそうないろんな方のブログをみていましたら、時間が早く流れてしまい、肝心の自分の記事を書き遅れました。笑

 

今日は淡々した記事になってしまいましたが、今一度リライト致します。せっかく訪れて頂き参考にならなかったら申し訳ないのです。

 

ブログで成果を期待出来ない時、たくさんあります。1日になんどもがっかりします。 

www.papa-programing.jp

 

でもひたすら頑張ります。 

 

人生伸びしろしかないですからね!!!

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です