Googleアドセンス ads.txt(アズテキスト)設置


追加更新

  • 19/06/15
    本日Google AdSenseの画面からads.txtのアラートが消えたことを確認しました〜!
    消えるまでに時間がかかるのは見ていましたが、ちょっと不安だったよね笑
    日数で言えば 2週間 くらいかかっています。

ads.txtのアラートがちゃんと消えた画像

始めに

本日!19/06/03 めでたく!Google Adsの広告が反映しましたー!㊗🤩
いえーい!✌️パチパチ👏
人生初の給与以外の収益の第一歩なのでなおさら嬉しいのでした🤩

しかし…喜んでるのも束の間、Google Ads をみてみると何やら危なげなアラートが😫

ads.txtのアラート画像

わからないので、早速調べながら対応していきたいと思います。
今回の設置パターンは Hexo の デフォルトテーマ landscape のパターンになります。

参考

ads.txtとは

アドフラウド(悪質な広告など)を防ぐための仕組みのひとつ。
また広告主側の不当な支払い、ブログ運営者のサイトのドメイン評価が下がることによる収益の低下を防ぐという効果があるそうです。
詳しくは参考サイトをご覧ください。

ads.txtの設置方法

  1. サイト運営者IDを取得しにいきます。

  2. ご自身のGoogle AdSenseのページにアクセス

  3. 左メニューの「アカウント」をクリック

  4. 「●設定」をクリック

  5. 「◯アカウント情報」をクリック

  6. サイト運営者IDが表示されるので、メモ、またはコピペしておきます

※サイト運営者IDは「お客様のサイトで AdSense 広告を配信する準備が整いました」という有難いメールにも載っています🤭

  1. 新規テキストファイルを開きます。

  2. ファイル内に次の 1 行を含めます。


google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0


  1. 「pub-0000000000000000」の部分を自分のサイト運営者IDに置き換える。

  2. ads.txt と名前をつけて保存

  3. ルートドメインに ads.txt を設置する

※ルートドメインとは
当サイトの場合は https://quokkablog.site/ads.txt
この位置のことです。

今回実際に設置した場所は以下のpathになります。


/Users/ユーザ/hexoブログフォルダ/themes/landscape/source


  1. 設置できているかは以下のサイトで確認ができます
    Ads.txt 管理
    株式会社DataSign(DataSign Inc.)が提供する、経済産業省公認のサイトです。

  2. サイトURLを入力し、「チェック」をクリック。

  3. 以下の画像が出れば成功です。
    ads.txtのチェックOKの画像

以上でads.txtの設置が完了です。

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

ノートパソコンを冷やす!冷却パッド!


追加更新

  • 190609
    実際に購入したので動画でノイズがどの程度かなどを収録して見ました。

始めに

2019/1/25〜動画編集を開始して初めての夏🐳
今は6月ですが、すでに熱の影響かノートPCのパフォーマンスが落ちてきたので、熱を冷やすいい方法はないかと思い「冷却パッド」なるものを購入したので、その時の調べた情報を購入条件とともに残しておきます🆒

ちなみに購入はちょっと..という方は底面四隅に10円玉とかを積んでノートPCを浮かして、底に空気の通り道を作ってあげても多少改善はするみたいです。
なぜ10円玉かというと熱伝導率が良いそうです🤨

190602 Amazon1位の冷却パッド Amazonで購入できます✅

参考

購入基準

  1. リモコンが後ろじゃない(できれば前)
  2. デザイン
  3. 出来るだけ冷却効果があり静か
  4. 値段は安い方が良い

用語

  • rpm : 回転数。大きいほど騒音レベルが上がりやすいが、冷やす力の向上にも繋がる
  • db : 騒音レベル。ファンのサイズ大きいほど回転数が少なく冷やせるので、騒音レベルは下がります。
  • CFM : 風量。この値が大きいほど冷やす力は強い

性能比較 190602

