ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

【初心者向け】Google AdSense の申請の仕方や注意すべき点など詳しく解説。

f:id:twistinhaurin:20200928221654j:plain

こんにちは、ハウリンです (*^^*)

独自ドメインを取得したなら絶対やっておきたい Google AdSense の申請。

今回はいよいよ Google AdSense に申請です。

 

私はブログを始めて5か月目位、記事は30記事台での申請で、

記事数が十分あったからか、1発合格できました!

みなさんのブログを見ているとなかなか合格しなくて苦労している様です 。

なかなか合格はキビシイのか・・・

私なりに合格するポイントなども 考えてみました。 

 

Amazon アソシエイトの申請はこちらご覧ください。 

www.haurin-zatunenlife.com 

 

 

 

Google AdSense とは 

・サイト運営者様が、自身のウェブサイトに関連性の高い Google 広告を掲載する事で、簡単に収益を得る事ができる無料サービス

・オンライン・コンテンツから収益を得る事ができるサイト運営者様向けサービス。

・広告主と直接やり取りすることはなく膨大な広告在庫にアクセスする事ができる。

・使いやすくカスタマイズ可能。

 

簡単に言うとブログに自動で広告が貼れて、それを見に来てくれた人がクリックしたりすると収益が得られるという事です(*^^*)

ただ、ブログを書いていくより、少しでも収益得られたら嬉しいですね。

 

さて、みなさんなかなか合格できず苦労しているのですが、どうすれば合格するんでしょうか? 

Google AdSense 申請に必要な事

・独自ドメインを習得しておく

・無料のブログでは取得は難しいです。

・最低20記事位書く

・プライバシーポリシーを設置する。

・お問い合わせを設置する。

・下ネタなど載せていたらダメ

・広告を貼っていたら外しておく

  

いろいろな意見がある様ですが、商品紹介系のブログが受かりやすいかもしれません。

自分の好きな物や音楽、映画、スポーツの紹介など。

今日あった出来事だけの、日記のみのブログだと難しいかと思います。

10記事位で合格したという方もいらっしゃいますが、確実に合格を狙うなら20記事は書いた方が良いかと思います。

 

Google AdSenseの申請をするにあたって、 Google アカウントを持っていない場合アカウントの作成が必要になります。

良かったらこちらをどうぞ。。。
www.haurin-zatunenlife.com

 

 

 

Google AdSense アカウントを取得する

Google AdSense のサイトへいく⇩

www.google.com

 

「ご利用開始」をクリック。 

f:id:twistinhaurin:20200622222938p:plain


 

「お申込み」画面を入力する。

f:id:twistinhaurin:20200622223024p:plain

自分のブログのURLを入れる。

※ http:// 又は https:// は省略する。 

メールを受け取るメールアドレスを入れる。

メールを受け取るか、受け取らないかどちらか選ぶ。

「保存して次へ」をクリック。

 

続けて選択、チェックを入れていく。

f:id:twistinhaurin:20200622224327p:plain

国または地域は「日本」を選択。

利用規約を読んでチェック。

「アカウントを作成」をクリック。

 

これで、アカウントの取得完了です。

しかし!この時点ではまだ、広告掲載の審査は完了してません!

次に Google アドセンスの審査申請をしていきます。

 

 

 

Google アドセンス広告審査申請をしていく 

「支払い先住所の詳細」を入力していく。 

f:id:twistinhaurin:20200622224648p:plain

 アカウントの種類は「個人」

 住所を入力。

 名前を入力。(報酬を受取る口座名義と一緒にして下さい)

 ショートメールが受取れる電話番号を入力。

 「送信」をクリック。

 

「電話番号を確認してください」画面の入力。

※Google アカウントに事前に電話番号が登録されている場合、「電話番号による確認コードの習得」および「確認コードの入力」項目はスキップされる場合があります。

f:id:twistinhaurin:20200622224754p:plain

 「電話番号の説明」に電話番号を入力。

 「確認コードを受け取る方法を選択してください」でどちらかにチェックを入れる。

 「確認コードを習得」をクリック。

 

、数字6桁の確認コードを受取ったら、「確認コードの入力」画面の「確認コード」に入力して「送信」をクリック。

f:id:twistinhaurin:20200622224904p:plain


 

「サイトを AdSense にリンク」画面の赤枠の中のコードをコピーする。

f:id:twistinhaurin:20200622225356p:plain

 

はてなブログに移ります。

 

はてなブログの「設定」➡「詳細設定」画面を開き、「head に要素を追加」に先ほどコピーしたコードを貼り付ける。

f:id:twistinhaurin:20200622225453p:plain

※この際、<head>および</head>タグの記載は不要です。

 

一番下までスクロールして「変更する」をクリック。

f:id:twistinhaurin:20200622225556p:plain

 

Google AdSense のサイトに戻って、「サイトにコードを貼り付けました」にチェックを入れ、「完了」をクリック。

f:id:twistinhaurin:20200622225653p:plain

 

「コードが見つかりました」画面になったら申請完了です。

f:id:twistinhaurin:20200622230144p:plain

 

 

 

申請完了、お疲れさまでした!

だがしかし、ここからが審査の開始です。 

私の場合、3日後に合格のメールが届きましたが、長いと1か月位かかる人もいるみたいですので気長に待ちましょう。

