しかし、アニメーションを使う反面、「表示速度の低下」という問題が出てくるかなぁ～と思います。アニメーションを実装するために、大半のウェブサイトでは「jQuery」というjavascriptライブラリが使用されています。この「jQuery」の読み込みや処理によって表示速度が遅くなったりしているのです。

読み込み中にローディングアニメーションを表示させて、体感速度をアップするといった方法も挙げられますが、実際の表示速度にほぼ変わりはありません。

というわけで今回は、SEOや離脱率にも関わる読み込み速度を見直すことにしました。

サイトの読み込み速度を計測する

Googleが提供する「PageSpeed Insights」というサービスをつかって、自分のサイトの速度を測ってみましょう。

最高点が100点で、様々な観点から得点を出します。評価は

Good (80点以上)
Midium (80点未満60点以上)
Low (60点未満)

の３つで評価されます。当ブログでは、jQueryを読み込んだりだとかはしていないので、スマホ・パソコンでGoodの評価が出ています。

メインブログの評価

メインブログでも画像の圧縮を行ったりと、普段から気にはかけているものの評価はスマホ・パソコンの両方でMidiumという結果になりました。

分析

メインブログでこのような評価になった理由を少し考えてみます。

同じ処理を繰り返している
WEBフォントおよびアイコンフォントの読み込み
jQueryの使用によるサイト表示処理（レンダリング）

これらの３点を詳しく見ていきます。

同じ処理を繰り返している

f:id:ktrw3200:20180217211652p:plain こちらの画像は、ブラウザの機能の一つ「開発ツール」（F12で起動）を使用してHTTPリクエストを表示させたものです。

見ての通り同じファイルが複数回読み込まれているのがわかります。

adsbygoogle.jsというのは「Googleアドセンス」の広告を表示させるためのファイルです。

f:id:ktrw3200:20180217212737p:plain アドセンスで広告のコードを出力した時、コードの一番上の行で読み込まれるようになっています。

本来ならば、１度だけ読み込めばいいのですが、広告ごとに読み込んでいるケースが多く、サイトの読み込み速度の低下に大きく影響しています。

また、HTTPリクエストが多いと他のリクエストの妨げとなり、表示速度の低下につながるので、一度みなさんのサイトでもこのようなことになっていないか確認してみてください。

解決方法

該当するコードを削除する。

この問題に関してはこれだけで解決です。同じものが複数読み込まれている場合には、１つだけ読み込むようにしましょう。

WEBフォントおよびアイコンフォントの読み込み

メインブログでもこのブログでもWEBフォントを使用しています。

最近では、WEBフォントとして使えるフォントも増え、使っているサイトも多いです。

また、「FontAwesome」や「Material icons」が挙げられるWEBアイコンフォントも良く使われています。

FontAwesomeでは約2,300種類のアイコンが使用できます。しかし、実際は数個しか使用していないのです。

また、WEBフォントでは、使用しないウエイト（太さ）のフォントが無駄に読み込まれていたりします。

10種類のウェイトが用意されていても、実際に使用するのは普通の太さと、ボールドにした時の太さだけしか使いません。

こういった、無駄な読み込みが多いのです。

解決方法

使用しないウェイトは読み込まない

f:id:ktrw3200:20180217214745p:plain Google FontsであればCUSTOMIZEからウェイトを選択できます。

使用するウェイトだけを読み込むようにしましょう。

SVGファイルを使用する

アイコンフォントを使用するのではなく、SVGファイルのアイコンを使用してみましょう。

SVGファイルというのは、ベクター形式の画像で、拡大縮小しても荒くならないのが特徴です。

f:id:ktrw3200:20180217215442p:plain 記号系のアイコンであれば、「Material icons」で使用したいアイコンを選択し、右下のSVGをクリックすることで、SVG形式のアイコンファイルを手に入れることができます。

f:id:ktrw3200:20180217215829p:plain SNS系・WEBサービス系のアイコンは「Simple Icons」が種類も豊富で使いやすいです。

左上の検索ボックスからアイコンを検索し、ダウンロードしたいアイコンをクリックすることでSVG形式のアイコンファイルを入手できます。