商品 YOLIC 冷却パッド KEYNICE 冷却パッド ZXHT 冷却パッド TopMate 冷却パッド Granda 冷却パッド
価格 2,388 3,580 2,999 2,499 2,480
CFM(冷やす力) 75CFM
rpm(回転数) 2200+10%RPM 2600rpm 2400 + 15%RPM 2500rpm±10% 大型ファン回転数:1500±10%RPM
小型ファン回転数:3000±10%RPM
db(騒音レベル) 21db 20-30db?? 21dB~23dB 24dB
USB 2口 2口 2口 2口 2口
リモコン位置
サイズ 18x13x3cm
(あってない気がします)
約W43×D30.4×H2.3cm 35x4x30cm 41x29x2.5cm
保証 6ヶ月間のストア保証 6ヶ月の製品保証 18ヶ月の製品保証 保証期間:お買い上げ日から180日
Amazonレビュー ⭐️4.2(22件) ⭐️4.9(29件) ⭐️3.6(59件) ⭐️4.2(35件)
Amazon Amazon Amazon Amazon Amazon Amazon

結果

Granda 冷却パッドを購入することにしました!
以下が決めてになったポイントです😄

  • 総合的な(価格・スペック・見た目)バランス
  • レビューの総合的な印象が Granda がよかった
  • dbは20前半なら問題なさそう
  • rpmの判断がしづらいが冷却効果に問題はなさそう。
    ファンの位置が真ん中にあり、むしろレビューみてたら効果は強そう
  • 2019モデル
  • 2480円からさらに-250円クーポンがあった

KEYNICEかTopMateの見た目が一番よかったのですが、レビューの印象、確認できなかった情報があり今回は選びませんでした。
集めた情報をみてみるとどの商品もカタログスペックでの差異は少なく、断定するのは難しい印象でした。
(というかCFMの情報が少ないんですね..結局rpmとdbの予想で判断するしかない)
見た目、価格、レビューの総合的な印象が決め手になりそうですね。

補足

購入前に一度確認をしていただいた方が良いですが、大体の機種が12~17インチのノートPCに対応しているようです。

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

パソコンのスピーカーからノイズ(ピー音など)がする場合の改善方法


始めに

一時期パソコンのスピーカーからノイズ(ピー音)が酷く、頭痛になりそうで悩んでいました。
ネットで調べてもピンとくるものがすぐ出てこなかったので、改善方法としてこれも記事に残しておきます!

ちなみに今使ってるパソコンのスピーカはこれです!
買った時は990円とかだったとも思う!値段のわりにはバランスのいい音を出してくれます🎶
しかも結構な期間使えてるので、とりあえずスピーカー欲しい方にはおすすめです😃

今使ってるPCスピーカー Z120BW Amazonで購入できます✅

参考

ノイズ改善方法

ズバリ!
🔌直接コンセントから電源供給をする💡
これだけですね😳

ノイズで悩んでる方😰
頭が痛い方😖

さぁ!いますぐ💨PCスピーカの電源をコンセント直に変えましょう!

USBの電源供給だと、どうしてもパソコンとかPCにつけているUSBハブを電源供給口にしがちですが、これが原因です。
様々な機器を経由して電気を受け取るため、ノイズが発生するそうです。

なので、パソコンスピーカを使う時の電源は直接コンセントから取りましょう!
USBの場合は USB → コンセント 変換のアダプターを使うとOKです!

なおこれは改善方法の一部で様々な原因があるため、改善しない可能性もあります。
個人的に一番手っ取り早く、効果的な方法でした。

よろしくお願いいたします😄

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Hexoのlandscapeテーマにプロフィールを追加


始めに

Hexoのデフォルトテーマ landscape のサイドメニューにプロフィールを追加しました。
更新方法をメモとして残しておきます。

プロフィール反映後のサンプル画像 <br>※プロフィールの画像はサンプルどえす👾

参考

プロフィール追加方法

  1. まず以下のパスでサイドメニューのファイルがあるフォルダに移動

/Users/ユーザ名/hexoフォルダ(blogのフォルダ)/themes/landscape/layout/_widget


  1. いづれかのファイルをコピーし、profile.ejsとして複製

  2. profile.ejsにコードを貼り付ける
    <!-- ~ -->は補足、メモなので削除してOKです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% if (site.posts.length){ %>
<div class="widget-wrap">
<!--
※補足
('profile') がタイトルになるようです。
profile.ejsのファイル名と揃えなくても、ちゃんと表示されたので揃えなくても良さげです。
スタイル(装飾)は直接 style="color:red;" とかを書いたり、以下のCSSファイルにClassを書いたりしてもOKです。

↓CSSファイル
/Users/ユーザ名/hexoフォルダ(blogのフォルダ)/themes/landscape/source/css/_partial/sidebar-aside.styl
-->
<h3 class="widget-title"><%= __('profile') %></h3>
<div class="widget">
この中に作成したいProfileをHTMLで書いていきます。
</div>
</div>
</div>
<% } %>

