ながらみパパの妥当ブログ

2023-08-08

ChatGPTにはてなブログのヘッダーにカテゴリを表示させるCSSを作ってもらおう

はてなブログ

かっこいいサイトには大体ヘッダーにメニューがあって、サイトのカテゴリやナビゲーションなどを分かりやすく表示してますよね
今回、このヘッダーメニューをHTMLもCSSも書けない人が実装できるような方法を解説していこうと思います。

こんな人に読んでほしい

・ブログやHPにヘッダーメニューを設置したい
・でも設置の仕方が分からない
・CSS、HTMLが書けない
・無料でなんとかしたい

作りたいヘッダーメニューの背景色やカテゴリ名などの要望をAI（ChatGPT）に投げて、CSSを書いてもらうんだ

ChatGPTの使い方
ChatGPTにヘッダーメニューのCSSを作ってもらう
はてなブログに適用させる
プレビューとトライ&エラー
最後に

ChatGPTの使い方

まずPCでChatGPTを利用する方法を案内したいと思います

（1）下記のChatGPT公式サイトにアクセスし、「TRY CHATGPT」からログイン画面に遷移してください

URL：https://openai.com/blog/chatgpt/

（2）アカウントがない場合は「Sign up」、ある場合は「Log in」をクリックしてください。初めての場合、「Sign up」を選択してください

（3）登録にはメールアドレスかGoogle/Microsoftアカウントが使用できます。メールアドレスで登録する場合は、8文字以上のパスワードの設定が求められます。のちほど電話番号の入力が必要となります

（4）登録したアドレスにメールが届きます。このメール本文の「Verify email address」から登録画面に遷移します。名前と電話番号を登録すると、6桁の認証コードが記されたショートメールが送られてくるので、そちらを入力したら完了です

ChatGPTにヘッダーメニューのCSSを作ってもらう

作ってもらうための要望をChatGPTに伝えることで、プログラムをChatGPT に生成してもらいます。以下の画像のように、伝えるとChatGPTがどんどんコードを生成してくれます

実際に、このブログのヘッダーメニューを作成してもらった時の依頼内容は以下です
参考にしてみてください

ブログのヘッダーに以下のカテゴリをアイコンとともに表示させたいです。
「自己紹介」「ゲーム」「読書」「その他」
アイコンフォトはgooglefontを使ってください
各カテゴリのアクセス先urlを指定できるようにしてください
アイコン、カテゴリの順で改行せずに白枠のボックスで囲んでください
ボックスの大きさはwidth220px統一となるようにしてください
ボックス間は10pxあけてください
ボックスは中央寄りにしてください
背景の色は緑でカラーコード #3eb370　を使ってください
カテゴリの文字は白にしてください
htmlを記述してください

