独学!Webサイト構築日誌

2日目:2日前から早起き。

8:00

ちょっとサボり気味だった早起きを2日前から再開しました。
早起きすると、1日が長く感じるので良いですね。

本日の目標は故知覧!

  1. トップページのフォーマット作成。
  2. ヘッダーをphp化。
  3. フッターをphp化。
  4. 制作物を移管。
  5. MySQL構築&検索機能追加。
  6. 制作物リンク解除。

1.トップページのフォーマット作成。

html/cssを弄っていく。
既に完成図は作成しているので、出来るだけそれに近づける。

10:00

意識飛びそうなぐらい腹が減っているので、先にブランチにする。

11:00

ブランチ食った。大まかなフォーマットも完成した。

            
html ※index.html全文
<!DOCTYPE html><!--HTML使用宣言-->
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style-sp.css">
        <meta charset="utf-8">
        <title>気まぐれ製作所</title>
        <meta name="description" content="これあったら便利だな、というツール・ソフトウェアを気が向いたときに作るところ。気ままに更新してるので、気が向いたときに訪問してください。">
        <meta name="robots" content="index">
        <link rel="icon" type="image/vnd.microsoft.icon" href="img/icon.ico">
        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="img/icon.ico">
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-183998735-6"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-183998735-6');
        </script>
    </head>
    <body>
        <header>
            <a href="/"><img class="titleImg" src="img/title.jpg" alt="気まぐれ製作所" title="気まぐれ製作所"></a>
            <nav>
                <ul>
                    <a href="/"><li>HOME</li></a>
                    <li>Excel</li>
                    <li>html/css/JS</li>
                    <li>その他</li>
                </ul>
            </nav>
        </header>
        <div class="topPage">
            <div class="middleBody">
                <h4><span class="nameTitle name1">新着</span></h4>
                <div class="item3">
                    <div class="productBody"><img src="img/icon.ico" alt="pro1">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro2">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro3">
                        <div>ここに説明文</div>
                    </div>
                </div>
                <h4><span class="nameTitle name2">Excel</span></h4>
                <div class="item3">
                    <div class="productBody"><img src="img/icon.ico" alt="pro1">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro2">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro3">
                        <div>ここに説明文</div>
                    </div>
                </div>
                <h4><span class="nameTitle name3">html/css/JS</span></h4>
                <div class="item3">
                    <div class="productBody"><img src="img/icon.ico" alt="pro1">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro2">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro3">
                        <div>ここに説明文</div>
                    </div>
                </div>
                <h4><span class="nameTitle name4">その他</span></h4>
                <div class="item3">
                    <div class="productBody"><img src="img/icon.ico" alt="pro1">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro2">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro3">
                        <div>ここに説明文</div>
                    </div>
                </div>
            </div>
            <div class="sideBody">
                <h4><span class="nameTitle name0">人気製品</span></h4>
                <div class="item5">
                    <div class="productBody"><img src="img/icon.ico" alt="pro1">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro2">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro3">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro4">
                        <div>ここに説明文</div>
                    </div>
                    <div class="productBody"><img src="img/icon.ico" alt="pro5">
                        <div>ここに説明文</div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <nav>
                <ul>
                    <li>このサイトについて</li>
                    <li>プライバシーポリシー/免責事項</li></a>
                    <li>お問い合わせ</li>
                    <li>サイトマップ</li>
                </ul>
            </nav>
        </footer>
    </body>
</html>
            
        
            