また、SVG形式のファイルはそのままでは使用できないので、メモ帳等のテキストエディタやコードエディタで開いて、出てきたコードを使用しましょう。

<svg aria-labelledby="simpleicons-hatenabookmark-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-hatenabookmark-icon">Hatena Bookmark icon</title><path d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.645 1.41-1.425-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12.526-.084.976-.222 1.32-.412.45-.232.78-.564 1.02-.99s.36-.915.36-1.48c0-.78-.21-1.403-.63-1.87-.42-.48-.99-.734-1.74-.794.66-.18 1.156-.45 1.456-.81.315-.344.465-.824.465-1.424 0-.48-.103-.885-.3-1.26-.21-.36-.493-.645-.883-.87-.345-.195-.735-.315-1.215-.405-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185c.705 0 1.185.088 1.44.262.27.18.39.495.39.93 0 .405-.135.69-.42.855-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08c.71 0 1.185.08 1.432.24.245.16.367.435.367.83 0 .38-.13.646-.39.804-.265.154-.747.232-1.452.232h-.57V9.08h.615z"/></svg>

こんな感じになっていると思います。これをそのままHTMLのタグとして使用出来ます。

サイズや色はCSSで指定できます。

svg {
  width: 24px; //横幅
  height: 24px; //高さ
  fill: #fff; //色
}

svgは文字ではないのでfont-sizeではなくwidth heightで指定しましょう。また、色（塗りつぶし）はfillを使います。

このように、使いたいアイコンだけを読み込むことで、サイトの表示速度高速化に繋がります。また、外部ファイルの読み込みがないという点でも、高速化に繫がります。

jQueryの使用によるサイト表示処理（レンダリング）

jQueryを使うべきところ〜 JSおくのほそ道 #009 - Qiita

かなり古い記事ですが、jQueryの処理は、javascript（ネイティブjs）の処理に比べて、かなり遅いです。また、jQueryを外部から読み込む必要があるので、サイトの読み込み速度に大きく影響します。

解決方法

jQueryのコードをネイティブjsに書き換える

かなり大変な作業になりますが、jQueryを使用した処理のコードをすべてネイティブjsに書き換えます。

jQueryでできることはネイティブjsでもできます。知識と時間さえあれば、書き換えることができます。

ネイティブjsは大変だと言うかたは、他のjavascriptライブラリを使用するのも一つの手かもしれません。

脱jQueryでサイトの表示速度・処理速度を向上させるために - Qiita

こちらの記事ではjQueryをネイティブjsに書き換えるための基本的なことを書いています。是非参考にしてみてください。

結果

スマホ・パソコンの両方の点数が4ポイントアップしました。

あとがき

読み込み速度の高速化は、簡単なことでも結構変わったりするので、是非みなさんも見直してみてはいかがでしょうか。

2018-02-02

カエレバ・ヨメレバのカスタマイズ（コピペでOK！）

HatenaBlog CSS

f:id:ktrw3200:20180202194124j:plain Amazonや楽天などのリンクを簡単にブログなどに貼り付けられるサービス「カエレバ」。僕のメインブログでレビュー記事で使ったりします。しかし、自分のブログにあったデザインのカスタマイズがなかったので、作ってみました。で、せっかくなので公開します。
2018年2月2日午後10時コードにミスが見つかったため修正いたしました。ご迷惑おかけし、申し訳ありませんでした。

完成イメージ

f:id:ktrw3200:20180202184906p:plain — パソコン・タブレット

f:id:ktrw3200:20180202185901p:plain — スマホ

See the Pen Kaereba-Style by Puchutech (@puchun) on CodePen.

完成のイメージはこの画像の通りです。カード型のデザインで、カードが目立ちやすいように、左端に色を付けて、強調しています。

Amazon・楽天のリンクのボタンは、ホバーで色が薄くなるようにしています。

また、レスポンシブで、スマホで見たときも、表示が崩れないように調節しつつ、デザインも維持するようにしています。

シンプルなデザインかつ、目立ちやすいデザインにしました。

実装コード

以下のコードをスタイルシートに貼り付けてください。

