ブログ

【WordPress】投資ブロガー必見!ブログに株価チャートを埋め込む方法を解説!(TradingView)

こんにちは、タマです。

今回は下記のような株価チャートをブログに埋め込む方法を解説します。


銘柄や時間軸等を変更することができます。

ブログで株価チャートを表示する

ブログでチャートを表示する際は、別のサイトで表示させたチャートを画像として貼り付ける場合が多いかと思います。

それ自体は何も問題ないのですが、サイトによっては株価チャートの転載や複製、商業利用が禁止されている場合があるのです。

例えば多くの人が利用するYahoo!ファイナンスのヘルプページには下記のような記載があります。

「通常のテキストリンク」もしくは「別ウィンドウでのリンク」をお願いいたします。
「フレームを使ったリンク」および「画像のみを対象としたリンク」など、上記以外のリンク方法はご遠慮ください。
Yahoo!ファイナンスヘルプ – Yahoo!ファイナンスへのリンクについて

また、免責・禁止事項にも下記のような記載があります。

Yahoo!ファイナンスに掲載する情報の著作権その他一切の権利は、ヤフー株式会社、情報提供者またはその他の権利者に帰属します。
当該掲載情報の転用、複製および外部配信ならびに販売を含む商用利用等の一切を固く禁じています。
Yahoo!ファイナンスヘルプ – 免責・禁止事項

つまり、チャートを画像として利用するにしても、実際は使っちゃいけない場合もあるということです。

(これが問題とされるようなケースはほとんどないので気にしなくても良いのかもしれませんが…)

でも、どうせ使うなら使っても良いサイトのほうが安心ですよね。

そんなときにおすすめなのがTradingViewです。(TradingViewの詳細は後述)

利用規約にも下記記載があります。

TradingViewは、tradingview.com 及びサイトの利用可能なその他の全てのバージョンのユーザー全員に対し、使用中に常にTradingViewへの帰属が明確に表示されることを条件に、TradingViewチャートのスナップショットを分析、プレスリリース、書籍、記事、ブログ掲載、その他の出版物に使用すること、教育セッションにTradingViewのチャートを使用すること、概況説明、ニュース、分析等のビデオ放送にTradingViewチャートを表示させること、並びに、前述以外の目的でTradingViewチャートもしくはTradingViewウェブサイトから入手したその他の製品を使用又はプロモートをすることを許可します。
TradingView – 利用規約、ポリシー、免責事項

なのでブログでチャートを扱いたい場合はTradingViewがおすすめです。




TradingViewとは

TradingViewとは、あらゆる金融商品に対応した多機能チャートツールです。

とても有名なツールなので知っている方も多いと思います。

実はこのTradingViewはチャートをウィジェットとして表示させる機能があり、これを使うことで自分のブログに埋め込むことができるのです。

では、そのやり方を解説する前にTradingViewについて軽く紹介しますね。

TradingViewのメリット

TradingViewのメリット
  • 様々な金融商品のチャートを表示できる
  • 分析に使えるツールが豊富
  • デバイス間で同期できる

様々な金融商品のチャートを表示できる

TradingViewの最大のメリットは、様々な金融商品のチャートを表示できることです。

  • 株式
  • 先物
  • FX
  • 仮想通貨
  • CFD
  • 債券
  • 指数
  • 経済指標

証券会社のアプリは株式専用だったり為替専用だったりと、それぞれ対応する金融商品の値動きしか確認できません。

しかし、TradingViewを使えば自分のお気に入りの銘柄や仮想通貨、指数などを1クリックですぐに表示することができるのでとても便利です。

また、広告もほとんどないのでストレスなくチャートを見ることができます。

分析に使えるツールが豊富

TradingViewでは、テクニカル分析に使える描画ツールやインジケーターが豊富にあります。

また、チャートレイアウトの保存機能を使うことで、インジケーターなどを組み合わせて作った自身のオリジナルのレイアウトをテンプレート化して保存し、いつでも利用することができます。

デバイス間で同期できる

TradingViewはクラウド上で利用するチャートツールなので、自身のアカウントにログインすればパソコンでもスマホでも同じチャートを表示させることができます。

デバイスを買い替えたときや出先で自分が作ったオリジナルチャートを確認したい場合も、ログイン一つで大丈夫です。




TradingViewのデメリット

TradingViewのデメリット
  • 無料プランでは機能に制限がある
  • TradingViewから直接トレードできる業者が限られている

無料プランでは機能に制限がある

TradingViewは無料で使えるものの、一部機能に制限があります。

  • 1つのタブで複数のチャートを表示することができない
  • インジケーターを3つまでしか同時使用できない
  • チャートは1つしか保存することができない
  • 同時に1つのデバイスからしかアクセスできない

他にもいくつかの制限がありますが、無料プランでもかなりの機能が使えるのでそんなに不便ではないと思います。

TradingViewから直接トレードできる業者が限られている

証券会社が提供するツールであれば、チャートの表示とトレードが同時にできるようになっていると思います。

TradingViewもトレードする機能自体はあるのですが、それに対応した業者がとても限られています。

なので、TradingViewはトレードツールではなく、あくまでもチャートツールとして利用しましょう。




ブログにチャートを埋め込む方法

では、TradingViewをウィジェットとして利用する方法を解説します。

URLにアクセスする

ウィジェットを作成するために下記URLにアクセスしましょう。

ページに移動すると埋め込みコードを作成する画面になると思います。




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

次にブログに貼り付けるための埋め込みコードを作成します。

設定できる項目は下記画像の通りなので、自分で好きなようにアレンジしてみましょう。

適用」ボタンを押せば上に表示されているチャートが設定にあったものに更新されます。

全ての設定が完了したら埋め込みコードをコピーしてください。

表示するチャートのサイズは「自動サイズ」にチェックを入れ、高さをCSSで指定するのがおすすめです。このやり方は後述します。

埋め込みコードを埋め込む

コピーした埋め込みコードはWordPress上で貼り付けることで利用できます。

このとき「ビジュアルエディタ」ではなく「テキストエディタ」で貼り付けましょう。

これでブログにチャートを表示することができました。




おすすめのアレンジ方法

チャートを「自動サイズ」で設定すると思ったようなチャートが表示されない場合があります。このときは高さをCSSで指定しましょう。

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_76e17"></div>
  <div class="tradingview-widget-copyright">TradingView提供の<a href="https://jp.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPLチャート</span></a></div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "autosize": true,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "1",
  "locale": "ja",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_76e17"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

上記のコードは私が設定したチャートの埋め込みコードです。

この3行目にある「tradingview_76e17」がCSSの指定先になります。
※人によって後ろの英数字は異なります。

今回は高さを500pxとしたいので、WordPressの「外観」→「テーマエディター」からスタイルシート(大抵の場合は「style.css」)を選択し、下記のようにコードを追記します。

#tradingview_76e17 {
 height: 500px;
}

これで高さのCSSを指定することができました。

おそらくパソコンでもスマホでもだいぶ見やすくなったのではと思います。

まとめ

今回はブログに株価チャートを埋め込む方法を解説しました。

投資ブロガーさんはぜひ使ってみてください。

ABOUT ME
タマ
【学費自腹で借金640万円】貧乏人が経済的自由を目指す | 30歳までに資産2,000万円 | 社会人2年目 | 23歳 | 一人暮らし | つみたてNISA | 投資信託 | 米国株 | ブログ | 奨学金