独学!Webサイト構築日誌

19日目:もう大晦日だぜ?

9:00

あっという間の1年という言葉がありますが、本当にそれ。
2020年は退職、FX裁量取引の難しさを心身ともに実感、MQL5独学で学びEA開発する楽しさ、html/css/JS/phpを独学で学びHP作成する楽しさなど、夏以降 積極的に動いた1年でしたね。

ま、今からまだやるんだけどね。

今日の目標は故知覧!
  1. head/titleなどを含めたヘッダー固定。
  2. メニューバー固定。
  3. 動的なパンくずリストの作成。
  4. JSの最終更新日をphpにする。

1.head/titleなどを含めたヘッダー固定。

昨晩寝る前に調べていたところ、head部分を含めてもSEO的に問題無さそうだったので、headerにまとめてしまおうかと。
前にJSで実装しようとしたらSEO的にマズイと言う事だったので、念のためもう少し調べてから実装します。

10:30

現状調べた感じ、JSではダメですが、phpなら問題無さそうだったので、ココを参考にフッターもまとめちゃいます。

11:30

こんなにシンプルで良いのか、てぐらいシンプルになってますねw
動的にタイトルを取ってくる方法が分からずコピペにしていますが、今後そこも自動化したいですね。

            
html ※テンプレート
<?php $title = "◆日目:◆| 独学!Webサイト構築日誌";?>
<?php include("../php/header.php"); ?>
<div class="middle-body">
    <div id="main">
        <h1>◆日目:◆</h1>

        ◆日目の進捗。<br>
        <a href="../img/day◆.jpg" target="_blank"><img src="../img/day◆.jpg" alt="after" title="after"></a>
    </div>
    <!-- ココからJavaScript読み込み -->
    <script src="../js/update-time.js"></script>
    <script src="../js/back-next.js"></script>
</div>
<?php include("../php/footer.php"); ?>


php header.php
<!DOCTYPE html><!--HTML使用宣言-->
<html>
    <head>
        <link rel="stylesheet" href="../other/style.css">
        <meta charset="utf-8">
        <title><?php echo $title; ?></title>
        <meta name="description" content="html/css/JavaScript 未経験の管理人が、Webサイトを独学で学びながら、実際に構築していくまでの日誌。構築中に得た知識や技術をすべて無料で公開。作業経過の画像も載せてます。">
        <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-5"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-183998735-5');
        </script>
    </head>
    <body>
        <div id="header">
            <div class="headerImg">
                <a href="../" target="_top"><img src="/img/title.jpg" alt="独学!Webサイト構築日誌" title="独学!Webサイト構築日誌"></a>
            </div>
            <div class="headerNav">
                <ul class="menu">
                    <a href="../" target="_top"><li>HOME</li></a>
                    <a href="../other/diary_index.html" target="_top"><li>日誌一覧</li></a>
                    <a href="../other/favorite-site_index.html" target="_top"><li>便利サイト一覧</li></a>
                    <a href="../other/testpage.html" target="_top"><li>実験用</li></a>
                </ul>
            </div>
        </div>

        
php footer.php
<footer width="100%">
<ul>
    <h2>etc...</h2>
    <li><a href="../other/me.html" target="_top">プロフィール</a></li>
    <li><a href="../other/privacy-policy.html" target="_top">プライバシーポリシー, 免責事項</a></li>
    <li><a href="http://ki-luck.info/script/mailform/main/" target="_blank">お問い合わせ</a></li>
</ul>
<ul>
    <h2>相互リンク</h2>
    <li><a href="https://twitter.com/ki_luck_master?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @ki_luck_master</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></li>
    <li><a href="https://zaitaku.ki-luck.info/" target=”_blank”>在宅魂</a></li>
    <li><a href="https://doinaka.ki-luck.info/" target=”_blank”>ど田舎魂</a></li>
</ul>
</footer>
</body>
</html>
            
        

13:00

食材と日本酒の買い出しに行ったんですが、指先が千切れるぐらい寒かったので、湯たんぽも買ってきた。最近布団の中が寒かったの。昼食食べてくる。

15:00

ついでに燻製仕掛けてきた。作業再開。