上記の依頼で生成されたコードが以下のとおりです

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .header {
      background-color: #3eb370;
      padding: 20px;
      color: white;
      display: flex;
      justify-content: center;
    }
    .category-box {
      background-color: #3eb370;
      padding: 10px;
      border: 2px solid white;
      border-radius: 6px;
      width: 220px;
      text-align: center;
    }
    .category {
      text-decoration: none;
      color: white;
      display: block;
      margin-top: 5px;
      font-size: 14px;
    }
    .category-icon {
      vertical-align: middle;
      font-size: 24px;
      margin-right: 5px;
    }
    .category:hover {
      text-decoration: underline;
    }
    .header .category-box + .category-box {
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="category-box">
      <i class="material-icons category-icon">account_circle</i>
      <a class="category" href="自己紹介のURL">自己紹介</a>
    </div>
    <div class="category-box">
      <i class="material-icons category-icon">sports_esports</i>
      <a class="category" href="ゲームのURL">ゲーム</a>
    </div>
    <div class="category-box">
      <i class="material-icons category-icon">book</i>
      <a class="category" href="読書のURL">読書</a>
    </div>
    <div class="category-box">
      <i class="material-icons category-icon">more_horiz</i>
      <a class="category" href="その他のURL">その他</a>
    </div>
  </div>
</body>
</html>

はてなブログに適用させる

ChatGPTが生成したコードは右上の「copy code」をクリックすると全文コピーしてくれます。これをはてなブログのヘッダー設定に貼り付けることで適用されます。

設定ははてなブログのダッシュボードから

「デザイン」> 「カスタマイズ」> 「ヘッダ」 > 「ブログタイトル下」
の順に遷移してください

プレビューとトライ&エラー

設定を貼り付けると、画面右のプレビューに反映されます
意図したとおりの表示になっているかを確認して、違うな、と思った場合は
ChatGPTへの依頼文言を修正して再度コードを作成してください
「依頼文言修正」→「ChatGPTでコード生成」→「ブログにコピペ」→「プレビューで確認」

これを繰り返すことで、自分の作りたいメニューに徐々に近づけて行ってください
（私もこのヘッダーメニューにたどり着くまで何度繰り返したことか。。。）

最後に

今回、ChatGPTを使ってヘッダーメニューを作成する方法を解説しました。

ポイントは最後のトライ&エラーで、繰り返すことで自分の作りたいメニューに近づけていく箇所だと思っています。

また、あくまでCSSやHTMLが書けないブログ初心者向けの方法なので、細部までこだわったデザインには限界があるかと思います。

これを読んでそんな人への少しでもの役に立てばと思います。

うまくいかなかったという方はコメントは問い合わせなどにメッセージいただければと思います

2023-08-07

ライフスタイルに取り入れよう！便利なChatGPTの使い方6選

エンジニア

ChatGPTについてテレビ等でも取り上げられて久しいですが、

自分が便利そうだなという使い方を紹介していきたいと思います。

ChatGPTとは
【便利な使い方その1】英文から単語表を作成
【便利な使い方その2】モチベをあげる格言を教えてくれる
【便利な使い方その3】＊＊＊の仕事について＊＊＊に例えて教えてくれる
【便利な使い方その4】ある人物を想定してディベートしてくれる
【便利な使い方その5】自由記述のものを整理する
【便利な使い方その6】愚痴のはけ口になってくれる
まとめ

ChatGPTとは

ChatGPTは、OpenAIによって開発された自然言語処理のモデルです。GPTは「Generative Pre-trained Transformer」の略で、トランスフォーマーと呼ばれるニューラルネットワークのアーキテクチャを基にしています。ChatGPTは、人間のような対話を行うことができるように設計されており、ユーザーの入力に応じて適切な回答や情報を生成します。

・・・と、いうようなことを聞いたら回答してくれるAIです（本当はもっと長い...↓）

では、ここから便利な使い方５つを紹介

【便利な使い方その1】英文から単語表を作成

英文から単語を抽出して、単語の意味をつけて表にしてくれます。

英文そのものの翻訳ももちろんできますが、これによって単語自体の意味を知りたい時や単語表を作りたい時に使えます

【便利な使い方その2】モチベをあげる格言を教えてくれる

やる気が出ない、テンションを上げたい、仕事行きたくない、そんな時にはChatGPTにモチベーションを上げてもらいましょう。誰の格言かも合わせて教えてくれます。

例は仕事に絞ってますが、ダイエット、筋トレ、恋愛、育児など様々な格言を教えてくれます。

【便利な使い方その3】＊＊＊の仕事について＊＊＊に例えて教えてくれる

何かを説明するときや理解したい時に、自分や相手の理解しやすいものに例えることでわかりやすくなりますよね。そんなこともChatGPTはやってくれます。

以下の例では、コンサルという仕事を保育士に例えて教えてくれています。

上記のような長文でも回答してくれますし、以下のように、「簡潔に」とつけるとシンプルに回答もしてくれます

【便利な使い方その4】ある人物を想定してディベートしてくれる

学校の課題や、会社での研修の一環などでディベートをして結論を導き出さないといけないことありますよね。また、テレビ等でも、＊＊＊の是非について徹底討論などしていることもあります。AIにそれをやってもらい、結論をまとめてもらうこともできるのです。面白いですね。

【便利な使い方その5】自由記述のものを整理する

アンケートや意見収集をすることで、多数の異なるコメントを集約し、整理して取りまとめてくれます。以下の例では性別、年齢、感想の異なる複数コメントをサンプルとして、その結果をまとめてもらいました。

【便利な使い方その6】愚痴のはけ口になってくれる

人間生きていれば愚痴のいいたくなることの一つや二つありますよね。そんな時、周りに愚痴を吐ける人がいなければAIに吐いちゃいましょう。

さもするとChatGPTはアドバイスや改善方法を提言してくれますが、それは不要だと伝えることで、ただ受け止めてくれることもしてくれます。たまにはChatGPTと一緒に酒でも飲んで嫌なことは忘れましょう。

まとめ

ChatGPTの便利な使い方についてまとめてみました。
ChatGPTの回答は必ずしも正確な情報とは限りません。例えば、新NISAの仕組みについてChatGPTに質問して回答をもらうよりも、金融庁のHPを見た方が正確な情報が得られます。しかし、概要を把握する目的などにおいてはChatGPTが有利と思います。
あくまでツールということは頭の隅に置いておきながらも賢く使っていきたいですね！

はてなブログで対話形式を取り入れる設定を詳しく解説

エンジニア

こちらの記事で吹き出しを使った対話形式にする方法を記載しました。

その中でヘッダーに追記するCSSを載せていますが、各行ごとの設定内容について

解説していきたいと思います。

対話形式と言ってるのはこのやりとりのことだね

そうだね、吹き出しとも表現するかな

本記事の概要

・はてなブログで吹き出しを使った対話形式に必要なCSSの内容を解説
・吹き出しで使うフォントや背景色、サイズなどを変えたい人は必見
・サクッと対話形式を実装したい人はこちらの記事を見てね！
・今回はCSSを上からある程度の行数ごとに説明を入れていくので、一気に全文知りたい方も過去記事参照してください

サイトの毎に変えるポイントをわかりやすく解説！

吹き出しボックスの設定
吹き出しの尖った部分の設定
吹き出し元の円形部分の設定
画面幅によってスタイルを変更
呼び出すクラス名と画像の指定
まとめ

吹き出しボックスの設定

 .entry-content .l-fuki,
 .entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}

