独学!Webサイト構築日誌

27日目:当然の二日酔い。

8:00

夜中に二度も目が覚め、当然の二日酔い。
お酒如きにやられるとは、私もまだまだ未熟ですね。

本日の目標は故知覧!
  1. 更新日順に記事を載せる。
  2. Google Adsenceに申請。
  3.  その他収益化についても少し触れる。

いざ!

1.更新日順に記事を載せる。

            
html ※追加分
<?php include("php/showNew.php"); ?>


php ※showNew.php
<div class="rightBody">
    <h2>最新記事一覧</h2>
    <?php
        // 更新日時順で並び替える関数
        $sort_by_lastmod = function($a, $b) {
        return filemtime($b) - filemtime($a);
        };
        
        // 並び替えして出力
        $files = glob( './diary/*.*' );
        $URL = array();
        $num = 0;
        usort( $files, $sort_by_lastmod );
        foreach( $files as $file ) {
            if($num<3){
                $fileURL = basename( $file );
                $imgURL = explode(".", $fileURL);
                $theDay = explode("day", $imgURL[0]);
                echo '<div class="showNew">'.
                    '<a href="/diary/'. $fileURL. '" target="_top">'.
                    '<div class="showNewTitle">'. $theDay[1]. '日目</div>'.
                    '<img src="/img/'. $imgURL[0]. '.jpg"></a></div><br>';
                $num++;
            }
        }
    ?>
    </div>
</div>


css ※style.css
/*トップページ ---------------------*/
.leftBody{
    float: left;
    width:70%;
}
.rightBody{
    float: left;
    margin-left: 5%;
    width: 25%;
}
.showNew {
    position: relative;
}
.showNew a{
    text-decoration: none;
}
.showNew img{
    width:100%;
    border-top: 4px solid #d8dcdc;
    border-right: 4px solid #666;
    border-bottom: 4px solid #333;
    border-left: 4px solid #868888;
    border-radius: 0;
}
.showNew .showNewTitle{
    width: 100%;
    position: absolute;
    top: 40%;
    text-align: center;
    font-size: 300%;
    font-weight: bold;
    background: rgba(255,255,255,0.7);
    color: #808080; 
}

css ※style-sp.css
/*トップページ ---------------------*/
.showNew {
    position: relative;
    padding-left: 2rem;
}
.showNew a{
    text-decoration: none;
}
.showNew img{
    width:100%;
    max-width: 300px;
    border-top: 4px solid #d8dcdc;
    border-right: 4px solid #666;
    border-bottom: 4px solid #333;
    border-left: 4px solid #868888;
    border-radius: 0;
}
.showNew .showNewTitle{
    width: 100%;
    max-width: 300px;
    position: absolute;
    top: 30%;
    text-align: center;
    font-size: 300%;
    font-weight: bold;
    background: rgba(255,255,255,0.7);
    color: #808080; 
}
            
        

16:30

スライドショーで表示させようと思い、phpからJSへ値受渡しやら、phpの中にJS入れたりを3時間ぐらい頑張ったけど、全く上手く出来ないので仕方なく画像表示にした。

2.Google Adsenceに申請。

難しくないので、ココを参考にやってもらえれば大丈夫です。
注意点としては、headerじゃなくてhead内に書き込む、てとこぐらいですね。

さて、その他の収益化の方法ですが、アフィリエイトのメジャーどころで下記3つに登録しています。
審査に関する内容などの詳細は、色んなサイトでまとめられていますが、正直とりあえず申請してみなさいと言いたい。
というのも、WordPressでHP立ち上げて3日目ぐらいで申請しても通ったことはあるので、ある程度完成したと思ったら申請したらいい。





はい。

てことで、これにて大目標が達成したとします! (。・ω・)ノ☆ネ兄☆ヽ(・ω・。)



大目標

このブログのWebサイトを自分で構築できるようにする。








明日からは、やり残している&今後起きそうな問題に対処していきます。

昨年末までの完成とは行きませんでしたが、悩みながらも1ヶ月以内で完成したので良かったです。
この後は読書するので、明日からまた頑張ります。

現実はそんな甘くないんだぜ?と目を覚ましてくれる内容の本ですが、参考になる。
【説明】カラーで分かり易いが、内容は難しい。これが本業の人たちがやってることか...と遠い目をしたくなる。ただ、146ページからは実際のWebサイト構築内容になっており、プロの構築方法を参考にしながら組めるのは良い。一通り構築し終えたら、再度読み直したい。



Before: 26日目

Before: 26日目

After: 27日目

After: 27日目



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

≪ 26日目≪ 一覧に戻る ≫28日目 ≫

HOME > 日誌一覧 > 27日目:当然の二日酔い。