異国からこんにちは。ブログを初めて半年が経とうとしています。ここまでよく更新したものだなぁ、と感慨にふけっています井家と申します。

 

これまでに投稿した記事数は163記事となり、タイプした文字数は約35万文字となりました。大人気ソーシャルゲームのFGOのレビューが「100万文字で紡がれる重厚なストーリー」ですので、私のブログもやや重厚味を帯びてきたところでしょうか。まぁ、当然 あれほど面白いストーリーは書けていませんが。。。

 

しかし、アクセス数は以前 2万とちょっとを前後するだけで、依然 3万アクセスの壁がそびえ立っているのです。どうしたものか、、、と考えながらアクセスの流入元を確認してみると、、、

 

f:id:koppamizin007:20190620162453p:plain

GoogleとYahooからのアクセスが8割方を占めていることが分かりました。

つまり、、、

 

SNSからの流入が少ないのです。一応 Twitterやら未だに慣れない「いんすたぐらむ」などにも頑張って手を出しているのですが、そこからの流入がないのです。そこで私は思いました。

 

「フォローボタンを設置していないからなのでは、、、」

 

と。

 

ということで今回は、はてなブログにおける”Twitterフォローボタンの設置方法”について紹介させていただきます。

設置方法は とても簡単なので、パソコンから作業をされる方は3分もあれば 作業は完了すると思います。

 

それでは、まとめてきます。

 

 

 

Twitterフォローボタンの設置方法

f:id:koppamizin007:20190620173610p:plain

 

 

手順①:埋め込みボタンを習得しましょう

Twitterの公式サイトに行きましょう。

https://publish.twitter.com/

 

パソコンから操作される場合は

 

f:id:koppamizin007:20190620091152p:plain

このような画面が出てくると思います。

 

少し下に下にスクロールをすると、

 

f:id:koppamizin007:20190620091232p:plain

このような画面が出てきます。

一番右にある、「Follow Bottons」を選択しましょう。

 

すると、

 

f:id:koppamizin007:20190620091259p:plain

このように、色々な種類のボタン選択画面に移ります。

 ここでは、左から二番目の「Follow Bottons」を選択しましょう。

 

すると、

 

f:id:koppamizin007:20190620091336p:plain

このような画面に移ります。プロフィールのURL、もしくはTwitterフォローボタンを作りたいアカウントユーザー名を入れましょう。ここではユーザー名の方が圧倒的に簡単です

 

入れた例がこちら 

f:id:koppamizin007:20190620091354p:plain

@が入っていようがいまいが、正しく表示されます。 

 

 

なお、プロフィールのURLを入れたい方は

 

https://twitter.com/no521sho

 

というような形式になります。末尾にある「no521sho」が私のアカウント名ですので、そちらを自分のアカウント名にしていただければ大丈夫です。

 

すると、

 

 

f:id:koppamizin007:20190620091636p:plain

このような画面に行きますので、そちらのコードが用意できたら 実際にブログに貼り付けてみましょう。

 

 

 

手順②:はてなブログの好きなところに貼り付けよう

f:id:koppamizin007:20190620172821p:plain

 

それでは実際に、はてなブログで貼り付けてみましょう。

まずは、ダッシュボードの「デザイン」→「カスタマイズ」をクリックしましょう。話はそこからです。

 

 

サイドバーに貼り付ける

f:id:koppamizin007:20190620173118p:plain

1:「サイドバー」をクリック

2「+ モジュールを追加」をクリック

3:</>HTMLをクリック

4:コピーしたコードの貼り付け

5:「適用」をクリックして完了

 

 

私の場合、『4:「適用」をクリックして完了』を忘れて数分ほど、「あれ、、なんか実装できないんだけど、、、」となりましたので、忘れずに適用ボタンは押しましょう

 

 

フッターに貼り付ける

1:フッターの編集画面を開きます

2:フォローボタンを設置したいところにコピーしたコードを貼り付け

3:「適用」をクリックして完了

 

 

記事の中に貼り付ける

1:HTML編集、をクリック

2:設置したいところにコピーしたコードを貼り付けましょう

3:完了!

 

 

↑こんな感じに設置できると思います。すぐにプレビューボタンを押して 無事に表示されているか確認しましょう。

 

 

まとめ

f:id:koppamizin007:20190620172123j:plain

スマホ用の表示画面に設置する場合はパソコン用とさして変わらないので省きました。

 

必要な方は是非 おっしゃってくださいませ。ひとりでもいれば手間と時間を惜しんでも追加で書き足しますので。甚だ恩着せがましい言い方をしてしまいましたが、ニートである手前 少しでも誰かの役に立ちたいのであります。

 

 

それでは今回はこの辺で。

来月あたりには3万アクセス突破できたらいいなぁ。

 

日本ブログ村に参加しております。

上位にいるときはモチベーションが上がって 記事の更新頻度が上がったりします。

にほんブログ村 海外生活ブログ ワーホリへ
にほんブログ村 海外生活ブログ ワーホリ(ニュージーランド)へ
おすすめの記事