独学!Webサイト構築日誌

9日目:良い感じに

9:00

今日はまったりやってきます。
  1. 7日目と8日目の文章 整理。
  2. プロフィール修正。
  3. 便利サイト一覧作成。
  4. 前へ 次へ ボタン追加。
  5. ヘッダーメニューの中央寄せ。

10:30

1. 7日目と8日目の文章 整理。

サクっと終了。

11:00

2.プロフィール修正。

これもサクっと終了。

続きは昼飯食べてから。

12:00

3.便利サイト一覧作成。

完了。


続きは買い物行ってから。 → 帰宅。

14:00

4.前へ 次へ ボタン追加。

日誌を書くごとに、hrefでリンク先を記載していくこともできるが、それだと毎度変更する必要があるので手間なので、自動で変更してくれるようにしよう。

流れは、
・html+cssでボタン作成。
・リンク先はJavaScriptを呼び出して随時変更。

17:30

ひとまず出来ました。
が、現在の仕様だとx日目まで日誌があるとして、(x+1)日目をクリックするとエラーになってしまう。ここから先はphpなどに頼る必要があるようなので、一旦諦めます。
参考サイト列挙。

            
html
<p class="back-next">
<a id="diary-back" href="../" target="_top">前へ</a>
<a id="diary-all" href="../other/diary_index.html" target="_top">日誌一覧</a>
<a id="diary-next" href="../" target="_top">次へ</a>
</p>
<!-- ココからJavaScript読み込み -->
<script src="../js/back-next.js"></script>


css
.back-next{
text-align: center;
}
.back-next a{
text-decoration: none;
text-align: center;
margin:10px;
padding:10px 15px;
border:1px #ccc solid;color:#000053;
border-radius: 5px / 5px;
}


JavaScript
let dBack = document.getElementById('diary-back');
let dNext = document.getElementById('diary-next');
let frontTextNo = location.href.indexOf('/diary/day');
let backTextNo = location.href.indexOf('.html');
let nowTextNo = Number(location.href.substring(frontTextNo+10,backTextNo));//現在の日付 数値変換
let fileLink = location.href.substring(frontTextNo+10,0);//~~dayまでのURL

if((nowTextNo-1)<0){//0日のとき
dBack.textContent='TOP画面';
dBack.href = 'https://ki-luck.info'
}else{
dBack.textContent=(nowTextNo-1) + '日目';
dBack.href = fileLink + (nowTextNo-1) + '.html';
}
dNext.textContent=(nowTextNo+1) + '日目';
dNext.href = fileLink + (nowTextNo+1) + '.html';
            
        

20:00

5.ヘッダーメニューの中央寄せ。

ずっとほったらかしにしていたので直しましょう。


22:30

全く直らん。
考えられること全部試したが上手くいかん。
現状幅を30%*3=90%にしているので、見かけ上は上手くいっているが、根本的な解決にはなってない。後日知識が増えたらやり直そう。
というわけで今日はお終い。



Before: 8日目

Before: 8日目

After: 9日目

After: 9日目



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

≪ 8日目≪ 一覧に戻る ≫10日目 ≫

HOME > 日誌一覧 > 9日目:良い感じに