2.メニューバー固定。

やっとstickyが言うこと聞いてくれました。ちなみに参考はココで、上手く動かないときはココ参考にどうぞ。
解決策1の親の高さを確保ってのがよく分からなかったのですが、メニューを最上部に配置したらどういうことか分かりました。
「div class="headerNav"」の1階層上に「div id="header"」てのを作ってたんですが、要はこの中でしか固定出来てなかっただけでした。なので、「div id="header"」を消して「body」の中で動くようにしてやりました。
            
html ※一部抜粋
<body>
<div class="headerImg">
    <a href="../" target="_top"><img src="/img/title.jpg" alt="独学!Webサイト構築日誌" title="独学!Webサイト構築日誌"></a>
</div>
<div class="headerNav">
    <ul class="menu">


css ※追加分
.headerNav{
    background-color: #ffffff;
    position: sticky;
    top: 0;
}
            
        
「position: relative;」が悪さをしているようで、h2と日誌一覧のimgで表示が崩れていますが、日誌の表示画面を変更する段階で一緒に考えましょう。

2.動的なパンくずリストの作成。

そもそもパンくずリストって何よ、て人はココらへん読んでおきましょう。
カテゴリー分けどうしようかな、と考えましたが、今使ってるフォルダ名をそのままカテゴリーにすることにしました。折角プログラム弄れるので、適当な日本語に変えたものを表示させるようにしましょう。

16:30

いくつか方法があるようなのですが、セキュリティ的に使わない方が良い方法もあるようなので、ココを参考にやっていきましょう。流れは下記みたいな感じ。
個人的に、パンくずリストを使うことは稀なので、フッター上に配置することにします。
参考サイト php: explodehtml: 特殊文字

            
html ※1行目だけ変更。
<?php $textTitle = "19日目:もう大晦日だぜ?"; $title = $textTitle. " | 独学!Webサイト構築日誌"; ?>


php breadcrumb.php
<?php
$nowURL = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; //現在のURL格納 ※https:除く。
$categoryPart = explode("/", $nowURL);
// $categoryPart[0]; HP
// $categoryPart[1]; フォルダ
// $categoryPart[2]; 現在のページ
$categoryBase[0] = 'https://'. $categoryPart[0];
$categoryBase[1] = 'https://'. $nowURL;

if($categoryPart[1] == ""){//トップページのとき。
    echo    '⌂<a href="https://ki-luck.info">'. 'ホーム</a>';
}else if($categoryPart[1] == "diary"){//日誌のとき。
    echo    '⌂<a href="https://ki-luck.info">ホーム</a> > '.
            '<a href="https://ki-luck.info/other/diary_index.html">日誌一覧</a> > '.
            '<a href="'. $categoryBase[1]. '">'. $textTitle. '</a>';
}else{
    echo    '⌂<a href="https://ki-luck.info">ホーム</a> > '.
            '<a href="'. $categoryBase[1]. '">'. $textTitle. '</a>';
}
?>
            
        

18:30

正直お腹が空きましたが、サラっと終わらせちゃいましょう。

3.JSの最終更新日をphpにする。

参考サイト php: 値取得
            
<?php echo "更新日 ". date( "Y/m/d H:i", getlastmod() ); ?>
            
        

19:30

トップページで、参照元の関係でエラーを吐くので、fotter.phpの中に2と3両方直接入れました。
ちょっとコピペしてきます。

終了。


この後は大晦日らしく、1人で飲んだくれようと思うので、少し早めのお開き。
多分明日は仕事にならないので、お休みする予定。

FXのポジションもプラスに転じたので、気分良いですw

完成と呼べる状態での終わりにはなりませんでしたが、個人的には良い感じのサイトになってきていると思います。お問い合わせフォームの完成を1月初旬に実装できれば、合計1ヶ月でゼロからHP完成と言えるでしょう。





それでは皆様良いお年を。







Before: 18日目

Before: 18日目

After: 19日目

After: 19日目



作成日:2020/12/31 - 更新日:2021/01/26

≪ 18日目≪ 一覧に戻る ≫20日目 ≫

HOME > 日誌一覧 > 19日目:もう大晦日だぜ?