ブログページ作成メモ

/**
 * 年齢の計算と表示(特殊解)
 * @param {number} sai - ○歳
 * @param {number} kagetsu - △ヶ月
 * @param {number} nichi - □日
 */
    // 誕生日が2022年5月8日の場合
    if(day >= 8){
      var nichi = day - 8;
      var kagetsu = 0;
    }else{
      var nichi = 30 - 8 + day;
      var kagetsu = - 1;
    }
    if(month >= 5){
      var kagetsu = kagetsu + month - 5;
      var sai = 0;
          if(kagetsu == -1){
          var kagetsu = 11;
          var sai = -1;
          }
    }else{
      var kagetsu = kagetsu + 12 - 5 + month;
      var sai = - 1;
    }
    if(year >= 2022){
      var sai = sai + year - 2022;
          if(sai == -1){
          var sai = 0;
          }
    }else{
      var sai = 0;
      var kagetsu = 0;
      var nichi = 0;
    }
    // 年齢の表示
    var insertData = "JRT(B)♀ " + sai + "歳" + kagetsu + "ヶ月" + nichi + "日";
    document.querySelector('#p1').innerHTML = insertData;
});

【base.js】(追加部分)

/**
 * 年齢の計算と表示
 * @param {number} sai - ○歳
 * @param {number} kagetsu - △ヶ月
 * @param {number} nichi   - □日
 * @param {number} Byear - 誕生年
 * @param {number} Bmonth - 誕生月
 * @param {number} Bday - 誕生日の日付
 * @param {number} PMdays - 誕生月の前月の日数
 */
    // 誕生日を入力
    const Byear = 2022;
    const Bmonth = 5;
    const Bday = 8;
    // 誕生月の前月の日数を算出
    if(Bmonth==1||Bmonth==2||Bmonth==4||Bmonth==6||Bmonth==8||Bmonth==9||Bmonth==11){
        var PMdays = 31;
    }
    if(Bmonth==5||Bmonth==7||Bmonth==10||Bmonth==12){
        var PMdays = 30;
    }
    if(Bmonth==3){
        if( (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
        var PMdays = 29;
        } else {
        var PMdays = 28;
        }
    }
    // 年齢の計算
    if(day >= Bday){
      var nichi = day - Bday;
      var kagetsu = 0;
    }else{
      var nichi = PMdays - Bday + day;
      var kagetsu = - 1;
    }
    if(month >= Bmonth){
      var kagetsu = kagetsu + month - Bmonth;
      var sai = 0;
          if(kagetsu == -1){
          var kagetsu = 11;
          var sai = -1;
          }
    }else{
      var kagetsu = kagetsu + 12 - Bmonth + month;
      var sai = - 1;
    }
    if(year >= Byear){
      var sai = sai + year - Byear;
          if(sai == -1){
          var sai = 0;
          }
    }else{
      var sai = 0;
      var kagetsu = 0;
      var nichi = 0;
    }
    // 年齢の表示
    var insertData = "JRT(B)♀ " + sai + "歳" + kagetsu + "ヶ月" + nichi + "日";
    document.querySelector('#p1').innerHTML = insertData;
}); 

【blog.js】(追加部分)
window.addEventListener('load', function(){
  // 現在開いているファイル名を取得
    var blogdate = window.location.href.split('/').pop().slice(0,10);
  // 単独で開かれた場合には親ページへ
    if(window == window.parent) {
            location.href = "../index.html?d=" + blogdate;
    }else{
}
});

【base.js】(変更部分)
    // ブログ記事の表示
    var url = new URL(window.location.href);// URLを取得
    var params = url.searchParams;// パラメータを取得
    if (params == ""){
    var blogdate = data[data.length - 1][0];// 最新ブログ
    }else{
    var blogdate = params.get('d');// 呼び出しブログ
    }
    var insertData = "<iframe name='content' src='./blog/" + blogdate + ".html'></iframe>";
    document.querySelector('#main').innerHTML = insertData;