どんだけ待っても連絡が来ないぞ!ヽ(`Д´)ノという方は「AdSense 審査状況確認フォーム」で問い合わせも出来ます。

合格したら「おめでとう!」メールが届きます。(*‘∀‘)

f:id:twistinhaurin:20200622230258p:plain

 

 

審査に落ちてしまったら

修正できる所はないか確認しましょう。

・記事数が足りてないかもしれないので、もっと充実させる。

・運営期間が短過ぎかもしれないので、何日か後に再申請する。

・独自ドメイン設定直後に審査依頼してないか。→何日か後に再申請する。

・1記事の文字数が少なすぎないか。

・著作権を侵害してそうな書き込みはなかったか。

・ブログのURLの「https://」部分を「http://」と記載して申請してしまっていないか。

・ブログトップを JavaScript で Archive とうにリダイレクトさせてないか。→直接アクセスできるURLを記入する。

 

あとがき 

審査に落ちても何回も再申請できます。2週間ほど間隔をあけて申請しましょう。

何回申請しても落ちてしまう人もいるほどで審査基準がわかりませんが、どこかにヒントがあるハズですので諦めずに申請してください!

とにかく、読者のためになるブログを心掛ければ大丈夫かと。(たまにはどうでも内容でオッケーかと思いますが申請するまでは抑えめに)

それでは、最後まで読んで頂いてありがとうございました。

この記事が少しでも役立てば嬉しいです。

 

 

 

【Amazon アソシエイト】に合格するにはどうすればいいのか考えてみた。

f:id:twistinhaurin:20200924165809p:plain

こんにちは、ハウリンです。😊

2020年3月から審査がキビシくなった Amazon アソシエイト

ただでさえキビシイのに!(;'∀') 

しかし、無料で Amazon の商品広告が貼れるのだから、何とか審査通りたいですよね。

私は以前申請した時は1発合格で、2回目の追加申請は「プライバシーポリシー」「お問い合わせ」を記載し忘れて落ちました。( ;∀;)

でも改善したら合格でした。

なかなか合格出来ない人は何がダメなのか!?

私のしょうもないブログでも合格出来るのだから改善すれば大丈夫なハズです!  

 

 

 

Amazon アソシエイトとは

Amazonn が提供しているASPサービス。

登録すると、自分のホームページやブログ等で Amazon の商品を紹介できる様になり、閲覧者が自分のサイトを経由して買い物をすると各商品カテゴリーの紹介料率に基づき、発送済み商品に対して紹介料をもらえる。

利用は無料。  

 メリット

・無料で始められる。

・売上金額の最大10%の紹介料が得られる。

・紹介した商品だけでなく同時に購入した商品成果対象になる。

・貯まったお金は毎月現金なら5000円、ギフト券なら500円からもらえる。

・1億種以上の Amazon 商品から好きな票を選べる。

・多彩なリンク作成ツールがあるので誰でも簡単にリンク作成が出来る。

・アソシエイトツールバーを使って簡単リンク作成&SNS投稿出来る。

・Amazon 商品だからこその高いコンバージョン率。

・PC,モバイル、スマートフォンい対応。

 

 申請の方法まとめてみました。⇩

www.haurin-zatunenlife.com

 

 

申請するまでにやっておく事 

Amazon のアカウントを作っておく

これは基本かと思います。

早速作りましょう!

身元不十分はダメです。

affiliate.amazon.co.jp

 

Amazon で買い物をする

これも、アカウントと同じでAmazonで1回は購入した方がいいです。申請する時は購入履歴のあるアカウントで申請して下さい。

これも基本ですね (*^-^*)

 

 

Amazon プライムへ申し込む

いろんな人の意見を見ていると、Amazon プライムへ申し込んだ方が受かりやすいという意見が多いのですが、私は申し込んでなくても合格したので一概には言えないです。

ただ、確実を狙うなら申込んだ方がいいんですかねぇ。

「プライバシーポリシー」&「お問い合わせ」を設置する

最初に書いた様に、私はこれを設置いていなくて落ちました ( ;∀;) 

これは、固定ページですぐ作れるので速攻設置して下さい。 

www.haurin-zatunenlife.com

www.haurin-zatunenlife.com

  

ここまでは、まず最初にやっておく事です。

Amazon 側の基本の禁止事項も見ておきましょう!

・性的に露骨な内容を奨励または含むサイト。

・暴力を奨励するまたは暴力的内容を含むサイト。

・誹謗中傷を奨励するまたは誹謗中傷的な内容を含むサイト。

・人種、性別、宗教、国籍、身体障害、性的指向もしくは年齢による差別を奨励する、または差別的慣行を用いている

サイト。

・違法行為を奨励または実行するサイト。

・甲またはその関連会社の商標や、甲またはその関連会社の商標の変形またはスペル違いをドメイン名、サブドメイン名またはソーシャルネットワークサイトのユーザー名、グループ名その他のアカウント名に含むサイト。

・その他知的財産権を侵害するサイト。

・上記の他、甲が本プログラムに適切でないと判断するサイト。

自分のブログが違反してないか確認して下さい。

上記を踏まえて、、、 

記事は15記事以上書く

f:id:twistinhaurin:20200519171152j:plain
・だいたいみなさん10記事以上と言われてるのですが、たくさん書いておくに越したことないと思います。

・作成したばかりや未完成のブログはダメです。

・逆に、せっかく記事数が多いのに長い間更新がなかったりしてもダメです。

・記事が誰かからの転載や広告で構成されてる物で、記事にオリジナリティーがなくてもダメです。

・閲覧に制約がある物もダメです。

・私は30記事以上書いての申請だったので合格しやすかったと思います。

 

Amazon 商品を紹介出来る様な内容

f:id:twistinhaurin:20200623203721j:plain

・全部が全部 Amazon 商品を売るぞ!でなくても大丈夫で、いろんな物などの情報を閲覧者に対してお勧め、紹介出来る内容を含めているかだと思います。

・記事の内容はしっかりがっつり書くこと。

・だらだらと今日起きた事を書いてる内容ばっかではダメかもしれません。

・また、著作権を侵害してないか、サイト内の価格や在庫表記に閲覧者に誤解を与える様なものがないか注意です。

 

 

 

申請する時の注意点

Amazon アカウント

Amazon の商品を購入した事のあるアカウントで申請する。

 

URLを間違えない

自分のWebサイトのURLを入力する時、抜けてる所やスペルミスがないか確認する。

サイト名やドメイン名の中に「amazon」「javari」「kindle」やその変形、スペルミスを含んでいないか。

 

ブログの説明をちゃんと入力する

申請時、入力する所に「簡単にご説明ください」なんて書いてあるので、「適当でいいや~」などと本当に簡単に書いてしまいがちですが、実はかなり重要な様です!

そんなーΣ(´∀`;)ですよね・・・

面倒臭いんですが、ここはどんな商品を紹介していくとか、しっかり内容を書いた方が良いです。

 

申請後にやること

申請してから180日以内に3つ売り上げを上げる

2020年3月以降、申請後180日以内に3つ売り上げを上げなくてはいけなくなりました (;'∀')

申請してから180日以内に、申請したURL内にリンクを置いて3件の売り上げが必要。3件の売り上げが確認された事を Amazon側が確認次第審査が始まります。

とにかく、申請後はすぐにアソシエイトを初めて、頑張って Amazon の商品を 売りましょう。

 

何度申請しても落ちたら・・・

安心して下さい「もしもアフィリエイト」があります。

こちらでも Amazon の商品リンクが貼れます

また、「どこでも リンク」機能があり、Amazon、楽天、yahooのリンクを一緒に貼れてとても便利です。

 

あとがき

ここまでやって、商品も3つ売り上げても合格するとはかぎらない・・・

何故?

私が思うに、何故そんなに急いで申請するのか?です。

ブログ初めてまだ5記事位で申請しようとしている方たちは、割と落ちている様に思います。

Amazon側の「3つ売り上げ上げて下さい」は記事数を増やして、充分充実したところから審査したいですよ・・・と言っている様にも思えます。

 

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

 

 

【初心者向け】Amazon アソシエイトの申請の仕方や注意すべき点など紹介。

f:id:twistinhaurin:20200924160650p:plain

こんにちは、ハウリンです😊

今回は「Amazon アソシエイト」申請の方法を紹介します。

 

アフィリエイトを始めようと思っている人や、せっかくブログを始めたのだから少しでも収益あったら嬉しい人などいろいろな方がいると思います。

 

