独学!Webサイト構築日誌

32日目:換気扇...

9:00

天気は良いのに寒い!今日も頑張るぞ!
  1. Google Adsence設置。
  2. 学習手順&構築ルートに参考図書載せる。
  3. トップページに制作物リンク作る。
  4. 記事に共有ボタン作成。

1.Google Adsence設置。

昨日審査に通っていたようで、今から設置。
記事数が10ぐらいのときはダメだったので、30ぐらい書いてたら大丈夫なのかな。(日誌:27日目に申請)

「要注意 - 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」という物々しいエラーが早速出ていますが、ヘルプ参照していきましょ。

「ads.txt ファイルをサイトのルート ディレクトリにアップロードします。サイトのルート ディレクトリとは、トップレベル ドメイン直下のディレクトリ(フォルダ)を指します(配置例: example.com/ads.txt)。」

...ちょっと何言ってんのか分かんない。 なるほどね。

て感じですね。簡単。

9:30

換気扇修理を本日の9時にやっていただく予定でしたが、私より先に同じ物件内で同様の故障があったらしい。
それで、部屋番号を間違えて連絡していたと電話があり、修理は先延ばしです。
酷い音がしているので早く直してもらいたいですが、仕方ないですね。



さて広告ですが、2021年1月現在4種類あるようです。
※ディスプレイ広告、インフィード広告、記事内広告、検索エンジン。

検索エンジンは既に自分で作成していますし、検索で広告が出てくると個人的にイラっとするのでパス。
残り3つを使っていきましょう。

A: ディスプレイ広告

簡単5ステップ
1. 名前決める。(例:topPage_ad)
2. 形決める。(例:横長タイプ)
3. 広告サイズ決める。(例:レスポンシブ)
4. 「作成」押す。
5. html/JS が表示されるので、表示したいところにコピペ。



b: インフィード広告

このサイトを例に挙げると日誌一覧のように、似たような形式がズラっと並んでいるようなページに配置できる広告のようです。
自動で配置する場合は、配置予定のURLをコピペして検索するようですが、形式が崩れると嫌なので手動で配置することにします。