ちなみにこのブログのProfileのHTMLコードはこんな感じです↓↓
まだ作成中ですが、ほぼ直書き!!笑🤣🤣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<% if (site.posts.length){ %>
<div class="widget-wrap">
<h3 class="widget-title"><%= __('profile') %></h3>
<div class="widget profile">
<!-- 190528 profile追加 -->
<div class="tc">
<img src="画像パス">
</div>
<div>
<span class="b" style="color:rgb(23, 196, 0);">JavaScript、PHP、MySQL</span>などでツールを開発しています。<br>
また動画編集にも興味があり、<span class="b" style="color:red;">YouTube</span><span class="b">ゲーム実況</span>🎮などもしています。<br>
お気軽に<span class="b" style="color:blue;">フォロー、チャンネル登録</span>してください😗<br>
自分でできることを増やして、少しでも豊かになりたいどえす🤣<br>いざ転職へ🖥
<ul>
<li><i class="fab fa-youtube"></i> <a href="https://www.youtube.com/channel/UCd1-55xydtGxpP07iFS3a2Q" target="_blank" rel="noopener">Youtube</a></li>
<li><i class="fab fa-twitter"></i> <a href="https://twitter.com/quokkaChannel" target="_blank" rel="noopener">Twitter</a></li>
</ul>
</div>
</div>
</div>
<% } %>

sidebar-aside.stylにはこんな感じで記載しました👻

1
2
3
4
5
6
7
8
/*190528 profile css 追加*/
.profile
 img
width: 92%
.tc
text-align:center
span.b
font-weight: 600

※ class=”fab fa-youtube” class=”fab fa-twitter” Font Awesome のアイコンのClassです。

  1. プロフィールをサイドメニューに表示するために _config.yml を開いて更新

/Users/ユーザ名/hexoフォルダ(blogのフォルダ)/themes/landscape/_config.yml


  1. # Sidebarに - profile を追記します。
    ※ここについてはファイル名と合わせてください。合わせないと表示されません。

# Sidebar
sidebar: right
widgets:
- profile


以上でProfileの追加が完了です。

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Hexoのlandscapeテーマに更新日追加


始めに

Hexoのデフォルトテーマ landscape の作成日の横に更新日を追加しました。
更新方法をメモとして残しておきます。

更新日反映サンプル画像

参考

更新日追加方法

  1. まず以下のパスで移動しdate.ejsを開く

/Users/ユーザ名/hexoフォルダ(blogのフォルダ)/themes/landscape/layout/_partial/post/date.ejs


  1. date.ejsにコードを貼り付ける

↓このコードの下に

1
<time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>

↓このコードを貼り付ける

1
<time datetime="<%= date_xml(post.updated) %>" itemprop="datePublished"><%= "更新日:"+date(post.updated, date_format) %></time>

※post.updated で更新日にアクセスしています
※更新日: は好きな文言に変更可能です

  1. 各記事のファイルのTOPの設定値部分(Front-matter)に updated: yyyy-mm-dd 00:00:00 を記載

例)updated: 2019-05-30 20:50:57
※20:50:57は今回の表示形式では反映しないので 00:00:00 で統一してもOK
※updated: yyyy-mm-dd 00:00:00を記載しない場合はファイルを保存した更新日が反映するみたいです。
(毎回ファイルの保存したタイミングの日時なると、内容的に更新がない場合も日付が更新されるので注意)

Front Matter 更新日反映サンプル画像

以上で更新日の追加が完了です。

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Animate.cssの使い方


始めに

最近Vue.jsというJavaScriptのフレームワークを勉強しているのですが、勉強の中でとても楽しいCSSライブラリ「Animate.css」に出会えたので紹介します。
(もう既に有名とは思うのですが…笑)

参考

  • Animate.css
    ※プルダウンで動きを選び、「Animate It」をクリックで動きが確認できます。
    このサイト。シンプルでいい感じのレイアウトで個人的に大好きです😍
  • Animate.css git hub
    ※詳細な使い方はこちら