いろんな方の説明を見ていると「審査」がかなりキビシイ・・・(;'∀')

10記事位で合格する人もいれば、何度申請しても合格しない人もいる。

どうやらコツもあるみたいです。

私はゆっくりで5か月目、35記事位で申請しました。(遅!!)  

 

 

 

Amazon アソシエイトとは

・Amazonn が提供しているASPサービス。

・登録すると、自分のホームページやブログ等で Amazon の商品を紹介できる様になり、閲覧者が自分のサイトを経由して買い物をすると各商品カテゴリーの紹介料率に基づき、発送済み商品に対して紹介料をもらえる。利用は無料。 

 メリット

・無料で始められる。

・売上金額の最大10%の紹介料が得られる。

・紹介した商品だけでなく同時に購入した商品成果対象になる。

・貯まったお金は毎月現金なら5000円、ギフト券なら500円からもらえる。

・1億種類以上の Amazon 商品から好きな物を選べる。

・多彩なリンク作成ツールがあるので誰でも簡単にリンク作成が出来る。

・アソシエイトツールバーを使って簡単リンク作成&SNS投稿出来る。

・Amazon 商品だからこその高いコンバージョン率。

・PC,モバイル、スマートフォンい対応。

 

Amazon アソシエイトに登録する

Amazon アソシエイトのサイトへいく。

affiliate.amazon.co.jp

 

 

 

Amazonアカウントを持っている人は「サインイン」。初めてのひとは「無料アカウントを作成する」をクリック。

f:id:twistinhaurin:20200622133632p:plain

初めてアカウント登録される方は基本情報を入力する画面になるので入力して下さい。

 

 

「アカウント情報」画面になるので①~③を選択しての「次へ」をクリック。

f:id:twistinhaurin:20200622133704p:plain

f:id:twistinhaurin:20200622133732p:plain

 

 

「ウェブサイトとモバイルアプリ情報」画面になるので、Amazon アソシエイトを利用したいWebサイト、モバイルアプリのURLをそれぞれの所に入力して「追加」します。出来たら「次へ」をクリック。

f:id:twistinhaurin:20200622133800p:plain

 

 

「ウェブサイトとアプリの情報入力」と「トライックと収益化」を入力・選択していく。

f:id:twistinhaurin:20200622221300p:plain

f:id:twistinhaurin:20200622133913p:plain

f:id:twistinhaurin:20200622134556p:plain

f:id:twistinhaurin:20200622221352p:plain

「希望する登録IDを半角英数字で入力してください」(好きなIDを入れてください)

「webサイト / モバイルアプリの内容、および紹介したい商品について、簡単にご説明ください」(ここを適当に書き過ぎて、審査に落ちたという人もいるのでちゃんと書きましょう)

「あなたのウェブサイトまたはモバイルアプリの内容に最も近いと思うものを、次から選んでください」から「当プログラムをどこでお知りになりましたか?」まで大まかで大丈夫です。

上の図の灰色で隠してある所にキャプチャー文字が出ているので、赤枠に入力する。

「契約条件」にチェックを入れる。

「完了」をクリック。

 

「アカウント認証」画面を入力する。

f:id:twistinhaurin:20200622214159p:plain

・ 自分の電話番号を入力し「今すぐ電話する」をクリックすると「PINコード」が表示されます。

・ Amazon から自動音声の電話が掛ってきます。

・音声案内に従って、「PINコード」を入力して少し経つとアカウントが認証されます。

 

「〇〇〇〇さん、おめでとうございます」となり、とりあえず登録申請完了です。 

お疲れ様です!!

「支払い情報」の登録は後からでも大丈夫です。

 

 

 

ところで、審査基準がキビシクなったみたいです(;'∀') 

申請が完了すると、2020年3月以降登録された方はメールアドレスに Amazon から⇩この様なメールが届く様になりました。

f:id:twistinhaurin:20200622214353p:plain

Amazon アソシエイトの審査は最初に書いた通りかなりキビシく、みなさんかなり苦労されてます。

ただでさえキビシいのに2020年3月から審査手順が変更になった様です。

 

Amazon アソシエイト審査変更内容

申請してから180日以内に、申請したURL内にリンクを置いて3件の売り上げが必要。3件の売り上げが確認された事を Amazon側が確認次第審査が始まります。

ハードル高くなった様です (;´・ω・) 

とにかく、申請したらすぐアソシエイト初めて下さい。

Amazon 商品を優先的に紹介して売り上げ実績を作った方が良いかと思います。 

しかし、3件の売り上げ実績を作ったからと言って、審査に受かるとは限りません。

 

審査に落ちてしまったら

基本の禁止事項に触れていないかもう1度確認が必要です。

・性的に露骨な内容を奨励または含むサイト。

・暴力を奨励するまたは暴力的内容を含むサイト。

・誹謗中傷を奨励するまたは誹謗中傷的な内容を含むサイト。

・人種、性別、宗教、国籍、身体障害、性的指向もしくは年齢による差別を奨励する、または差別的慣行を用いている

サイト。

・違法行為を奨励または実行するサイト。

・甲またはその関連会社の商標や、甲またはその関連会社の商標の変形またはスペル違いをドメイン名、サブドメイン名またはソーシャルネットワークサイトのユーザー名、グループ名その他のアカウント名に含むサイト。

・その他知的財産権を侵害するサイト。

・上記の他、甲が本プログラムに適切でないと判断するサイト。

 

私的に合格するポイントを考えてみました⇩ 

www.haurin-zatunenlife.com

 

どうにも合格しないという方!「もしもアフィリエイト」に登録してAmazon のリンクを貼る方法もありますので安心して下さい。

こちらだと、Amazon、楽天、yahooのリンクを一緒に貼れて便利です。

 

あとがき 

私は以前違うブログで登録していたので追加申請したのですが、凡ミスでこの有り様です(ノД`)・゜・。

f:id:twistinhaurin:20200622214301p:plain

 

つまり、審査に落ちたワケです!(ノД`)シクシク

以前申請した時はすぐ通ったのに。

いろいろ調べて「お問い合わせ」「プライバシーポリシー」を設置して、再申請したところ今度は合格しました。(^O^)/

私みたいな失敗をする方はいないと思いますが、もしかして!という事もあるので「お問い合わせ」「プライバシーポリシー」設置もお忘れなく。 

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

Google AdSense 申請の仕方はこちら⇩ 

www.haurin-zatunenlife.com

 

はてなブログのカスタム【タイトル付きボックスデザイン(囲み枠)を表示させる!】

f:id:twistinhaurin:20200919191916p:plain

こんにちは、ハウリンです (*^^*)

カスタムシリーズです。

今回はタイトル付のボックス表示が出来る様にします。

 

 

 

コードをCSSとHTML画面に入れていきます。

 

ボックスデザイン1 

POINT

こんな感じに表示されます。

ここがPOINTだと思う事を入れる事が出来ます。

CSSにコードを貼り付ける 