自動で配置する場合 1. 「自動で広告スタイルを作成する」にチェック。
2. 広告挿入予定のURL貼り付け。(例:https://ki-luck.info/other/index_diary.html)
3. Desktop か モバイル 選択。
4. 「ページをスキャン」押す。
5. 点線部分とオレンジ色部分があると思うので、オレンジ色部分を適当に選択。
6. 「次へ」押す。

手動で配置する場合
1. 「手動で広告スタイルを作成する」にチェック。
2. 種類選択。(例:横の画像)
3. 「次へ」押す。

これ以降の流れはどちらも同じで、好みに合わせて変更する。
後の流れはディスプレイ広告と同じですが、自動の方が選ぶ項目が多いという謎。

やたらと配置されるのも見苦しいので、10記事ごとに配置されるようにphp組んでみた。
※夕方にエラーが起こったので、同日20時頃修正。



c. 記事内広告

流れはディスプレイ広告と同じ。
一旦パンくずリスト下に配置することにしました。



11:00

さて、配置は終わったものの、表示自体には時間がかかるようなので後日確認してみましょう。

2.学習手順&構築ルートに参考図書載せる。

コピペだけの簡単なお仕事。即終了。

11:30

ハラヘリホー。

12:00

昼飯食べてきた。先に図書館と買い出し行ってきます。



14:00

帰宅。&正直に言おう。



広告邪魔だなwwww



いや、これ邪魔だなーw どうすっかなーw
こんな邪魔だと思わなかったので、少し調整してみます。

14:30

1ページあたり広告1つにしたらマシになった。最下部なので邪魔にもならんだろう。
収益には繋がりづらい配置だけども、広告を見せまくるより親切だと思う。

3.トップページに制作物リンク作る。

折角作ったからアピールしたいっ!てことで、トップページにリンク作ろ。

作った。

4.記事に共有ボタン作成。

これでPV数爆上がりですよ。()
とりあえず作ってこ。

Facebookの共有ボタンは公式ページでリンク作成できるので、コレでも良いかも。いいね!付けたいならコッチ
いいね!ボタン付けようとするとJS必須みたいなので、リンク先だけ作ろう。
ロゴは公式から貰いましょう。


Twitterの共有ボタンはコチラが詳しい。
ロゴは公式から貰いましょう。


Lineの共有ボタンは公式参照でいんじゃないかな。JS邪魔だから取っ払うけど。
ロゴは上記リンクの中ほどにあるので貰いましょう。


18:00

phpも少し弄って、下記の様にしました。
            
php ※forDiary.php 一部抜粋。
//シェアボタン---------------
echo '<br><br><div class="shareUpdate">'.
    //facebook
    '<a class="shareBtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u='. $categoryBase[1]. '&src=sdkpreparse" class="fb-xfbml-parse-ignore"><img src="../img/logo_f.png" alt="シェアボタン" title="シェアボタン"></a>'.
    //Twitter
    '<a class="shareBtn" href="http://twitter.com/share?text='. kensa($GLOBALS['title']). '&url='.  kensa($categoryBase[1]). '&via=ki_luck_master&related=ki_luck_master rel="nofollow" target="_blank"><img src="../img/logo_t.png" alt="シェアボタン" title="シェアボタン"></a>'.
    //Line
    '<a class="shareBtn" href="https://social-plugins.line.me/lineit/share?url='.  $categoryBase[1]. '" target="_blank"><img src="../img/logo_l.png" alt="シェアボタン" title="シェアボタン"></a>'.
'</div>';
//更新日
echo '<div class="shareUpdate">作成日:'. $creationDate. ' - 更新日:'. date( "Y/m/d", getlastmod() ). '</div><br>';

css
/*更新日 + シェアボタン-----*/
.shareUpdate{
  text-align: center;
}
.shareBtn img{
  width: 2rem;
  padding: 0 5px;
}
            
        

リンクのhtml部分だけ抜き出すと、こんな感じ。
            
<div class="shareUpdate">
	<a class="shareBtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://ki-luck.info/diary/day10.html&src=sdkpreparse"><img src="../img/logo_f.png" alt="シェアボタン" title="シェアボタン"></a>
	<a class="shareBtn" href="https://twitter.com/share?ref_src=twsrc%5Etfw" data-show-count="false" data-text="10日目:仕上がって来てるんでは | 独学!Webサイト構築日誌" data-url="https://ki-luck.info/diary/day10.html" data-via="ki_luck_master" data-related="ki_luck_master" data-size="large" data-lang="en" target="_blank"><img src="../img/logo_t.png" alt="シェアボタン" title="シェアボタン"></a>
	<a class="shareBtn" href="https://social-plugins.line.me/lineit/share?url=https://ki-luck.info/diary/day10.html" target="_blank"><img src="../img/logo_l.png" alt="シェアボタン" title="シェアボタン"></a>
</div>
            
        



今日は終わりにしよう...と思いきや、日誌一覧の広告が悪さしてる...夕飯食ってから直す。ハラヘリ。

20:00

飯食った。php修正、css追加。
            
php ※forDiary.php 一部抜粋
if($num2!=0 && $num2%10==0){
    echo '<div class="googleAd">[ここにGoogle Adsence貼る]</div>';
}


css
.indexDiary .googleAd{
    float:left;
    width: 90%;
    margin: 3rem;
}
            
        

JS/phpのセキュリティ関連書籍を購入してきたので、本日はそれを読んで勉強してきます。
今週末にはセキュリティも含めて完成させたいね。



作成日:2021/01/13 - 更新日:2021/01/26

≪ 31日目≪ 一覧に戻る ≫33日目 ≫

HOME > 日誌一覧 > 32日目:換気扇...