テンプレート | 白猫プロジェクト攻略の『白あん』 https://white-cat-project.an-channel.com 白猫プロジェクトの攻略ブログです。 Fri, 04 Sep 2020 18:38:13 +0000 ja hourly 1 https://wordpress.org/?v=6.8.3 https://white-cat-project.an-channel.com/wp-content/uploads/2018/06/cropped-CAD08E4C-6C44-4C3A-90D1-300AD8782DB6-100x100.png テンプレート | 白猫プロジェクト攻略の『白あん』 https://white-cat-project.an-channel.com 32 32 動画コンテンツのテンプレート https://white-cat-project.an-channel.com/post-15666 Mon, 19 Aug 2019 23:54:10 +0000 https://white-cat-project.an-channel.com/?p=15666
  1. 動画コンテンツのテンプレート
    1. 構造化データ テンプレート

動画コンテンツのテンプレート

<p>
<video poster="動画の画像" loop="loop" muted="" controls="controls" width="568px" height="320px">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">
</span>
<source src="動画のmp4" type="video/mp4" />
</video>
</p>

構造化データ テンプレート

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "動画タイトル 白猫プロジェクト",
  "description": "動画の説明",
  "thumbnailUrl": "動画のサムネ",
     "uploadDate": "2019-02-05T08:00:00+08:00",
  "duration": "PT1M33S",
  "contentUrl": "動画のURL",}
]]> グラフのテンプレート https://white-cat-project.an-channel.com/post-13915 Thu, 23 May 2019 19:08:25 +0000 https://white-cat-project.an-channel.com/?p=13915
  1. Amazonコインのページ　テンプレート
  2. 月別表示用テンプレ
  3. その他グラフ

Amazonコインのページ　テンプレート

ｃｓｓに追記

/*****
chartを　使ったグラフグラフ
**************************************/


/*グラフの外枠*/

.canv {
  padding-left: 3px;
  padding-bottom: 3px;
  border: 1px solid #333;
  background-color: #fff;
  margin-bottom: 50px;
  border-radius: 7px;
}

１ページ一つしか載せれない

フッターインサートに該当ページのID を入力する。

<div class="canv"><canvas id="myChart4" width="400" height="300"></canvas></div>
<script>
var config = {
   type: 'line',
   data: {
      labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      datasets: [
        {
            label: "50000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(219,39,91,0.5)",
            borderColor: "rgba(219,39,91,0.5)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(219,39,91,0.5)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(219,39,91,0.5)",
            pointHoverBorderColor: "rgba(219,39,91,0.5)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
　　　　　　　borderWidth: 6,
           data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
        },{
            label: "10000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(130,201,169,0.7)",
            borderColor: "rgba(130,201,169,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(130,201,169,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(130,201,169,0.7)",
            pointHoverBorderColor: "rgba(130,201,169,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
borderWidth: 6,
               data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,

 },{
            label: "5000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(255,183,76,0.7)",
            borderColor: "rgba(255,183,76,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255,183,76,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255,183,76,0.7)",
            pointHoverBorderColor: "rgba(255,183,76,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,borderWidth: 6,
              data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
       }]
   },
   options: {
      title: {
        display: true,
        text: '5月のAmazonコイン割引率'
      },
      scales: {
xAxes: [{
          ticks: {
            suggestedMax: 31,
            suggestedMin: 1,
            maxTicksLimit: 10,
            fontSize: 12,
            callback: function(value, index, values){
              return  value +  '日'
            }
          }
        }],
        yAxes: [{
          ticks: {
            suggestedMax: 25,
            suggestedMin: 10,
            stepSize: 5,
            callback: function(value, index, values){
              return  value +  '％'
            }
          }
        }]
      },
   }
};

window.onload = function() {
        var ctx = document.getElementById("myChart4").getContext("2d");
        window. myLine = new Chart(ctx, config);
};
</script>

月別表示用テンプレ

ヘッダーにJSを読み込ませる

一つのページにいくつも載せれる

<script>
  var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
   
      data: {
      labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
      datasets: [
        {
            label: "50000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(219,39,91,0.5)",
            borderColor: "rgba(219,39,91,0.5)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(219,39,91,0.5)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(219,39,91,0.5)",
            pointHoverBorderColor: "rgba(219,39,91,0.5)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
　　　　　　　borderWidth: 6,
           data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
        },{
            label: "10000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(130,201,169,0.7)",
            borderColor: "rgba(130,201,169,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(130,201,169,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(130,201,169,0.7)",
            pointHoverBorderColor: "rgba(130,201,169,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
borderWidth: 6,
               data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,

 },{
            label: "5000コイン",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(255,183,76,0.7)",
            borderColor: "rgba(255,183,76,0.7)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255,183,76,0.7)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 2,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255,183,76,0.7)",
            pointHoverBorderColor: "rgba(255,183,76,0.7)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,borderWidth: 6,
              data:[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10],
            spanGaps: false,
     
 }
      ],
    },
  options: {
      title: {
        display: true,
        text: '5月のAmazonコイン割引率'
      },
      scales: {
xAxes: [{
          ticks: {
            suggestedMax: 31,
            suggestedMin: 1,
            maxTicksLimit: 10,
            fontSize: 12,
            callback: function(value, index, values){
              return  value +  '日'
            }
          }
        }],
        yAxes: [{
          ticks: {
            suggestedMax: 25,
            suggestedMin: 10,
            stepSize: 5,
            callback: function(value, index, values){
              return  value +  '％'
            }
          }
        }]
      },
    }
  });
  </script>
<div class="canv"><canvas id="myLineChart" width="400" height="300"></canvas></div>

その他グラフ

Chart.jsでグラフを描画してみた - Qiita
1. はじめに Chart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。 公式ホームページ 今回は、特に使用頻度の高そうな、以下5種類グラフの描画方法を紹介します。 折れ線グラフ 棒グラフ 円グラフ レ...
qiita.com
Chart.jsでグラフを描画してみた ２ - Qiita
1. はじめに この記事は、以前に投稿した記事 ( の続きになります。 今回は、以下グラフの描画方法を紹介します...
qiita.com
]]> おせにゃんテンプレ https://white-cat-project.an-channel.com/post-8390 https://white-cat-project.an-channel.com/post-8390#respond Thu, 27 Sep 2018 06:12:30 +0000 https://white-cat-project.an-channel.com/?p=8390 こちらのコンテンツはログインユーザーのみに表示されます。

【おせにゃん#00】00情報 まとめ

新イベント『○○』の情報が おせニャンにて発表されました。
今回も おせニャンで発表された情報をまとめました。

動画タイトル

おせニャンのタイムライン

おせニャンタイムライン
  • 〇分30秒
    PV
  • 〇分30秒
    キャラ紹介
  • 〇分30秒
    イベント紹介
  • 〇分30秒
    その他

『イベント名』情報

PV

イベントのPVはこちらからどうぞ

公式特設サイト

公式サイトがオープンしました。

キャラクター紹介

ガチャに登場するキャラクターをご紹介‼

キャラ名(cv:声優)

画像

職業 属性
剣 光
〇の特徴
  • ー

ストーリー(あらすじ)紹介

あらすじ

]]> https://white-cat-project.an-channel.com/post-8390/feed 0