下のコードをコピーします。 

/* POINTのBOXデザイン */
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #FFC107;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FFC107;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

 

 

「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」と開き、にコードを貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

f:id:twistinhaurin:20200602154654p:plain

CSSにコードを入れただけでは何も変わらないんですよ(´・ω・`)

次のコードを入れていきます!

 

HTML編集画面にコードを入れる

下のコードをコピー。

<div class="box28"><span class="box-title">POINT</span>
<p>こちらに文章をいれます</p>
</div>

 

 

HTML編集画面でボックスを表示させたい所にカーソルを合わせて貼り付けます。 

f:id:twistinhaurin:20200904135420p:plain

  

★「POINT」とタイトルなってますが変更できます。

★定型文はブログごとに15件(はてなブログProは100件)まで登録可能なので使うと便利です。

★定型文の上限は10,000字まで、タイトルは100字までです。 

 

ボックスデザイン2

f:id:twistinhaurin:20200924211009p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

 

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box27">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

「ここにタイトル」にPOINTなど好きなタイトルを入れます。

  

思った通りに表示されたでしょうか?

続けていきます!

 

ボックスデザイン3

f:id:twistinhaurin:20200924211024p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

  

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

 

 

ボックスデザイン4 

f:id:twistinhaurin:20200924211036p:plain

CSSにコードを貼り付ける 

下のコードをコピーして、  「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。(デザイン1と同じやり方です)

.box29 {
    margin: 2em 0;
    background: #eee8aa;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #9acd32;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

 

HTML編集画面にコードを入れる

下のコードをコピーして、HTML編集画面でボックスを表示させたい所に貼り付けます。

<div class="box29">
    <div class="box-title">ここにタイトル</div>
    <p>ここに文章</p>
</div>

中央寄せと合わせてみました。

www.haurin-zatunenlife.com

 

 

以上のデザイン、サルワカさんのサイトを参考にさせて頂きました。

他にたくさんのボックスデザイン紹介されてます。凄いですねー

saruwakakun.com

 

 

あとがき

今まで、蛍光ペン風アンダーライン吹き出しで会話形式表示文字装飾などの分かりやすくメリハリが付く様なカスタムを紹介しましたが、

このボックスデザインもかなり使えて便利です。 

色も変えると面白いかと思います (^O^)/

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

 

 

\読者登録してもらえると嬉しいです/

アクセスアップ用ブログパーツ【BlogPicker】は無料で設置出来てPV数アップに繋がる!

f:id:twistinhaurin:20200922153620p:plain

こんにちは、ハウリンです (*^^*)

アクセスアップ用ブログパーツ「BlogPicker」を運営している方からお試し依頼のお問い合わせを頂きました。

訪問者へのリーチ・アクセス数をより増やしたい方

BlogPickerは人口知能を搭載した無料・簡単相互ブログ記事推薦ツールです。

 

 

 

BlogPickerとは 

「BlogPicker」を使っている者同士を紹介し合えるという事です。

お問い合わせ内容によると、

★異なるブログ間で自動で記事を推薦し合うサービス。

★利用が簡単(サイドバー等へのHTMLの設置のみ、利用終了も削除のみ)

★人口知能によりユーザーの興味を予想・新たなユーザーの流入経路(他のブログ経由)を作成可能。

f:id:twistinhaurin:20200922155047p:plain

 

このような事にド素人な私は最初???だったのですが、

設置するだけで勝手に設置している者同士紹介し合える・・・

めちゃくちゃありがたい!!と思い設置してみる事に。

サイドバーにはこの様に⇩表示されます。

f:id:twistinhaurin:20200922154510p:plain

設置する前にまだまだこれからのサイトみたいなので、気になる方は自身でちゃんとサイトを見たり、他の方のレビューなどをご覧ください。

おすすめ記事 | BlogPicker 相互ブログ記事推薦ツール

 

 

 BlogPcker設置の仕方

設置の仕方はめちゃくちゃ簡単です。

HTMLコードをコピーして貼り付けるだけΣ(・ω・ノ)ノ!

blogpicker.net

何回も言いますが(^_^;)⇧こちらのサイトのコードをコピーして貼り付けるだけ。

f:id:twistinhaurin:20200922155357p:plain

 

サイドバーに設置する

「デザイン」➡「カスタマイズ(スパナマーク)」➡「サイドバー」➡「+モジュールを追加」と開きます。

f:id:twistinhaurin:20200710142633p:plain

 

 

先ほどコピーしたコードを貼り付けます。

f:id:twistinhaurin:20200922160636p:plain

「 </>HTML 」をクリック

「タイトル」を入力。(BlogPickerとかBLOGPICKERとか)

先ほどコピーしたコードを貼り付ける

「適用」をクリック。

 

「変更を保存する」をクリック。

f:id:twistinhaurin:20200522165623p:plain

 

これだけです(^_^;)

 

削除も簡単

サイドバーなどから削除するだけでBlogpicker側からも削除されるので、こんなに簡単な事でアクセス数アップに繋がるなら嬉しいですね。

 

 

あとがき

設置は簡単だし、削除も簡単なので設置してみる価値はあるかと思います。

どれ位ユーザーが増えるのかは様子見という事で、

楽しみですね(^O^)/

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

 

 

\読者登録してもらえると嬉しいです/

【お問い合わせGoogleフォーム】の返信ってどうやるのか調べてみた!

f:id:twistinhaurin:20200921214745p:plain

こんにちは、ハウリンです (*^^*)

数か月前からお問い合わせを頂く様になってきたのですが、スル―していました。

何故って最初のお問い合わせが怪しい内容だったから💦ごめんなさい!

でも、少し前から急に多くのお問い合わせを頂く様になってきて、

内容をよく読んでいたら興味を引く内容であったり、他の方も依頼を受けてレビューされてたりしてるので、返信してみよう!と思う様になりました。

しかし!!

よく考えてみたら「お問い合わせGoogleフォーム」の作成の仕方は載せていても、返信ってどうやるのか載せてませんでした!すいません・・・

という事で「お問い合わせ」を貰った時どうやって返信するか早速調べてみました!!

 

 

 

 「お問い合わせ」作成の方法はこちらをどうぞ。。。

www.haurin-zatunenlife.com

 

返信するお問い合わせを選ぶ 

お問い合わせが来たとします。

そのメールを開くと⇩こんなのが表示されます。

赤枠のどれをクリックしても内容が見れますが、「回答1」をクリックするのが良いかと思います。(「回答1」だとすぐ開いたメールのお問い合わせを見れます)

f:id:twistinhaurin:20200921225657p:plain

 

 

Googleフォームで 

「回答」を開くと「概要」「質問」「個別」と表示されます。

f:id:twistinhaurin:20200921162016p:plain

「概要」は全部の問い合わせがババーッと表示されてしまうので、めちゃくちゃ見にくい! (;´Д`)

という事で「質問」か「個別」で選んでいきます💨

 