.entry-content .l-fuki および .entry-content .r-fuki の要素に適用されるスタイルを指定しています。
position: relative; は相対的な位置指定を行うことを意味します。
width: calc(100% - 82px); は幅を親要素の幅から82ピクセルを引いた値に設定しています。
box-sizing: border-box; は要素のサイズにボーダーとパディングを含めるように指定しています。
padding: 20px; は要素の内側のパディングを20ピクセルに設定しています。
border-radius: 6px; は要素の角の丸みを6ピクセルに設定しています。
border: 2px solid #ddd; は要素のボーダーのスタイルを指定しています。
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16); は要素に影を付けるためのスタイルを指定しています。
background-color: #fff; は要素の背景色を白に設定しています。
z-index: 1; は要素のスタッキングコンテキストでの重なり順序を指定しています。

ポイント

ここまでで、よく変更する設定は以下の3つ

・width　　・Padding　　・background-color

設定の意味と、実際に値を変更したものを見てみましょう

上記の３点を変更するだけで、大きく見た目が変わりますよね。

注意点はwidthの設定ですが、後述の@media 以降にも記述があります。ここも同様の設定（一定以上の画面サイズ時の場合の設定）なので変更したい場合は一緒に修正するようにしてください。

ちなみに

background-colorの設定値、#fffやa8d17aというのはカラーコードという色を表すhtml記述で、どんな設定値がどんな色になるかはこんなサイトなどで簡単に調べられます