Animate.css使い方

  1. まず以下を<head>タグで読み込みます。
    1
    2
    3
    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    </head>

※CDN(外部リンクから直接よぶ方法)の例です。
他にも npmインストールやファイルをダウンロードして読み込む方法もあります。詳細はAnimate.css git hub

  1. 動きをつけたいHTML要素のタグにclassを付与します。
    1
    <div class="animated infinite flash slower delay-2s">この要素が無限ループでflash(点滅)。スピードは遅めで2秒の遅延効果を付与しています</div>
  • animated(必須):定型文
  • infinite:無限ループ設定
  • flash(必須):ここに好きなアニメーションの名前を指定します
    ※flashの部分を好きなのに書き換えてください。
  • slower:他に slow fast など速度設定が可能です
  • delay-2s:遅延効果 2s〜5sで選択可能。CSSを触れればカスタムはできるとのこと

bounce 無限ループ 通常

bounce 無限ループ slow

bounce 無限ループ slow 遅延5秒

flash 無限ループ

rubberBand 無限ループ

参考

JavaScriptを使えばアニメーションの終了を検知し、その後に処理を追加することもできます。

1
2
3
4
5
6
7
8
9
10
const element =  document.querySelector('.my-element')//終了を検知したい要素
element.classList.add('animated', 'bounceInLeft')//その要素に class="animated1 bounceOutLeft" を追加

//'animationend' で終了を検知
element.addEventListener('animationend', function() {
//ここに終了タイミングで行いたい処理を書く
//例)
element.classList.remove('bounceInLeft')//bounceInLeftを削除
element.classList.add('bounceOutRight')//bounceOutRightを付与しOutさせる
})

bounceInLeft → 2秒遅延しbounceOutRight

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

アニメーションってずっと見てると酔いますよね笑
マークダウンファイルにも直接<style></style><script></script>かけるんですね!

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Hexoブログのfavicon作成、設置


始めに

このブログは HEXO -> Github -> Netlify を使って生成、公開(デプロイ)されています。
その際にfaviconを作成したので、その手順を残しておきます。

補足

  • favicon
    Favorite icon(お気に入りのイコン)の意味。
    PCブラウザやスマートフォンでそのサイトのアイコンとして表示される。

参考

favicon作成+設置方法

  1. まずfaviconの元となる画像を 260*260 以上の正方形の大きさでイラレなど画像編集ソフトで作成
  2. 画像をpngなどの形式で保存
  3. 画像を作り終わったらFavicon Generator. For real.で .ico ファイルを生成
  4. [Select your Favicon picture] をクリックし、作成した画像をアップロード
  5. 各種設定を行い [Generate your Favicons and HTML code] をクリック
    ※詳細はこちらを参考にしてください。2019年最新ファビコン(favicon)の必要なサイズと作り方
  6. [Favicon package] をクリックし、生成されたfaviconをダウンロードし解答
  7. 画像などのファイルを以下のディレクトリに配置

/Users/ユーザ/ブログ(HEXO)のルートディレクトリ/themes/landscape/source


※当ブログではフォルダを分けたかったので faviconフォルダを作成し設置しました。

  1. 生成された favicon の HTMLソース を以下のファイルにコピペ

/Users/ユーザ/ブログ(HEXO)のルートディレクトリ/themes/landscape/layout/_partial/head.ejs
※landscapeテーマの場合の例になります