css ※全文
@charset "utf-8";
@media only screen and (min-width: 1000px) {
  /*文字装飾 start-------------
  h1 {
  }
  h2 {
  }
  h3 {
  }
*/
  h4{
    border-bottom: solid 3px #000000;
    margin: 1rem;
    padding-top: 3rem;
    font-size: 150%;
  }

  /*全体--------------*/
  body{
    background-color:	 #ffffff;
    width:1000px;
    text-align: center;
    margin: 0 auto;
  }
  .middle-body{
    background-color: #ffffff;
    width: 100%;
  }
  
  /*ヘッダーメニュー --------------------*/
  header{
    width: 100%;
    background-color:#ffffff;  
  }
  header .titleImg{
    width: 20%;
    display: inline-block;
    vertical-align: middle;
  }
  header nav{
    width: 75%;
    display: inline-block;
  }
  header ul{
    list-style: none;
  }
  header ul li {
    width: 20%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
  }

  /*フッターメニュー --------------------*/
  footer{
    width: 100%;
    background-color:#ffffff;
    margin-top: 5rem;
  }
  footer nav{
    width: 100%;
    display: inline-block;
  }
  footer ul{
    list-style: none;
  }
  footer ul li {
    width: 20%;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #000;
    margin: 0 auto;
  }

  /*トップページ-------------*/
  .topPage .middleBody{
    width: 70%;
    display: inline-block;
    text-align: left;
  }
  .topPage .middleBody .nameTitle{
    padding: 0 1rem;
  }
  .topPage .middleBody .name1{
    background: linear-gradient(#ffffff 50%,#00ffff);
  }
  .topPage .middleBody .name2{
    background: linear-gradient(#ffffff 50%,#006400);
  }
  .topPage .middleBody .name3{
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  }
  .topPage .middleBody .name4{
    background: linear-gradient(#ffffff 50%,#000080);
  }
  .topPage .middleBody .item3{
    width:100%;
    text-align: center;
  }
  .topPage .middleBody .item3 .productBody{
    display: inline-block;
    width:20%;
    margin:0 1rem;
  }
  .topPage .sideBody{
    width: 25%;
    display: inline-block;
    vertical-align: top;
  }
  .topPage .sideBody h4{
    background: linear-gradient(#ffffff 50%,#ffd700);
  }
  .topPage .sideBody .item5 .productBody{
    width:100%;
    padding:0 1rem;
    margin-bottom: 1rem;
  }
}
            
        

2.ヘッダーをphp化。

トップページの必要部分をコピペするだけ。

            
php ※header.php全文
<?php
function mojicheck($mojicheck){//入力チェック
    $mojicheck = htmlspecialchars($mojicheck, ENT_QUOTES);
    $mojicheck = preg_replace('![|;&`()$"<>*{}]!','|', $mojicheck);
    return $mojicheck;
}
$mototitle = mojicheck($tTitle)." | 気まぐれ製作所";
$descriptionA = mojicheck($description). "|これあったら便利だな、というツール・ソフトウェアを気が向いたときに作るところ。気ままに更新してるので、気が向いたときに訪問してください。";
?>
<!DOCTYPE html><!--HTML使用宣言-->
<html>
<head>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-sp.css">
    <meta charset="utf-8">
    <title><?php echo mojicheck($mototitle); ?></title>
    <meta name="description" content=<?php echo mojicheck($descriptionA); ?>>
    <meta name="robots" content="index">
    <link rel="icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../img/icon.ico">
    
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-183998735-6"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-183998735-6');
    </script>
</head>
<body>
    <header>
        <a href="/"><img class="titleImg" src="../img/title.jpg" alt="気まぐれ製作所" title="気まぐれ製作所"></a>
        <nav>
            <ul>
                <a href="/"><li>HOME</li></a>
                <li>Excel</li>
                <li>html/css/JS</li>
                <li>その他</li>
            </ul>
        </nav>
    </header>
            
        

3.フッターをphp化。

            
php ※fotter.php 全文
            <?php
            footerFront($creationDate);
            function footerFront($creationDate){
                $nowURL = mojicheck($_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); //現在のURL格納 ※https:除く。
                $categoryPart = explode("/", $nowURL);
                // $categoryPart[0]; HP
                // $categoryPart[1]; フォルダ
                // $categoryPart[2]; 現在のページ .html付き
                $categoryBase[0] = mojicheck('https://'. $categoryPart[0]);//HP
                $categoryBase[1] = mojicheck('https://'. $nowURL);//現在

                //シェアボタン---------------
                echo '<br><br><div class="shareUpdate">'.
                //facebook
                '<a class="shareBtn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u='. mojicheck($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='. mojicheck($GLOBALS['title']). '&url='.  mojicheck($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='.  mojicheck($categoryBase[1]). '" target="_blank"><img src="../img/logo_l.png" alt="シェアボタン" title="シェアボタン"></a>'.
                '</div>';
                //更新日
                echo '<div class="shareUpdate">作成日:'. mojicheck($creationDate). ' - 更新日:'. date( "Y/m/d", getlastmod() ). '</div><br>';
                
                //パンくずリスト----------------------
                echo '<div class="bread">';
                if($categoryPart[2] == ""){//トップページのとき。
                    echo    '⌂<a href="'. mojicheck($categoryBase[0]). '">HOME</a>';
                }else{//他
                    echo    '⌂<a href="'. mojicheck($categoryBase[0]). '">HOME</a> > '.
                            $categoryPart[1]. ' > '.
                            '<a href="'. mojicheck($categoryBase[1]). '">'. $GLOBALS['textTitle']. '</a>';
                }
                echo '</div>';
            }
        ?>
        <footer>
            <nav>
                <ul>
                    <li>このサイトについて</li>
                    <li>プライバシーポリシー/免責事項</li></a>
                    <li>お問い合わせ</li>
                    <li>サイトマップ</li>
                </ul>
            </nav>
        </footer>
    </body>
</html>
            
        

12:00

4.制作物を移管。

移管ついでにリンクも編集していく。


12:30

自動で最新記事を取ってくるように変更したいので、ちょっとphp弄る。


13:30

画像は表示できたけど、タイトルどうやって取って来ようかね。


14:00

htmlからタイトルだけ取ってくる方法はコチラを参考にした。

            
html ※一部抜粋。
<div class="topPage">
<div class="middleBody">
    <?php include("php/showNew.php"); ?>
</div>
<div class="sideBody">
            
        
            
php ※全文
<?php
    function mojicheck($mojicheck){//入力チェック
        $mojicheck = htmlspecialchars($mojicheck, ENT_QUOTES);
        $mojicheck = preg_replace('![|;&`()$"<>*{}]!','|', $mojicheck);
        return $mojicheck;
    }
?>

<h4><span class="nameTitle name1">新着</span></h4>
<?php showNewPic('all'); ?>
<h4><span class="nameTitle name2">Excel</span></h4>
<?php showNewPic('excel'); ?>
<h4><span class="nameTitle name3">html/css/JS</span></h4>
<?php showNewPic('html-css-js'); ?>
<h4><span class="nameTitle name4">その他</span></h4>
<?php showNewPic('other'); ?>

<?php
    showNewPic($productType);
    function showNewPic($productType){
        echo '<div class="item3">';

        // 更新日時順で並び替える関数
        $sort_by_lastmod = function($a, $b) {
            return filemtime($b) - filemtime($a);
        };

        // 並び替えして出力
        if($productType=='all'){
            $files = array_merge(glob('excel/*.*'),glob('html-css-js/*.*'),glob('other/*.*'));            
        }else{
            $files = array_merge(glob( $productType. '/*.*' ));
        }
        $num = 0; //記事数
        usort( $files, $sort_by_lastmod );
        foreach( $files as $file ) {
            if($num<3){
                $categoryPart = explode("/", $file);// $categoryPart[1]; フォルダ
                $imgURL = 'img/'. $categoryPart[0]. '.jpg';
                
                //記事からタイトル取ってくる。
                $url = 'https://software.ki-luck.info/'. mojicheck($file);
                $html = mb_convert_encoding(file_get_contents($url), "utf-8", "auto");
                preg_match('@<title>(.*)</title>@', $html, $result);
                $baseTitle = explode("|",$result[1]);

                echo '<div class="productBody">'.
                    '   <a href="'. mojicheck($file). '">'.
                    '   <img src="'. mojicheck($imgURL). '" alt="pro1">'.
                    '   <div>'. mojicheck($baseTitle[0]). '</div></a>'.
                    '</div>';
                $num++;
            }
        }
        $file = null;//解放
        echo '</div>';
    }
?>
            
        

日向ぼっこしてくる。


15:00

日向ぼっこ終了。ついでにきな粉餅食べて来た。


5.MySQL構築&検索機能追加。

正直、現状必要性を感じませんが、検索用に作りましょう。

SQL関係は、しっかりと理解してから使用した方が良いと思うので、24日目25日目辺りを参考に頑張ってみてください。


16:00

cssの設定も含めて完了。htmlなどは前回とほぼ同じなので省略。


16:30

6.制作物リンク解除。

動作確認をすべて試しましたが、問題無さそうなので、このサイトの製品リンクを削除していきます。


サクっと終了。

まだ時間がありますが、明日から行う更新内容について整理する時間に充てます。

体感レベルで圧倒的に構築スピードが上がってるのが嬉しいw

お疲れ~。



Before: 1日目

Before: 1日目

After: 2日目

After: 2日目



作成日:2021/02/02 - 更新日:2021/02/02

≪ 1日目≪ 一覧に戻る ≫3日目 ≫

HOME > 新日誌一覧 > 2日目:2日前から早起き。