吹き出しの尖った部分の設定

ここからは吹き出しの尖った部分の設定です

 .entry-content .l-fuki::before,
 .entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}

.entry-content .l-fuki::before および .entry-content .r-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
position: absolute; は絶対的な位置指定を行うことを意味します。
content: ""; は擬似要素のコンテンツを空に設定しています。
top: 16px; は要素の上端から16ピクセルの位置に配置されるように指定しています。
width: 10px; は要素の幅を10ピクセルに設定しています。
height: 10px; は要素の高さを10ピクセルに設定しています。
border-right: 2px solid #ddd; は要素の右側のボーダーのスタイルを指定しています。
border-bottom: 2px solid #ddd; は要素の下側のボーダーのスタイルを指定しています。
background-color: #fff; は要素の背景色を白に設定しています。
z-index: 2; は要素のスタッキングコンテキストでの重なり順序を指定しています。

ここでのポイントは、さっきも出てきた background-color かな
吹き出しボックスの背景色を変更したら、ここの背景色も同じ色に変えよう

この下の部分も吹き出しの尖った部分の記述の続きです

.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.entry-content .l-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
right: -7px; は要素を右から7ピクセルの位置に配置しています。
transform: rotate(-45deg); は要素を反時計回りに45度回転させています。
-webkit-transform: rotate(-45deg); は一部の古いブラウザに対応するためのプレフィックス付きのスタイル指定です。
.entry-content .r-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
left: -7px; は要素を左から7ピクセルの位置に配置しています。
transform: rotate(135deg); は要素を反時計回りに135度回転させています。
-webkit-transform: rotate(135deg); は一部の古いブラウザに対応するためのプレフィックス付きのスタイル指定です。

吹き出し元の円形部分の設定

ここからは、吹き出し元の円形部分の設定となります

 .entry-content .l-fuki::after,
 .entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}

.entry-content .l-fuki::after および .entry-content .r-fuki::after の擬似要素 ::after に適用されるスタイルを指定しています。
position: absolute; は絶対的な位置指定を行うことを意味します。
content: ""; は擬似要素のコンテンツを空に設定しています。
width: 60px; は要素の幅を60ピクセルに設定しています。
height: 60px; は要素の高さを60ピクセルに設定しています。
top: -6px; は要素を上方向に6ピクセルの位置に配置しています。
border-radius: 50%; は要素の角を丸くするための半径を50%に設定しています。
border: 3px solid #fff; は要素のボーダーのスタイルを指定しています。
background-size: cover; は要素の背景画像を要素全体に表示するように指定しています。
background-position: center center; は要素の背景画像の位置を中央に設定しています。
background-repeat: no-repeat; は要素の背景画像の繰り返しを禁止しています。
box-shadow: 1px 1px 5px #aaa; は要素に影を付けるためのスタイルを指定しています。
box-sizing: border-box; は要素のサイズにボーダーとパディングを含めるように指定しています。
.entry-content .l-fuki::after の擬似要素 ::after の位置を右側に配置しています。
right: -82px; は要素を右から82ピクセルの位置に配置しています。
.entry-content .r-fuki::after の擬似要素 ::after の位置を左側に配置しています。
left: -82px; は要素を左から82ピクセルの位置に配置しています。

ポイント

ここまでで、よく変更する設定は以下の4つ。

・width　　・height　　・border-radius　　・border

borderでは色の円形の色の指定ができます。
その他の設定の意味と、実際に値を変更したものを見てみましょう

ここでも注意点として、widthとheightの設定です。後述の@media 以降にも記述があります。ここも同様の設定（一定以上の画面サイズ時の場合の設定）なので変更したい場合は一緒に修正するようにしてください。

画面幅によってスタイルを変更

画面幅によってスタイルを変更するようになっています。画面幅が478px以上の場合、吹き出しのサイズや配置が変更されます。