※自分は <% if (config.highlight.enable){ %> の上に記載しました。
(もともとのfaviconのサンプルソースが反映している位置だったのでここにしました)

  1. HEXOのテーマの以下ファイルの favicon の部分にファイルパスを記載

/Users/ユーザ/ブログ(HEXO)のルートディレクトリ/themes/landscape/_config.yml


※当ブログみたいにfaviconフォルダを作成した場合は下のパスになります。


favicon: /favicon/favicon.ico


この場合「8.」のHTMLの href 部分のパスも書き換えてください。
こんな感じ href=”/favicon-32x32.png” >> href=”/favicon/favicon-32x32.png”

  1. アップロードし favicon 反映しているか確認し完了

ちなみに「8.」のHTMLなどが生成されたページの [Check your favicon] をクリックし、
自分のページのURLを入力すると反映状況を確認してくれる機能もあります!すごいですよね!.。゚+.(・∀・)゚+.゚

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Netlifyでカスタムドメイン設定後のリダイレクト設定


始めに

カスタムドメイン設定後は昔のドメインとカスタムドメインで2つの同じサイトがある状態になっています。
その状態はSEO的にもよくないので、昔のドメインにアクセスした場合に、カスタムドメインに自動で遷移するようにリダイレクト処理を行います

自分が調べた時に最初に目についたのが、以下の方法でした。
publicフォルダ直下(ルート)に _redirects というファイルを作成、下の内容を記載し設置


https://blog-qc.netlify.com/* https://quokkablog.site/:splat 301!


(構成:古いURL* 新しいURL:splat 301!)

自分の場合Netlifyでジェネレート(hexo g)されるので公開フォルダ(HEXOの場合:public)が生成される前段階です。
その為、ここでいうルートがどこかわからないし、実際置いてみてもリダイレクトされなかったので、netlify.tomlを作成する方法で行いました。

補足

macで新規ファイルをフォルダに作成するのはめんどくさいので、ターミナルで以下コマンドを実行するとすぐ作れます。
(なんでwindowsみたいに右クリックで簡単に作れないの(°д°))

  1. cd を実行し作業フォルダに移動
    cd hexoのルートフォルダへのパス
  2. touch を実行し netlify.toml ファイルを生成
    touch Netlify.toml

リダイレクト設定

  1. netlify.toml作成しhexoフォルダ直下に設置
  2. 以下の形式で netlify.toml を保存
    ※ダブルクリックでテキストファイルで開いて保存でOKです

[redirects]]
from = “https://blog-qc.netlify.com/*
to = “https://quokkablog.site/:splat
status = 301
force = true


  • from:古いURLを記載
  • to:カスタムドメインの新URLを記載
  • 301:HTTPステータスコードといい、リダイレクト時に設定しておくことで恒久的な移転を示します。
  1. hexoフォルダの直下に設置
  2. gitでプッシュしてアップロード
  3. 昔のURLにアクセスしリダイレクトされるか確認する

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

独自ドメインを取得して、Netlifyのカスタムドメインを設定した


始めに

今回独自ドメインを取得し設定するまでに調べた情報を記載します。
そんなに難しく考えずとも、わかりやすいものを取得すれば良い感じでした。
ただし、一度決めたドメインを変更する場合はSEOに対してデメリットがあるので、納得いく名前は付けたいところです。
気軽に参考にしていただければと思います。

よろしくお願いします。

補足

ドメインの概要

サンプルURL:http://www.sample.co.jp

  • ホスト名:www
    ※用途を示す名称のようなもの、現在は短い方がいいなどの理由で省かれてることが多いそうです。
  • ドメイン名:sample.co.jp
  • トップレベルドメイン:jp
  • セカンドレベルドメイン:co
  • サードレベルドメイン:sample

本サイト【クワッカブログ】のURLは以下になります。
http://quokkablog.site/
この場合は トップレベルドメインが .site セカンドレベルドメインが 自分で名前を決めた quokkablog になります。
ハイフンなどの記号は調べたのですが、なんとも言えないので入れませんでした。
「ドメイン 記号 デメリット」などで検索してみてください。

選んだポイント

  • 海外ドメインにはしない
  • 内容にあったドメインにする
  • 日本語名にはせずに、サイト名としてわかりやすいものにする
  • できるだけ短くする
  • グーグルの評価にはどれを選んでも影響はないとのこと

調べる時間がなかったので、中古ドメインはとりあえず今回は使いませんでした。

ドメインの取得先はムームードメインにしました。
(お名前.comよりサイトが好きでした(* ̄∀ ̄))
特に差異は無いそうなのではお好みでいいそうです。
ムームードメイン