.booklink-box, .kaerebalink-box {
  padding: 15px 0 0 35px;
  width: 100%;
  margin: 0 auto 15px;
  box-sizing: border-box;
  border-radius: 0 5px 5px 0;
  background: #F5F5F5;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.kaerebalink-box::before,
.booklink-box::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 20px;
  background: #2196F3; //左端の強調色
}

.booklink-image, .kaerebalink-image {
  vertical-align: top;
  box-sizing: border-box;
  width: 120px;
  text-align: center;
  float: left;
}

.booklink-image img, .kaerebalink-image img {
  max-width: 100%;
}

.booklink-info, .kaerebalink-info {
  vertical-align: top;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 15px 10px;
}

.booklink-name, .kaerebalink-name {
  margin: 0 0 24px 0;
  display: block;
}

.booklink-name a, .kaerebalink-name a {
  color: #0066cc;
  text-decoration: underline;
}

.booklink-name>a, .kaerebalink-name>a {
  font-size: 18px;
  line-height: 25px;
  padding-bottom: 5px;
  border-bottom: 1px #616161 solid;
  width: 100%;
  color: #212121;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: all .3s;
}

.booklink-name a:hover, .kaerebalink-name a:hover {
  color: #757575;
}

.booklink-powered-date, .kaerebalink-powered-date {
  font-size: 8px;
  margin: 6px 0 0 0;
}

.booklink-detail, .kaerebalink-detail {
  color: #333333;
  font-size: 12px;
  margin: 0 0 10px 0;
}

.booklink-link2 a, .kaerebalink-link1 a {
  display: block;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  margin: 0px;
  z-index: 6;
  transition: all .3s;
}

.booklink-link2 a:hover, .kaerebalink-link1 a:hover {
  opacity: 0.6;
}

.booklink-link2>div, .kaerebalink-link1>div {
  width: 100%;
  box-sizing: border-box;
  float: left;
  margin: 5px 0;
}