基本的に上で解説している設定と重複していますが、サイトを閲覧する側の環境によって自動的に適用される設定となるため、上の部分の設定を修正した場合はこちらも修正するようにしてください。

 @media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}

@media screen and (min-width: 478px) は、ウィンドウの幅が478ピクセル以上の場合に適用されるメディアクエリを指定しています。
.entry-content .l-fuki::after および .entry-content .r-fuki::after の擬似要素 ::after に適用されるスタイルを指定しています。
幅を80ピクセル、高さを80ピクセルに設定しています。
.entry-content .l-fuki および .entry-content .r-fuki の要素の幅を計算し、106ピクセルを引いた値に設定しています。
.entry-content .l-fuki::after の擬似要素 ::after の位置を右側に配置しています。
right: -106px; は要素を右から106ピクセルの位置に配置しています。
.entry-content .r-fuki::after の擬似要素 ::after の位置を左側に配置しています。
left: -106px; は要素を左から106ピクセルの位置に配置しています。

呼び出すクラス名と画像の指定

 .r-papa::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620173047_120.jpg);}
 .l-child::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620173004_120.jpg);}

.r-papa クラス名がr-papaです。指定されたURLの背景画像を表示するためのスタイルを指定しています。
.l-child クラス名がl-childです。指定されたURLの背景画像を表示するためのスタイルを指定しています。

まとめ

以上、対話形式をブログで行うためのCSS書式の各行についての解説でした

みなさんのブログのお役立ちになれば幸いです

nagarami-kurokiri.hatenablog.com

【2023年最新版】はてなブログで会話形式の吹き出しを使う方法

はてなブログ

今回は、はてなブログで吹き出し使う方法についてです。ググってやってみたけど上手くいかなかった方、はい、私もです。そんな私が試行錯誤して実装できたのでわかりやすく解説していきたいと思います。

はてなブログで会話形式にするのに2時間かかった。。

息子、お疲れさんやで。こんな吹き出しを出せるようになるよ

ということで

・はてなブログで会話形式の吹き出しを使う方法

わかりやすく解説していこうと思います！

一度やって上手くいかなかった人にぜひ見て欲しい！

吹き出しに使う画像URLの用意
headにメタデータ追加
記事を書く画面でHTML編集
最後に

吹き出しに使う画像URLの用意

まず、吹き出しに用いる画像を用意してください

JPEG、PNGなどで用意するのが一般的です

画像の外枠や丸い形、色は別途設定するので、丸の中の画像だけの用意で結構です

画像を用意したら、「はてなフォトライフ」に画像をアップロードします

はてなブログのダッシュボード右上にある設定タブから飛ぶことができます

アップロードの方法ははてなフォトライフのヘルプを参照してください

アップロードが出来たら画像を右クリックして、「画像のURLをコピー」してください

コピーしたURLは後で使うのでメモ帳などに貼り付けておいてください

吹き出しに使う画像のURLの用意は以上です

headにメタデータ追加

次に、headに設定を追加します。ここが要ポイントです

headにコピー&ペースト

はてなブログのダッシュボードから以下の通り画面遷移してください

「設定」 >「詳細設定」 > 「要素にメタデータを追加」

以下の内容をコピーして、上記設定（head要素にメタデータを追加）にペーストしてください

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}
.entry-content .l-fuki {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}
.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}
@media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

一番下の「クラス名」の部分と「画像のURL」の部分だけ書き換える必要あります

head内編集 -その1 クラス名-

クラス名は適当なローマ字で設定して良いです、例えばr-papaとか。(右向いてる親亀の意)あとで使うから覚えておきましょう。

head内編集 -その2 画像URL-

前段で用意した、画像のURLをペーストしてください

クラス名、画像のURLをそれぞれ貼り付けた結果のサンプル↓になります

.r-papa::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620230509.png);}
.l-child::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620231001.png);}

ちなみに

