ロードバイクが人生を熱くする

STRAVAのブログパーツをブログに貼り付ける方法

STRAVAのブログパーツをブログに貼り付ける

今日はStravaのブログパーツの貼り付け方をご説明したいと思います。

私のような変態がどのくらい居るのかわかりませんが、えっ!?、言っている意味がわからないですって!?。

すみません。ここで言う変態というのは毎日ブログを更新する輩の事でございます。そして、そのブログにStravaのブログーパーツを貼り付けようとする輩でございます。決して否定とか誹謗中傷している訳ではございません。嬉しい限りなもので。

さて冗談はさておき、今日はアスリートのためのSNSアプリ”Strava”のブログパーツを自分のブログのサイドバーなどに貼り付ける方法を説明します。ただ、サイドバーに貼り付けとは言っても、ブログシステムによって手順は違いますので、各ブログシサービスへのHTMLコードの貼り付けなどはそれぞれのサービスのほうで確認をしてください。

 

 

STRAVAにログインする

STRAVAにログインしておきましょう。

 

 

 

ブログパーツの種類を確認する

作業の前にSTRAVAのブログパーツにはいくつかの種類があります。

 

アクティビティーウィジェット

まずは、自分のアクティビティーをブログの訪問者にお知らせするパーツ

こんなやつです⇓

このブログパーツを アクティビティーウィジェット と言います。

自分の最近のアクティビティー最新5件分を表示してくれます。

走っている時は堂々としていられますが、サボリ気味の時はちょっと嫌悪感を感じるかも!?。

 

ウィジェット概要

今週のライドの統計を表示するウィジェットです。

 

フォローボタン

ブログの来訪者にSTRAVAのフォローを促すためのフォローボタンです。

 

①  でフォローしてください

.strava-badge- { display: inline-block; height: 48px; } .strava-badge- img { visibility: hidden; height: 48px; } .strava-badge-:hover { background-position: 0 -63px; } .strava-badge-follow { height: 48px; width: 48px; background: url(//badges.strava.com/echelon-sprite-48.png) no-repeat 0 0; }

② 

 

上記の通り2種類あります。

TwitterやFacebookと一緒で、STRAVAもSNSアプリアプリなのでフォローやフォローバックを繰り返しながらユーザーとの繋がりを深めていく事が出来ます。

 

 

実際に貼り付ける

では、実際に貼り付けてみましょう。

アクティビティーウィジェットとウィジェット概要を貼り付ける

まずはアクティビティーウィジェットとウィジェット概要の2つです。

1、ホーム画面の右上、自分のカバー写真が丸く切り取られているアイコンをクリックします。

2、Myプロフィールをクリックします。

 

 

 

 

 

 

 

 

1、ずっと下までスクロールすると

あなたのライドを共有

というボタンがあるのでクリックします。

 

 

 

 

 

 

 

どのプロフィールウィジェットを設置しますか?とポップアップが出ますので、それぞれのお好みのコードをコピーしてサイドバーなどに貼り付けます。

 

 

 

 

 

 

 

 

 

 

WordPressの場合はダッシュボードから ▷外観 ▷ウィジェット と進み、テキストに貼り付けてサイドバーの好きな場所に設置します。

 

フォローボタンを貼り付ける

ホーム画面の設定を開きます

 

 

 

 

 

 

 

 

 

Myバッジをクリックします

 

 

 

 

 

 

 

 

 

 

”あなたのバッジを選択” で の好きなアイコンをクリックします

①の  は大きさがいくつかありますが、ディスプレーサイズによって最適化されるものなのでどれを選んでも変わりはないです。

 

 

 

 

 

 

 

 

アクティビティーウィジェットとフォローボタンのブログツールがそれぞれ別の場所にあるが不明です。たまに思い出して作業しようとすると探すのに手こずります。

これ系のツールは本来、同じ場所に配置しておくほうがユーザビリティーも向上すると思うのですが.....。

以上、ストラバのブログパーツの貼り方でした。

貼り方なんて書いてないな、ブログパーツの場所って言ったほうが正解かも知れません。

ゴメンナサイ。

  • B!