BETA

QrunchブログのサイドモジュールにPixelaグラフを表示する

投稿日:2019-09-03
最終更新:2019-09-03
  • 先日Qrunchの大幅アップデートにより,ブログのカスタマイズ性が上がった
    • 任意のHTML・JSスクリプトが挿入可能に

【お知らせ】正式リリース前最後の大幅アップデートを行います!(8月下旬予定)

  • ということで,↓で紹介されているはてなブログへのPixelaグラフ埋め込みをQrunchでもできるはず!

はてなブログに Pixela グラフを埋め込んで、さらにツールチップを表示させる方法

完成図

  • 表示ごとにincrementされるグラフで簡易PVに
  • 過去に作ったストレス草化で,ストレスを感じつつも生存してる報告

手順

  • a-knowさんのブログ見れば問題ないけど,一応QrunchのUI上でどこを設定するかメモ (指定するコードも元記事のまま)
  • 以下,[ユーザーメニュー]→[デザインカスタマイズ] or ダッシュボード内[デザイン]で表示されるブログのデザイン設定画面で作業

サイドモジュール追加 (グラフ表示領域設定)

  1. [サイドモジュール]にて[モジュールを追加する]
  2. [モジュールタイプ]で[カスタム]を選択
  3. [モジュールタイトル]は任意,[コンテンツ(カスタムHTML)]に下記コード(a-knowさんブログまま)を入力し,[追加する]
    <div id="svg-load-area"></div>  
    <div style="text-align:right;">Powered by <a href="https://pixe.la/" target="_blank">Pixela</a></div>  

ヘッダ下 or フッタ上にscriptタグ追加 (表示するグラフの設定)

  1. [カスタムHTML]にて[ヘッダー下] or [フッター上]を選択
    • ヘッダ下 or フッタ上へのコード指定はPRO機能だが,今の所ベータ期間で誰でも無料でPRO機能を有効化できる
  2. 表示された入力エリアに下記コード(a-knowさんブログまま)を入力し,[適用] (グラフURLは表示したいグラフを指定)
    <script src="https://unpkg.com/[email protected]/dist/tippy.all.min.js"></script>  
    <script>  
    document.addEventListener('DOMContentLoaded', function(){  
    $('#svg-load-area').load('https://pixe.la/v1/users/a-know-blog/graphs/page-views?mode=short', function(){  
       tippy('.each-day', {  
          arrow: true  
       });  
    });  
    });  
    </script>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@jagijagijag1の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!