「はてブロ　吹き出し　設定」などでググると、CSSデザインの設定に上記コードを記載する記事がほとんどですが、それだと私はうまくいかなかったです。（過去にはできたのかもしれません）

記事を書く画面でHTML編集

最後に、記事を書く画面でHTML編集にして、以下の内容を記載してください。

「クラス名」と「テキスト」は自身で設定したものに適宜変更する必要があります。

<p class="r-fuki クラス名">テキスト</p>

サンプル↓この記事で使っているもののhtml記述です

<p class="l-fuki r-papa">はてなブログで会話形式にするのに２時間かかった。。</p>

以上です。プレビューで見ると吹き出しができていれば成功です

最後に

ポイントはヘッダーの設定に記載することです！

うまくいかなかった方は本記事コメントや問い合わせフォームなどから投稿ください

息子、お疲れさんやで

コピペした内容の詳細については下記の記事にまとめています

テキスト背景の色の変更などしたい方は御覧ください

■ガイドライン
 https://www.soumu.go.jp/main_content/000853183.pdf

プライバシーポリシー

当サイトに掲載されている広告について
当サイトが使用しているアクセス解析ツールについて
当サイトへのコメントについて
ウェブサーバの記録
利用者情報の外部送信について
責任の有無

当サイトに掲載されている広告について

当サイトでは、第三者配信の広告サービス（Googleアドセンス、A8.net、Amazonアソシエイト）を利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報『Cookie』(氏名、住所、メールアドレス、電話番号は含まれません) を使用することがあります。
またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをご覧ください。

当サイトが使用しているアクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちらをご覧ください。

当サイトへのコメントについて

当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、メールアドレスとURLの入力に関しては、任意となっております。
全てのコメントは管理人が事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。
加えて、次に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

当サイトからのご連絡や業務のご案内やご質問に対する回答
ご注文いだいた商品を発送する場合
禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁されている物品、行為の依頼や斡旋などに関するもの。
その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

ウェブサーバの記録

当サイトのウェブサーバは、利用者のコンピュータのIPアドレスを自動的に収集・記録しますが、これらは利用者個人を特定するものではありません。利用者が自ら個人情報を開示しない限り、利用者は匿名のままで、当サイトを自由に閲覧する事ができます。

利用者情報の外部送信について

当サイトでは、アクセス解析や広告配信のために以下のツールを導入し、ツール提供事業者にサイト訪問者の情報が提供されます。
提供されたデータはそれぞれの事業者のプライベートポリシーによって管理・利用されます。当社が使用するツールの一覧および利用目的、利用中のウェブサイト、ツールが収集するデータについては以下の通りです。

※参照
■総務省サイト
https://www.soumu.go.jp/main_sosiki/joho_tsusin/d_syohi/gaibusoushin_kiritsu.html

アクセス解析

サービス名/会社名	送信される利用者情報	利用目的	プライバシーポリシー・オプトアウト設定
Google Analytics/Google LLC	・Cookie等利用者を識別する為の識別子・webブラウザ上のアクティビティ・利用環境・IPアドレス	アクセス解析による利便性の向上を計り広告効果を測定する	プライバシー、 Google Analytics利用規約、オプトアウト






Google Seach Console/Google LLC	Cookie等利用者を識別する為の識別子・webブラウザ上のアクティビティ・利用環境・IPアドレス	流入数、クリック数などサイトのパフォーマンスを上げ、ユーザーが当サイトを見つけやすくする	プライバシー、 Google Analytics利用規約、オプトアウト

広告配信

サービス名/会社名	送信される利用者情報	利用目的	プライバシーポリシー・オプトアウト設定
Google AdSense/Google LLC	・Cookie等の情報・IPアドレス、端末情報・リクエスト情報・リクエストの送信日時・ブラウザの種類や言語	広告配信の最適化広告配信による成果の計測および不正行為の防止	プライバシー、 Google Analytics利用規約、オプトアウト