【yyyy-mm-dd.html】(追加部分)

<p class="move">
　・・・・・・
<button type="button" id="newest">最新</button>
</p><br>


【blog.css】(追加部分)

#newest {
  font-size: 14px;
  color: #000;
  margin: 0px 0px 0px 0px;
}


【blog.js】(追加部分)

// 最新ボタンをクリックした時のイベント設定
    var newest = document.getElementById("newest");
    newest.addEventListener('click', function() {
　　　　location.href = "./" + data[data.length-1][0] + ".html";
    });

　「ブログ画面」はブログ閲覧用、「ブログ作成・編集画面」はブログ作成用
　以下は、ブログを新規作成する場合の手順

　1. 「作業手順」(この書類)を開く(ダブルクリック)
　　「ブログ作成・編集画面」をダブルクリックで開く
　　画面と作業手順を見比べながら作業を進める
　　「作業手順」や「ブログ作成・編集」フォルダはタスクバーのアイコンで手前に表示可能
　　尚、以下の作業において各フォルダは(右クリック／新しいウィンドウで開く)と作業がやりやすい

　2. 登録リストへの登録
　　「登録リスト」を開く(右クリック／プログラムから開く／メモ帳)
　　ブログを追加作成する場所の前や後の行をマウスでドラッグして選択
　　その状態でコピー(右クリック／コピー、またはCtrl+C)
　　マウスで選択行の右端(外)をクリックして選択を解除し、改行(Enter)
　　その状態でペースト(右クリック／ペースト、またはCtrl+V)
　　新たな日付とタイトルを記入する(日付は正確に、タイトルは全角18文字以内)
　　記入したらファイルを保存して(ファイル／保存)、閉じる(×)

　3. ブログデータの準備
　　「ブログ」フォルダ内にある「yyyy-mm-dd.html」をコピー
　　　　　　　(右クリック／コピーアイコン／ペーストアイコン、または Ctrl + C／Ctrl + V)
　　作成されたファイルに「登録リスト」に登録したものと同じ日付を入れる
　　ファイルを「ブログデータ」にドラッグ＆ドロップ

　4. 静止画・動画データの準備
　　スマホやPC、「Googleから転送」フォルダにあるものをこのフォルダに持ってくる
　　サンプルに従って正しいファイル名を付ける(日付部はyyyymmdd形式)
　　ファイルを「静止画・動画データ」フォルダにドラッグ＆ドロップ

　■ブログ作成画面の説明
　【読み込み】ボタン
　　表示されたページのデータは自動で読み込まれるので基本的には操作不要
　　【データの確認・表示】ボタンを押す前であれば、作業の途中で再読み込みが可能

　【データの確認・表示】ボタン
　　クリックの都度、入力した内容を確認・表示
　　ただし【出力】ボタン以降の作業を行なわない限りデータは保存されない

　【出力】ボタン
　　(1)貼り付ける内容の選択とコピー
　　　「出力」ボタンをクリックしてテキスト画面を表示
　　　<div id='b11' hidden>〜</div>(すべて)をマウスのドラッグで選択
　　　選択(青く)した状態でキー(Ctrl + C)を押してコピー
　　　作業が終わるまでは取りあえず「OK」はしないでそのまま画面を開いておく
　　(2)貼り付け先の選択とペースト
　　　「ブログデータ」フォルダをダ開く
　　　対象の日付の付いた作業中のファイルを開く(右クリック／プログラムから開く／メモ帳)
　　　中段部にある<div id='b11' hidden>〜</div>をマウスのドラッグで選択
　　　選択(青く)した状態でキー(Ctrl + V)を押してペースト
　　(3)ファイルの保存
　　　貼り付けが終了したら保存(ファイル／保存)して閉じる(×)
　　　開いたままのテキスト画面を「OK」で閉じる

　以上の作業を行なうと、作成したブログファイルが保存される。
　追加の作業や修正は、この状態から行なえる。