.shoplinkamazon a {
  color: #ffffff;
  background: linear-gradient(to right, #f7971e, #ffd200);
  box-shadow: 0 5px 10px rgba(251, 152, 11, .5);
}

.shoplinkrakuten a {
  color: #ffffff;
  background: linear-gradient(to right, #d31027, #ea384d);
  box-shadow: 0 5px 10px rgba(252, 28, 143, .5);
}

.shoplinkkindle a {
  color: #ffffff;
  background: linear-gradient(to right, #1488cc, #2b32b2);
  box-shadow: 0 5px 20px rgba(0, 63, 255, .5);
}

.booklink-footer {
  display: none;
}


@media screen and (max-width: 787px) {
  .booklink-box, .kaerebalink-box{
    padding: 35px 5px 0px;
    border-radius: 0 0 5px 5px;
  }
  .booklink-image, .kaerebalink-image{
    margin: 0 auto;
    float: none;
  }
  .kaerebalink-box::before,
  .booklink-box::before{
    width: 100%;
    height: 20px;
  }
  .booklink-info, .kaerebalink-info{
    padding: 20px 10px 10px;
  }
}

2018-01-21

CSSの「filter」を使いこなす

CSS

f:id:ktrw3200:20180121184427j:plain

あ～！画像を編集してから記事に貼り付けるの面倒くさ－い

それ、CSSでもできるよ

しーえすえす...ですか？？

CSSで画像加工

ブログの記事に画像を貼り付けるとき、わざわざ"Photshop"などの画像加工ソフトで彩度や明度、コントラストを調節するという方も少なくは無いと思います。

しかし、CSSのfilterプロパティを利用して、画像加工するという手法もあるのです。今回は、彩度や明度、コントラストを調節することができるfilterプロパティについて詳しく解説します。

"filter"でできること

ぼかし (blur)

See the Pen Filter001 by Puchutech (@puchun) on CodePen.

img {
  filter: blur(5px);
}

ぼかしの場合の値の指定はpxなどで指定しますが、%は使用出来ません。指定した値は、ガウスぼかしの半径となります。

このフィルターを使用した要素が、ぼかしによって、要素の外側にはみ出てしまうので注意。

モノクロ (grayscale)

See the Pen Filter002 by Puchutech (@puchun) on CodePen.

img {
  filter: grayscale(100%);
}

モノクロのフィルターは0%を基準とし、値が100%に近づくにつれて、要素（画像）がモノクロになります。値が100%になると、完全に白黒になります。

コントラスト (contrast)

See the Pen Filter003 by Puchutech (@puchun) on CodePen.

img {
  filter: contrast(130%);
}

See the Pen Filter004 by Puchutech (@puchun) on CodePen.

img {
  filter: contrast(70%);
}

コントラストのフィルターは100%を基準とします。

100%が0%に近づくほど、コントラストが低くなり、全体的に灰色がかかり、明暗の差がなくなります。0%になると、完全に灰色だけになります。

逆に100%からさらに大きい値（上限値なし）になると、明暗の差が大きくなり、全体的にくっきりとした画像になります。

明度 (brightness)

See the Pen Filter005 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(130%);
}

See the Pen Filter006 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(70%);
}

明度のフィルターでは、100%を基準とします。

100%から、0%に近づくほど、明度が低くなり、全体が暗くなります。0%になると、要素が真っ黒になります。

逆に100%からさらに大きくなると、明度が高くなり、全体が明るくなります。

彩度 (saturate)

See the Pen Filter009 by Puchutech (@puchun) on CodePen.

img {
  filter: saturate(170%);
}

See the Pen Filter010 by Puchutech (@puchun) on CodePen.

img {
  filter: saturate(50%);
}

彩度のフィルターが100%を基準とします。

100%がさらに大きい値になると、彩度が高くなり、色鮮やかになります。

100%が0%に近づいていくと、彩度は低くなり、0%になると完全に色味がなくなり、モノクロになります。

つまり、sturate(0%)はgrayscale(100%)と同じフィルターとなります。

階調反転 (invert)

See the Pen Filter007 by Puchutech (@puchun) on CodePen.

img {
  filter: invert(100%);
}

階調反転のフィルターでは100%を基準とし、0%になると、色・輝度が反転されます。「ネガ」とも言われています。値を50%にすると、灰色になります。

色調回転 (hue-rotate)

See the Pen Filter008 by Puchutech (@puchun) on CodePen.

img {
  filter: hue-rotate(90deg);
}

色相回転の場合の値の指定はdegを使用します。degは色相環の角度(=degree)を意味します。

つまり、180degなら色が反転し、360degなら元の色と同じになるということです。

セピア (sepia)

See the Pen Filter011 by Puchutech (@puchun) on CodePen.

img {
  filter: sepia(100%);
}

セピアとは、茶色っぽい色調を意味します。セピアのフィルターでは0%を基準とし、100%に近づくほど、茶色がかかったセピア調になります。

セピアにすることで、レトロな雰囲気を出すことができまね。

影 (drop-shadow)

See the Pen Filter012 by Puchutech (@puchun) on CodePen.

img {
  filter: drop-shadow(5px 5px 10px #1A237E);
}

影のフィルターには4つの値を入力する必要があります。

1つ目には、x軸方向（水平方向）の影の位置。

2つ目には、y軸方向（垂直方向）の影の位置。

3つ目には、影の広がりの大きさ。

4つ目には、影の色を入力します。

なお、4つ目の影の色の初期値はblack(=#000)となっており、何も入力しない場合、初期値が適用されます。

透過 (opacity)

See the Pen Filter014 by Puchutech (@puchun) on CodePen.

img {
  filter: opacity(70%);
}

透過のフィルターは100%を基準とし、0%に近づくほど、要素が透明になっていきます。

0%になると、要素は完全に透明になり、見えなくなります。

このフィルターはCSS3で追加されているopacityプロパティで代用かのうで。 filter: opacity(70%)はopacity: 70%と同じ意味です。

フィルターを複数利用する

See the Pen Filter013 by Puchutech (@puchun) on CodePen.

img {
  filter: brightness(80%)saturate(170%);
}

フィルターを複数利用する場合は、適用したいフィルターを続けて入力するだけです。サンプルでは明度とコントラストのフィルターを適用させています。

各ブラウザの対応状況

13.0
53.0
35.0
40.0
9.1

あとがき

CSSのfilterだけでも、かなり表現の幅が広がるのではないでしょうか。簡単なので是非使ってみてください。

サンプルに使用した写真 : Ludovic Fremondiere on Unsplash
参考 : https://developer.mozilla.org/ja/docs/Web/CSS/filter

2017-12-14

keyframesを使ってブログに雪を降らせる

CSS

f:id:ktrw3200:20180108171342j:plain

ブログに季節感を

どんどんと寒くなってきて、ところによっては雪も降っているようですね。大阪では、まぁ雪は降りません。と、こんな話をする季節になってまいりました。冬ですね。

そこで、「ブログにも季節感を出そう」というわけで、今回はメインブログの方でCSSの@keyframesを利用して雪を降らせました。もちろん、jQueryなどは一切使っておりません。CSSのみです。

ブログに季節感を
keyframesとanimation
- 記述方法
雪を降らせる
各ブラウザの対応状況
- 「animation」「@keyframe」
- 「transform」
あとがき

keyframesとanimation

CSSで、ある要素に動きをつけるためには、transitionもしくはanimationを使う2つの方法があります。

今回使用するanimationはどのように動くかを指定でき、ペアとして使う@keyframeではどのような動きをするかを指定することができます。

記述方法

keyframesは前に@をつけます。

@keyframes [動きの名前]{
  0% {
    [プロパティ]: [値]
  }
  100% {
    [プロパティ]: [値]
  }
}

0%は動きの始まりを意味し、100%は動きの終わりを意味します。

また、50%など、始まりと終わり以外にも指定することで、反復運動などの複雑な動きも実装することができます。

次にanimationの記述方法です。

要素 {
  animation: [アニメーションに関するプロパティ]
}

簡単に説明してしまいましたが、アニメーションのプロパティは８つあります。詳しくは以下の記事を

【CSS3】@keyframes と animation 関連のまとめ - Qiita

ちなみに、animationや@keyframesはCSS3から新しく追加されたプロパティであるため、一部ブラウザではベンダプレフィックスを付ける必要があります。

雪を降らせる

See the Pen SnowEffect by Puchutech (@puchutech) on CodePen.

最初にリストで10個の項目（以下、雪）を用意しておきます。雪の色を透過することにより、重なったときにいい感じになります。

雪にそれぞれ、アニメーションの長さanimation-durationとアニメーションの遅延animation-delayを設定し、10個の雪が全てバラバラに降ってくるようにしました。また、それぞれの雪の大きさもバラバラにしています。

keyframesはこんな感じ。

@keyframes "snow" {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(500px);
    }
}

最初、雪は0の位置に配置され、0から100%になるまでにY軸方向(縦)に500px下がっていきます。このとき、animationでは

.effect_snow{
  animation: snow 30s linear infinite;
}

と記述しており、一定の変化量にするためイージングのプロパティをlinear、アニメーションをループさせるためにinfiniteを指定しています。

@keyframes中に使っているtransformも一部ブラウザで対応していないため、ベンダプレフィックス（-webkit-など）を付けています。

各ブラウザの対応状況

「animation」「@keyframe」

10.0
43.0
16.0
30.0
9.0

接頭語（ベンダープレフィックス）-webkit-をつけることでChrome4.0～,Safari4.0～,Opera15.0～に対応させることが出来ます。また、-moz-をつけることでFirefox5.0～、-o-をつけることでOpera12.0～に対応させることができます。

「transform」

10.0
36.0
16.0
30.0
9.0

あとがき

こんな風にCSSのみで要素をかなり自由に動かせると、webデザインの幅も広がりますね。

2017-12-11

当ブログのデザイン

Blog

f:id:ktrw3200:20171210213130j:plain

当ブログのデザインについて

当ブログは、ブログのデザインに深くこだわっています。開設するにあたり、長い時間デザインについて推敲し、このブログを築き上げました。

いきなりですが、近年では、Googleの「マテリアルデザイン」をはじめ、「フラットデザイン」が一般的になり、シンプルかつわかりやすいデザインが実現したものの、「オリジナリティー」を表現しにくくなっているのではないでしょうか。

そこで、このブログでは、メインブログで採用しているマテリアルデザインとは一歩引き、「オリジナリティー」の表現を最優先してデザインしました。

また、技術系ブログという面から、読者のレスポンスが少ないゆえ、はてなブログの標準機能である、はてなスター、コメントも非表示にしました。これらの機能ははてなブックマークで補完できると考えていますが、今後の状況を観察し、必要と思った場合には、これらの機能を有効化しようと思います。

なにか意見があったら、是非ツイッター、はてブコメントなどでお伝えください！

使用しているテーマ

「伝えたいことだけを伝える」を意識し、

1カラムデザイン
画像を大きく表示できる

といった点から、ろくぜうどんさん作のテーマ「Thumbnail」を利用することにしました。

元のデザインが素晴らしい上に、非常にカスタマイズ性に優れており、とても良いテーマだと実感しました。

テーマカラー

PuchuTechのテーマカラーには、コンセプトの一つである「誰にでもわかりやすく」をイメージした、優しい色の水色・オレンジの2色を使っています。

フォント

読みやすいブログを意識し、このブログでは「Webフォント」を採用しています。Webフォントを利用することで、スマホ、パソコンなどの環境に依存することなく、共通の見た目で読むことが出来ます。

使用しているフォント

Tulpen One（ブログタイトル）
Roboto（本文英語/数字）
Roboto Mono（本文コード部分）
Noto Sans（本文日本語）

上記のすべてフォントは、GoogleFontsから読み込んでいます。

フォントについては、個人的に好きな分野なので、これからフォント系の記事を書くことがあるかもしれませんね。

あとがき

デザイナーでもプログラマーでもない学生の僕が運営するこんなブログですが、何か意見がもらえると嬉しいです。

2017-11-23

このブログについて

Information

f:id:ktrw3200:20171123221954j:plain

「PuchuTech」について

本ブログ「PuchuTech」は、管理人のぷちゅんが作ったものを公開する目的で開設しました。

「PuchuTech」という名前は、管理人の「ぷちゅん」=Puchunと、技術を意味するTechnologyを組み合わせたもので、メインブログである「ぷちゅ的」=PuchuTekiと似てるな～とふとした思いつきで付けた名前です。

ちなみに読み方は「ぷちゅてっく」です。

気が変わったらブログタイトルは変わるかもねw

管理人ぷちゅんより

いつもはメインブログのぷちゅ的で活動しています。

いままでは、作ったものや技術系記事はメインブログで公開していましたが、もう少し本格的に技術系ブログ的なものを運営してみたいと思いこのブログを新しく作成することにしました。

正直、プログラミングの腕はほぼ初心者に近いですが、成長日記といった感じでやろうかと思っています。

ご連絡はこちらTwitter @puchuteki

当ブログの記事について

PuchuTechでは主にCSSを利用したデザインなどの記事を公開する予定です。

誰もが使いたくなる
誰でもわかりやすく
誰でも使える

の３つのことをコンセプトに記事を書こうと思っています。

まだまだわからないことが多かったりしますが、応援していただけると嬉しいです。

プライバシーポリシー

「PuchuTech」（以下、当サイト）を利用される方は、以下に記載する諸条件に同意したものとみなします。

個人情報の収集について

利用者は匿名のままで、当サイトを自由に閲覧する事ができます。お問合せ等、場合によっては、利用者の氏名やメールアドレスなどの個人情報の開示をお願いする事があります。しかし、利用者の個人情報を利用者の許可なく、当サイトから第三者へ開示・共有する事はありません。

当サイトでは、アクセス解析ツール「Googleアナリティクス」を利用しています。 Googleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関して、詳しくはこちらをご覧ください。

当ブログに掲載されている広告について

当ブログでは、第三者配信の広告サービス（GoogleAdsense）を利用しています。

このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報『Cookie』(氏名、住所、メールアドレス、電話番号は含まれません) を使用することがあります。

またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらを参照してください

免責事項

当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。

最善の注意を払って情報を提供していますが、誤情報が入り込んだり、情報が古くなっていることもございます。

利用者は、当サイトを閲覧し、その内容を参照した事によって何かしらの損害を被った場合でも、当サイト管理者は責任を負いません。また、当サイトからリンクされた、当サイト以外のウェブサイトの内容やサービスに関して、当サイトの個人情報の保護についての諸条件は適用されません。当サイト以外のウェブサイトの内容及び、個人情報の保護に関しても、当サイト管理者は責任を負いません。

掲載 2017年11月23日
改定 2018年8月14日