Zucks/株式会社Zucks	・IPアドレス・利用ブラウザの種類・広告を表示した際のURLやアクセス日時・表示した広告の種類・クリックした広告の種類	ユーザーに、より関連性の高いと推測される広告を表示する	プライバシーポリシー、Zucks Ad Networkの広告配信について、オプトアウト








afb/株式会社フォーイット	・Cookie等の情報・IPアドレス、端末情報・閲覧日時、ファイル名・リンク元のURL ・ブラウザ、OSの種類	最適な広告の配信統計分析サービス改善システム障害、不正アクセスの調査	プライバシーポリシー、オプトアウト(Google Analytics)








楽天アフィリエイト/リンクシェア・ジャパン株式会社	・Cookie等の情報・IPアドレス、端末情報・利用環境・広告識別子・閲覧履歴、日時・ブラウザ、OSの種類	広告配信の最適化サービスの開発と改善広告配信による成果の計測および不正行為の防止	プライバシーポリシー、オプトアウト(Google Analytics)








Amazon アソシエイト/Amazon.com Inc.	・Cookie等の情報・IPアドレス、端末情報・利用環境・広告識別子・閲覧日時・表示された広告・クリックした広告・その他技術的な情報	広告配信の最適化サービスの開発と改善広告配信による成果の計測および不正行為の防止	プライバシーポリシー、パーソナライズド広告

その他のアフィリエイトサービス

当サイトでは成果報酬型広告またはクリック型広告の効果計測のため、利用者のアクセス情報が外部事業者に送信されます。
当該の情報は個人を特定する情報ではございません。また当該の情報が目的外利用される事は一切御座いません。

1.利用目的
成果報酬型広告またはクリック型広告の効果計測および不正行為の防止

2.送信される情報内容
・広告の表示日時
・広告のクリック日時
・広告の計測に必要なクッキー情報
・広告表示時及び広告クリック時のIPアドレス
・広告表示時及び広告クリック時に使用されたインターネット端末およびインターネットブラウザの情報

3.サービス名/会社名（プライバシーポリシー）
・A8 / 株式会社ファンコミュニケーションズ

SNSのソーシャルプラグイン

当サイトでは、以下のSNSのソーシャルプラグインを導入しております。
※参照
■個人情報保護委員会
 https://www.ppc.go.jp/news/careful_information/sns_button_life/

1.利用目的
ユーザーの利便性の向上および集客のため

2.送信される情報内容
・ユーザーID、IPアドレス、Cookie等の情報
・アクセスしているサイト、アクセス日時
・閲覧履歴、検索ワード
・ブラウザの情報、識別子

3.サービス名/会社名（プライバシーポリシー）
・Twitter / Twitter,Inc

・はてなブックマーク / 株式会社はてな

責任の有無

当サイトは、アフィリエイトプログラムにより商品をご紹介致しております。
アフィリエイトプログラムとは、商品及びサービスの提供元と業務提携を結び商品やサービスを紹介するインターネット上のシステムです。
従いまして、当サイトの商品は当サイトが販売している訳ではありません。

お客様ご要望の商品、お支払い等はリンク先の販売店と直接のお取引となりますので、特定商取引法に基づく表記につきましてはリンク先をご確認頂けますようお願い致します。
商品の価格商品の詳細消費税送料在庫数等の詳細は時として変わる場合も御座います。
また、返品・返金保証に関しましてもリンク先の販売元が保証するものです。当サイトだけではなくリンク先のサイトも良くご確認頂けますようお願い致します。
また、当サイトの掲載情報をご利用頂く場合には、お客様のご判断と責任におきましてご利用頂けますようお願い致します。当サイトでは、一切の責任を負いかねます事ご了承願います。

尚、掲載商品に関するお問合せはリンク先に御座います企業宛までお願い致します。当サイト管理者側ではお答え致しかねます事、ご了承ください。