「質問」から選ぶ

「質問」をクリックすると出てくる、の▼でどの問い合わせか選ぶか、の<>で選びます。

f:id:twistinhaurin:20200921155318p:plain

 


「個別」から選ぶ

「個別」をクリックして、<>で選びます。

f:id:twistinhaurin:20200921160132p:plain

 

POINT

まだ件数が少ない頃は「個別」で、

多くなってきたら、探すの大変そうなので、「質問」の①▼で選んだ方が分かりやすいかもしれません。

 

Googleフォームで返信する

返信するお問い合わせを選んだら、右上にある「送信」をクリック。

f:id:twistinhaurin:20200921152655p:plain

 

 

「フォームを送信」を入力していきます。

f:id:twistinhaurin:20200921164140p:plain

✉はメールのマーク・・・言われなくても分かるわ!ですね(;^ω^)

送信先➡相手のメールアドレスを入力(自分のじゃないですよ!)

件名➡相手に分かりやすい件名を入れます

メッセージ➡内容を入力

 全部入力したら「送信」をクリック

 ※「フォームをメールに含める」にチェックを入れると、メールにフォームが表示されるので、回答者はメールから直接回答出来ます。

 

上記の方法でメールを返信しようとすると、画面のど真ん中に「フォームを送信」が表示されるのでお問い合わせ内容を確認しながらの作業がキビシイです💧

 

 

 

履歴が残らない件

上記の方法で返信したら送信履歴が残ってない!

えーっと思っていたら相手からの返信があり、そこには私が送った内容も載っていました。

どうやら相手からの返信があれば送信履歴は見れるみたいです。

 

 

Gmailで、最初から送信履歴を残したい場合は

送信履歴を残す

別ウィンドウでお問い合わせ内容を見れる様にしておいて、Gmailを開きます。(その方がお問い合わせ内容を確認しながら返信出来ます)

「作成」をクリック

f:id:twistinhaurin:20200921185539p:plain

 

 

そうすると「新規メッセージ」を入力できる様になるので、入れていきます。

f:id:twistinhaurin:20200921190349p:plain

 宛先➡相手のアドレスを入力

 件名➡相手に分かりやすい件名が良いです

内容を入力

「送信」をクリック

これで送ったメールがちゃんと送信履歴に表示されます。 

正直私はこちらの返信方法の方がお問い合わせ内容を確認しながら返信出来るし、送信履歴も残るしでやりやすかったです(;^ω^)

こちらの方法はGmailを使っての返信の方法です。

他に使っているメールアドレスを使いたい場合は、そちらのメーラーから返信して下さい。

 

 

注意点

Gmailで本名を使ってる場合はご注意を✊

他のアドレスもですが、相手に知られたくない情報が入ってる場合も気を付けて下さい。

私は最初返信してからその事に気づき焦りました (^_^;) 💦

結果大丈夫だったのですが、皆さま気を付けて下さい。

本名でもかまわん!という方は大丈夫ですが。

 

 

あとがき

多くのサイトがある中私のブログを見つけてもらい、お問い合わせしてもらえるなんて本当にありがたいです。

初めのころ怪しんで数件返信を返さず失礼な事をしてしまいました。

お互いWinWinの関係になれそうだったり、面白そうな提案だったりします。

出会いですね🌼

ド素人の私でも協力出来る事はしたい!と思う今日この頃です。

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

 

 

\読者登録してもらえると嬉しいです/

【初心者向け】Google アナリティクス と Google Search Console をリンク(関連付)させる。

f:id:twistinhaurin:20200917115254p:plain

どーも、ハウリンです (*^^*)

Google アナリティクス Google サーチコンソールを設定して、アナリティクスのサイトを見てると、通知に(右上の鈴のマーク)「アナリティクスとSearch Consoleを関連付けて下さい」と出ていたりします。

これは、

アナリティクスと Search Console を関連付ける事で分析がしやすくなるのでやった方がいいよという事。

分析しやすくなるなら関連付けないと! 

やる事がいっぱいですが、

これは絶対やっておきましょう!

 

 

 

Google Search Consoleとは 

Google 検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ無料サービス

Google 検索結果でのサイトの注目度を高める事ができる。

また、ブログにユーザーがどんなキーワードで、どのページに来てくれているかなどが分かる。

 

Google Search Console に登録していない人は登録が必要です。

良かったらこちら参考にして下さい。⇩ 

www.haurin-zatunenlife.com

 

アナリティクスとSearch Consoleをリンクさせるメリット 

★Google Search Console は単体だけで活用するより、アナリティクスと連携させるほうがより目標達成できる様になります。

★アナリティクスのサイトでSearch Console のレポートを見れる様になるので便利です。

 

 

 

アナリティクスとSearch Consoleをリンクさせる 

アナリティクスのサイトから、2つの手順があります。

手順1、「管理」➡「すべての商品」➡「Search Console とリンク」から

手順2、「管理」➡「プロパティ設定」➡「Search Console を調整」から

 

手順1

アナリティクスのサイトの「管理」➡「すべての商品」をクリック。

f:id:twistinhaurin:20200414153310p:plain

 

「Search Console とリンク」をクリック。

f:id:twistinhaurin:20200414153325p:plain

 

 

手順2

アナリティクスのサイトの「管理」➡「プロパティ設定」をクリック。

f:id:twistinhaurin:20200413142809p:plain

 

「プロパティ設定」画面を下の方にスクロールしていくと、「Search Console を調整」とあるのでクリック。

f:id:twistinhaurin:20200414162755p:plain

ここまでが2通りのやりかたです。

 

 

ここからは同じ設定の仕方です

「追加」をクリック

f:id:twistinhaurin:20200414153339p:plain

そうすると、「Google アナリティクスで Seacrch Console のデータを使用する」画面に移動します。

  

、Search Console のサイトで連携したいドメインにチェックを入れ、「保存」をクリック

f:id:twistinhaurin:20200514140044p:plain
  

「OK」をクリック。

f:id:twistinhaurin:20200414155037p:plain

 

アナリティクスのサイトに戻って「完了」をクリック。

f:id:twistinhaurin:20200414155413p:plain

 

「プロパティ設定」画面を1番下にスクロールして「保存」をクリック。

 

これで関連付けは完了です。

お疲れさまでした(^O^)/

 

 

 

アナリティクスのサイトで「集客」「Search Console」をクリックすると、「ランディングページ」とか「国」とか見れる様になりました(*‘∀‘)

f:id:twistinhaurin:20200414163700p:plain

 

リンク出来てなかった時

ここで⇩この様な画面になった場合、なんらかの原因でリンク出来なかったかと思います。

その場合「Search Console のデータ共有を設定」クリック

f:id:twistinhaurin:20200513154646p:plain

 

手順2「Search Console を調整」の画面にまたなるので、もう1度設定し直して下さい。 

 

アナリティクスとSearch Console を関連付けすると、ブログをやっていく上でいろいろな発見があります。 