取得〜設定の際に出てくる用語補足

  • https
    通信の際に情報などを暗号化し情報を守ってくれるような仕組みです。
    他にも機能があり、この設定じゃ無いとGoogleから安全ではないサイトと言われてしまいます。
    Netlifyでドメイン設定完了後に設定ができます。
    httpsとは?

  • WHOIS公開情報
    インターネット上に公開されているドメインの登録情報(登録者名、住所、電話番号、メールアドレス)です。
    必ず登録が必要ですが、ドメイン取得する際に「代理公開」を選択すると取得先の会社の情報で掲載されるので、個人情報の公開を防ぐことができます。
    公開したく無い場合は「代理公開」を選択しましょう。
    WHOIS情報の『弊社情報代理公開』に関して

  • ネームサーバ(DNS)
    サイトのURLにアクセスし表示する際、ドメイン情報を元にIPアドレスを取得します。
    その仕組みのことを言うそうです。
    今回はNetlifyで利用するので、ムームードメインでは「GMOペパボ以外のサービス」を選択しました。
    ネームサーバーとは?

カスタムドメイン設定の大まかな導線

  1. Netlifyへ移動
  2. 「Domain Setting」をクリック
  3. 「Add custom domain」をクリック
  4. 取得した独自ドメインを登録
  5. 「Check DNS Configuration」をクリック
    ※今回自分はwwwなしの方で進めました。
  6. 「Set up Netlify DNS」をクリック

Netlify側の設定については以下を参照させていただきました。
詳しくはこちらをご覧ください。
Netlifyで独自ドメインを設定する

上記を完了するとネームサーバー(4つ) が表示されます。
次はそのネームサーバーをムームードメイン側に登録します。

  1. ムームードメインに移動
  2. 「コントロールパネル」をクリック
  3. 「ドメイン一覧」をクリック
  4. 対象のドメインをクリック
  5. 少し下にネームサーバ設定変更の欄が出るのでそこに登録

上記完了後、しばらく待つと(1hくらい?)Netlify側でドメインが活性化し利用可能になります。
ドメインが利用可能になると、 https の設定ができるようになるので、
「Let’s Encrypt sertificate」をクリックしてhttps化を実施しましょう。

最後に忘れがちな静的ジェネレータの設定ファイルを変更します。
今回はHEXOなので _config.yml の修正です。

  1. _config.yml の url を新しいドメインに書き換える

# URL
## If your site is put in a subdirectory, set url as ‘http://yoursite.com/child‘ and root as ‘/child/
url: ここに新ドメインを記載


これを忘れてたので、サイトマップが生成されるときに古いドメインのままで、 Google Search Console で以下のようなエラーが出てました(^◇^;)
※サイトマップは読み取り可能ですが、エラーがあります
 許可されていない URL

最後に

今回自分がムームードメイン側の住所登録を間違っていて、翌日ムームードメインから修正しないとドメインが無効化されます。
とメールがきました。
不備があった時の為にメールは気にしていた方がいいかもれません。

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。

Netlifyアカウント削除方法


始めに

特に説明がなくても簡単にできます。
以下に自分が行った方法、情報を記載しておきます。

補足

  • TOPページを表示は左上のNetlifyのアイコンをクリック
  • 展開しているサイトがある場合は、先にサイトを削除します。
    サイトを削除せずにアカウントを削除すると同じドメインが使えなくなるそうです。
    また解除にはNetifyへ問い合わせが必要なようです。

サイト削除方法

  1. 削除するサイトをクリック
  2. 「サイト設定」をクリック
  3. 一番下まで移動
  4. 「このサイトを削除する」をクリック
  5. 入力欄の下に出ているドメインを確認し、コピペ。
  6. 間違いなければ「削除する」をクリック
  7. サイト削除完了

アカウント削除方法

  1. 右上のユーザのアイコンをクリック
  2. 「ユーザ設定」をクリック
  3. 念のため「接続アカウント」も削除
    ※削除しなかった場合にどうなるかは確認できていません。なので念のため..
  4. 一番下まで移動
  5. 「ユーザを削除」をクリック
  6. テキストボックスの下のメールアドレスを確認し、コピペ。
  7. 「削除する」をクリック
  8. アカウント削除完了

最後に

情報について過不足ありましたら教えてください。
まだまだ未熟者なので、お手柔らかにお願いいたします。

チャンネル登録やフォローお待ちしております😄
最後まで見ていただきありがとうございました。

LINK:quokkaChannel/クワッカチャンネル

チャンネル登録(Subscribe)、フォロー(Follow me)お待ちしております!

  • Youtube:ゲーム実況や今後はプログラムやWEB系、動画編集の動画もあげれたらいいなーとか思っています
  • Twitter:気ままにつぶやいています。主に告知はここです。