この便利な機能を是非使いこなしていって下さい(*^^*)

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。

 

www.haurin-zatunenlife.com

 

www.haurin-zatunenlife.com

 

 

 

\読者登録してもらえると嬉しいです/

Google アナリティクスに【IPアドレスでフィルターしてリファラースパム対策!】

f:id:twistinhaurin:20200917213920p:plain

こんにちは、ハウリンです (*^^*) 

アナリティクスの設定をして、数日アクセス解析を見てたりすると、

自分のアクセスがカウントされてんじゃない??と思えてきました。(;´・ω・)

これは調べてみる必要がありそうです。

調べてみると、やはり自分のアクセスがカウントされない様にする方法があったので早速設定してみる事に!

 

 

 

アナリティクスにフィルタを設定とは

これは、自分のアクセス数をカウントに入れない様にする為です。

正しい解析が出来るようになります。

 

アナリティクスにフィルタを設定する

「IPアドレス」を入力してカウントされない様にします。

⇩こちらのサイトで確認できます。

www.cman.jp 

IPアドレスとは 

インターネット上の住所(識別番号)の様なもの。

インターネット上には、パソコンやスマートフォなど様々なネットワーク機器が接続されています。この様なネットワーク機器それぞれに付けられている識別番号の様なもの。

・IPアドレスは再接続などにより変更される場合があるので、その時は再設定が必要になるみたいです。

  

矢印の所に「IPアドレス」が表示されているのでコピーする。

f:id:twistinhaurin:20200412170407p:plain

 

アナリティクスのサイトの「管理」をクリック。

f:id:twistinhaurin:20200412171936p:plain

  

管理画面の中の「フィルタ」をクリック。

f:id:twistinhaurin:20200412172353p:plain

 

「フィルタを追加」をクリック。

f:id:twistinhaurin:20200412172736p:plain

  

「ビューにフィルタを追加」を入力、選択します。

f:id:twistinhaurin:20200412180450p:plain

何でも大丈夫です。自分が分かりやすいのが良いかと。

定義済み」にして「除外」を選択。「IPアドレスからのトラフィック」を選択。「等しい」を選択。

先ほどコピーした「IPアドレス」を貼り付ける。

保存」をクリック。

  

⇩の様に「フィルタの種類」の所に「除外」と表示されたら完了です。

f:id:twistinhaurin:20200412181744p:plain

 

お疲れさまです!(^O^)/

次は「リファラースパム」を防止する設定です。 

 

 

 

スパムを防止対策する

アクセス解析を正常に行うにはリファラースパム対策というのも必要です。

リファラーとは 

リファラーとはリンク元(ページAからリンクをクリックしてページBに移る時のリンク元Aのこと)

分かりにくい・・・

WEBページにアクセスした際にアクセス元が「リファラー」という情報としてアクセス先のWEBページに伝達されるのでGoogle アナリティクスを見ればどのWEBサイトからアクセスしてくれる人が多いか分かるという事。(;・∀・)

・・・簡単に言うと、どこから来てくれたのかな?とアクセス元を確認しようとする人を、スパムサイトに誘導する為スパムサイトからアクセスしてくることだと思います。

アクセス元は 

アクセス元はGoogle アナリティクスサイトの「集客」➡「参照サイト」を開くと「参照元」が表で出てきます。

表に出てくるアクセス元が気になるところですが、思わずサイトにアクセスしてしまうと悪質なショッピングサイトなどに誘導されてしまいます。(;'∀')

更にはウイルスを感染させられたりするみたいです。

これは困る!のでリファラースパムをアクセス解析結果に反映させない様にします。

 

リファラースパムを防止していく

2つのやり方があります

・言語(not set)で除外する方法

・指定のURLから除外する方法

 

言語(not set)でアクセスを除外する方法

f:id:twistinhaurin:20200413164108p:plain

f:id:twistinhaurin:20200412173800p:plain

フィルタ名」 は除外フィルタとか好きな名前を入れて下さい。

カスタム」にして「除外」を選択。

フィルタコールド」は「言語設定」を選択。(参照を選ばれる人もいます)

フィルタパターン」に「not set」と入力。(言語設定がなされてないユーザー(not set))

保存」をクリック。

 

指定のURLからのアクセスを除外する方法

 

f:id:twistinhaurin:20200413163034p:plain

f:id:twistinhaurin:20200413163044p:plain

フィルタ名」 は除外フィルタとか好きな名前を入れて下さい。

カスタム」にして「除外」を選択。

フィルタフィールド」は「参照」を選択。

フィルタパターン」にはリファラースパムサイトのホスト名を入力。

保存」をクリック。

  

それにしてもいろんなやり方があって、ホント解らない事だらけ (;´д`)

アナリティクスで参照のデータを見ると謎のURLがたくさん・・・なんて事があったりするみたいです。

リファラースパムをそのままにしておくと、自分が迷惑サイトに飛ばされたりなんて事もあるとか!(;´・ω・)

正確なアクセス解析の為にやれる事はやっておきたいですね。

それでは、最後まで読んで頂いてありがとうございました。m(__)m

このブログが少しでも役立てば嬉しいです。

www.haurin-zatunenlife.com

 

 

 

\読者登録してもらえると嬉しいです/

はてなブログ【蛍光ペン風のアンダーラインを引く】カスタマイズを紹介!

こんにちは、ハウリンです (*^^*)

カスタムシリーズです。

他の方のブログなどを見ていて、文章や強調したい単語にアンダーラインを引けたら・・・、

私も引いてみたい!と 思った事はないでしょうか。

今回は、蛍光ペン風のアンダーラインを引く方法を紹介したいと思います(*^^*) 

f:id:twistinhaurin:20200912141139p:plain

 

 

 

やり方は凄く簡単です(^O^)/

 

CSSにコードを貼り付ける

こちらのコードをコピーします。


/* 文字に蛍光ライン */
article u{ text-decoration: none; background: linear-gradient(transparent 50%, #ffff00 50%); }

 

「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」にコードを貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

f:id:twistinhaurin:20200602154654p:plain 

とりあえずこれで準備完了。

最後に「変更を保存する」を忘れずクリック。

f:id:twistinhaurin:20200522165623p:plain


CSSにコードを入れただけではアンダーラインは表示されません。

HTML編集画面にコードを入力します

 

HTML画面にコードを入れアンダーラインを表示させる 

みたままモードで「HTML編集」画面を開く。

f:id:twistinhaurin:20200904135420p:plain

 

アンダーラインを引きたい文字、文章を<u>と</u>で囲む。

f:id:twistinhaurin:20200912144803p:plain

 

みたまま画面に戻してみると、普通のアンダーラインで表示されていますが、

f:id:twistinhaurin:20200912145821p:plain

 

プレビュー画面で見てみると

f:id:twistinhaurin:20200912151805p:plain

ちゃんと黄色のアンダーラインが表示されますよ(太字と組み合わせてます)

 

 

色と太さを変更する

CSSに貼ったコードの下の部分を変更します。

(transparent 50%, #ffff00 50%)

 

「transparent 50%」の方の数値を変えると太さが変わります。

数値が大きいほど細くなります。

90%だと 

f:id:twistinhaurin:20200913190503p:plain

30%だと

f:id:twistinhaurin:20200913185707p:plain

10%だと

f:id:twistinhaurin:20200913190015p:plain


 

「#ffff00 50%」は色と色の濃さです。

色の濃さは数値が大きいほど薄くなります。

 

 ピンク色(#ff00ff)で濃さ10%だと

f:id:twistinhaurin:20200914141543p:plain

ピンク色で濃さ90%だと

f:id:twistinhaurin:20200914141126j:plain

 

 

色のバリエーション

赤色(#ff0000)

f:id:twistinhaurin:20200914142202p:plain

青色(#0000ff)

f:id:twistinhaurin:20200914142220p:plain

紫色(#ee82ee)

f:id:twistinhaurin:20200914143030p:plain

緑色(#008000)

f:id:twistinhaurin:20200914143045p:plain

オレンジ(#ffa500) 

f:id:twistinhaurin:20200914144248p:plain

ライム(#00ff00)

f:id:twistinhaurin:20200914144305p:plain

アクア(#00ffff)

f:id:twistinhaurin:20200914144326p:plain

⇩こちら他にもいろんな色が載っています。

www.colordic.org

  

 こちらのサイトを参考にさせて頂きました。

randamlife.hatenablog.com

 

あとがき

改めてこの記事を作成してみて、蛍光アンダーラインの色や太さ、濃さで印象がかなり違う事が分かりました。

好きな色で個性を出して下さい(*^^*)

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

 

 

\読者登録してもらえると嬉しいです/

【初心者向け】はてなブログ【Google Search Console にサイトマップを追加送信する!】方法を紹介

こんにちは、ハウリンです (*^^*)

今回は Google サーチコンソールサイトマップを追加送信したいと思います。

Google にサイトの情報を伝えて、自分のブログを見つけやすくしてくれるので重要です!

f:id:twistinhaurin:20200906225606j:plain

Google Search Console の設定がまだの方こちらをどうぞ。
www.haurin-zatunenlife.com 

 

 

 

サイトマップとは

・サイト全体を地図の様に一覧にしているページの事。

・サイト内のどのファイルが重要かを Google に伝えるだけでなく、重要なファイルについての貴重な情報を提供してくれる。(ページの最終更新日、ページの変更回数、すべての代替言語ページなど)

・サイトマップを使用したからといって、必ずしもサイトマップのすべての項目がスクロールされてインデックスに登録されると保証されるわけではないです。それでもほとんどの場合、サイトマップを提供する事で有益な結果が得られデメリットになる事はありません。

つまりユーザーが目的のサイトを見つけやすくなるって事。

 次の場合、検索エンジンにサイトの内容が理解されてない場合があるので、サイトマップを作成するのをおすすします。

・サイトのサイズが非常に大きい。

・サイトにどこからもリンクされていない、または適切にリンクされていない。

・サイトが新しく、外部からのリンクが少ない。

・サイトに動画や画像などのリッチメディアコンテンツが多数含まれている。または、サイトが Google ニュースに表示されている。

 

また、上記の「必ずしもサイトマップのすべての項目がスクロールされてインデックスに登録されると保証されるわけではないです。」にはかなりの方が悩む結果になる様です (^_^;)

 

詳しくはSearch Console ヘルプこちらをご覧ください。

support.google.com

 

 

 

 サイトマップを設定する

 

Google Search Console にログインする。

Google Search Console

 

「サイトマップ」をクリック。

f:id:twistinhaurin:20200710140414p:plain

  

「サイトマップのURLを入力」に

  「 sitemap_index.xml 」

   sitemap.xml 」

  「 sitemap_periodical.xml?year=2020&month=1 
の3つを、1つずつ入力して「送信」する。

f:id:twistinhaurin:20200910143254p:plain

  

はてなブログとしては、「 sitemap_index.xml が正規のもののようです。

sitemap.xml は過去に提供していたもの。先輩方の記事を見てみると、1つだけ登録するより3つ登録した方が Search Console でサイトマップを認識してくれるみたいです。何故だかはわからないです(^_^;)

 

POINT

sitemap_periodical.xml?year=2020&month=1 は月ごとの設定なので、

2020年2月の記事があれば、 

sitemap_periodical.xmlyear=2020&month=2

2020年3月の記事なら

sitemap_periodical.xmlyear=2020&month=3

と送信します。

ちょっと面倒くさいですね (;'∀') 

 

 

「サイトマップを送信しました」と出るので「OK」をクリック。

f:id:twistinhaurin:20200710140512p:plain

 

「ステータス」の下に「成功しました」と表示されれば大丈夫です。

f:id:twistinhaurin:20200710140538p:plain

「ステータス」が表示されるまでには数時間かかりますので、ゆっくり待ちましょう。

 

 

 

サイトマップが登録されない 

いろいろ調べてみると、Wordpress に移転している人は記事をちゃんと見つけてくれているみたいなので、はてなブログと Search Console の愛称がイマイチなのかもしれないです。😡

 

URL検査して、インデックス登録をリクエストしてみるのもお勧めです。

なお、サイトマップが登録出来なくても記事がインデックスされるので問題はないみたいですが、インデックスされるまでに時間がかかる様です。

 

はてなブログにおけるサイトマップ

はてなブログでは基本的に自分でサイトマップを作る必要はありません。

自動で作られる様です。

と言われても何がなんだか。。。

目に見えて存在している物ではないので、サイトマップはなんだか得体のしれないよくわからない物ですね(^_^;)
  

あとがき 

いきなり設定が変更されたりして、私もまだサイトマップを理解出来てないです (;'∀')

1度 Search Console 画面が表示されない時があり、サイトマップに登録されていたURL数が減ってしまったりしたんです!

この様な事がみなさんを悩ませる原因になるのかもしれませんね。

これに関してはどうやら 

はてなブログのサイトマップが変更されたのが原因な様です。

今までは/sitemap.xml?page=1だったのが

sitemap_periodical.xml?year=2020&month=1の様に。   

www.haurin-zatunenlife.com

様子を見たところ、どうやらsitemap_periodical.xml?year=2020&month=1と登録すれば良さそうです。

年と、月は変えて登録していって下さいね (*^^*)

 

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

www.haurin-zatunenlife.com 

 

 

 

\読者登録してもらえると嬉しいです/ 

初心者向け!はてなブログに【Google サーチコンソール】を導入する方法を詳しく紹介(プロパティの追加)

f:id:twistinhaurin:20200908223741p:plain

どーも、ハウリンです (*^^*)

Google Analytics の登録フィルタ設定リファラースパム防止とアフィリエイトをやろうと思うとやる事はいろいろあります。

www.haurin-zatunenlife.c 

しかし、まだ重要な作業があります!!

Google Search Console の登録です!!

 

Google サーチコンソールとは???

絶対導入した方が良い重要ツールなんです!

登録しないと自分のサイトが Google に検索されないから必須です。  

 

 

 

今回は Google Search Console を登録して、はてなブログに設置したいと思います。

Google アカウントを作ってないと登録できません。

登録の仕方はこちらをどうぞ⇩ 

www.haurin-zatunenlife.com

  

Google Search Console とは

Google アナリティクスと並んで、絶対導入した方が良い重要ツールで無料のサービス

Googleの検索結果でのサイトの掲載順位を監視、管理、改善するのに役立つ

 

 

Google Search Console を設定する 

サーチコンソールのサイトを開く。

search.google.com

 

「今すぐ開始」をクリック。 

f:id:twistinhaurin:20200422161250p:plain

 

「新しい Google Search Console  Google Search Console へようこそ」の画面になるので、「開始」をクリック。

  

既にサーチコンソールを使っている場合

サーチコンソール画面の左上にある▼をクリックします。

f:id:twistinhaurin:20200427144458p:plain

出てきた「+ プロパティを追加」をクリックです。

f:id:twistinhaurin:20200427145201p:plain

 

 プロパティタイプを選択をする

「ドメイン」「URL プレフィックス」の違いは、、、

ブログのドメインが aiueo.com なら

ドメイン

http//aiueo.com

https//aiueo.com

http//www.aiueo.com

https//www.aiueo.com

などをまとめて管理してくれるので、それぞれ登録しなくてすむので便利です。

 

URL プレフィックス

「従来型」で、http//aiueo.com と https//www.aiueo.com をそれぞれ個別に登録します。

はてなブログでは一般的に「URL プレフィックス」で登録していきます。

  

「プロパティタイプの選択」で「URL プレフィックス」を選ぶ。

f:id:twistinhaurin:20200422163803p:plain 

赤枠の中に、はてなブログの「設定」「基本設定」の画面の「ブログURL」コピーして貼り付けます。
「続行」クリック

  

「所有権の確認」画面の「その他の確認方法」の「HTMLタグ」をクリック。

f:id:twistinhaurin:20200422165912p:plain

 

 6「メタタグ」をコピーする。

f:id:twistinhaurin:20200422170708p:plain

content="〇〇〇〇〇〇〇〇〇〇〇”/>と表示されてる所の " ” の間の文字だけコピーします。

/>までコピーしがちなので気をつけて下さい。

  

はてなブログのダッシュボードの「設定」➡「詳細設定」を開く。

f:id:twistinhaurin:20200422171557p:plain

 

「Google Search Console (旧 Google ウェブマスターツール)」に先ほどコピーしたメタタグを貼り付ける。

f:id:twistinhaurin:20200422172001p:plain

  

「詳細設定」画面を下までスクロールして「変更する」をクリック。

f:id:twistinhaurin:20200422172623p:plain

  

10サーチコンソールの画面に戻って「確認」をクリックする。

f:id:twistinhaurin:20200422173058p:plain

  

11「所有権を自動確認しました」画面が出てくるので、「完了」をクリック。

f:id:twistinhaurin:20200422173726p:plain

 

これで設定完了です。 

お疲れさまでした! 

 

 

 

所有権の確認をしてみる

サーチコンソール画面の「設定」➡「所有権の確認」をクリック。

f:id:twistinhaurin:20200422180624p:plain


「あなたは確認済みの所有者です」となっていれば大丈夫です。

f:id:twistinhaurin:20200422180638p:plain

 

 

これからドメインを増やしていく様であれば、その時はプロパティ選択を「ドメイン」の方でも追加登録していくと一括で見れたりするので便利ですね。(*^-^*)

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。
www.haurin-zatunenlife.com

 

www.haurin-zatunenlife.com 

 

 

 

\読者登録してもらえると嬉しいです/

はてなブログ 記事内に【吹き出しで会話形式】に出来る様に設定!

こんにちは、ハウリンです (*^^*)

ブログを作成していて、この部分かなり目立つ様に出来ないかな、

他の人のブログを見て、吹き出しで会話出来るのいいな!

という方に「吹き出しで会話形式にする」カスタムを紹介したいと思います。

こんな感じにしていきたいと思います。 

f:id:twistinhaurin:20200907231352p:plain 

どうやって設定していくのか???

CSSとHTML画面にコードを入れて行きます!

 

 

 

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 {
  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);}

 

 

コピーしたコードを「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」に貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

 

f:id:twistinhaurin:20200602154654p:plain

 

 

「クラス名」と「画像のURL」は書き換えて下さい。

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

クラス名は自分が分かりやすい文字を入れて下さい。

画像に名前をつけるみたいな事です。

使用できる文字は、半角英数字、ハイフンとアンダーバーで、アルファベットから入れて下さい。(数字、記号から入れないで下さい)

 

次に画像のURLを入れます

 

 

 

画像のURLを入れる 

すでに記事の中で使ってる画像を使いたい時は、画像の上で右クリック2回すると出る「画像アドレスをコピー」をクリック。

これで画像のURLをコピー出来ます。

f:id:twistinhaurin:20200907171358p:plain

 

はてなフォトライフからならどの画面からでも、画像を右クリックで「画像アドレスをコピー」出来ると思います。

f:id:twistinhaurin:20200907171058p:plain

 

上記でコピーしたアドレスを「画像のURL」の所と書き換えて下さい。

 

画像作りは、こちらの「かぶりっこメーカー」お勧めです(^O^)/

www.iconpon.com


 

.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

上のコードはクラス名を重複しない様にすれば、いくらでも増やせますよ(*^^*)

 

最後に「変更を保存する」を忘れない様にクリックしましょう!

f:id:twistinhaurin:20200522165623p:plain

 

 

HTML画面にコードを入れる

記事を書く画面で「HTML編集」画面にします。

f:id:twistinhaurin:20200904135420p:plain

 


吹き出しを入れたい所に、下のコードを入れる。

<p class="l-fuki クラス名">ここに文章を入れる</p>

 

 例えば・・・

<p class="l-fuki クラス名">どんな感じになるかというと</p>

どんな感じになるかというと

 

<p class="r-fuki クラス名">こんな風に表示されるんです (*^^*)</p>

こんな風に表示されるんです (*^^*)

POINT

lとrで向きが変わります。

 

今回こちらのサイトを参考にさせて頂きましたm(__)m

www.notitle-weblog.com

スマートフォンでの表示方法、Chrome 拡張機能をインストールして使う方法など詳しく載ってます! 

 

あとがき

クラス名を増やして画像を変えるだけで、記事にメリハリやポップさが増して見やすくなりますよ (*^^*)

いろんな画像を作っておくと便利かと思います。

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

 

 

\読者登録してもらえると嬉しいです/