独学!Webサイト構築日誌

16日目:朝からやる気MAX。

9:00

昨晩HP全体の構成を考えていたら、やりたい事が増えちゃいました。細々したものが多いので、サクっと終わらせちゃいましょう。
  1. 0日目の前日リンクが-1日になってる。
  2. メニューボタンを軽い見た目に変更。
  3. 日誌一覧と画像一覧の合体。
  4. 参照元の記述方式変更。

午後から今年度最後の図書館に行く予定なので、昼までに半分ぐらいは終わらせたいですね。

1.0日目の前日リンクが-1日になってる。

日付を渡すところが、「nowTextNo=0(nowTextNoに0を代入)」になっていました。
「nowTextNo===0(nowTextNoと0が等しい)」が正しい記述ですね。
            
JS ※一部抜粋
if(nowTextNo===0){//0日のとき
backText ='TOP画面';
backURL = 'https://ki-luck.info';
}else{
            
        

2.メニューボタンを軽い見た目に変更。

メニューボタンが重いせいで、サイト上部が無駄に重厚感ある状態になっているので、簡単なものに変更します。

11:00

headerが全く言うこと聞いてくれません。反抗期か。反抗期なのか。
※position関係の参考サイト。
ここで時間食っても勿体ないので、諦めて次に行きます。
            
css
#top-nav {
list-style: none;
overflow: hidden;
margin:0 auto;
}
#top-nav li {
width: 20%;/*メニューの大きさ*/
float: left;
text-align: center;
text-decoration: none;
color: #000;
height:2rem;
line-height: 2rem;
border-bottom: 3px solid #808080;
margin: 1rem 2% 0 2%;
}
#top-nav li:hover:first-letter {
font-size: 150%;
color: #eb6100;
}
            
        

3.日誌一覧と画像一覧の合体。

画像の横に日誌タイトルと目標を配置したい。

13:00

画像が上手く配置できませんね...先にお昼だ。

16:00

お昼&買い物&図書館終了。

17:00

やっと出来た...。
タイトルでh2を使用している関係で、画像が上寄せになっていました。padding-topを使って下方向に移動出来たのは良いものの、フレーム付けると空白が出来てしまう。そこで、position指定してやるとあっさり解決しました。
            
html ※一部抜粋
<div id="main" class="p-diary">      
<h1>日誌一覧</h1>
<div class="fullBody">
<a class="dayImg" href="/diary/day0.html"><img src="../img/day0.jpg" alt="day0" title="day0"></a>
<div class="rightBody"><a class="dayTitle" href="/diary/day0.html"><h2>0日目:さて。</h2></a>
<br>
<b>大目標:これから1ヶ月以内(2020年12月末)を目安に、現在使っているこのブログのWebサイトを自分で構築できるようにする。</b>
</div>
</div>
<div class="fullBody">
<a class="dayImg" href="/diary/day1.html"><img src="../img/day1.jpg" alt="day1" title="day1"></a>
<div class="rightBody">
<a class="dayTitle" href="/diary/day1.html"><h2>1日目:始めるぞ。</h2></a>
<ol>
    <li>URLリンクをクリックしたら飛べる状態にする。</li>
    <li>上部にメニューをつける。</li>
    <li>進捗画像掲載。</li>
</ol>
</div>
</div>


css
/*日誌一覧関係-------*/
.p-diary ol{
border:none!important;
}
.p-diary a{
text-decoration: none;
}
.p-diary img{
position:relative;
top:3rem;
float:left;
width:30% !important;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
}
.p-diary .fullBody{
float:left;
width:100%;
margin-bottom: 3rem;
}
.p-diary .rightBody{
float:right;
width:65% ;
margin: 0 1rem;
min-height: 100px;
}
            
        

4.参照元の記述方式変更。

今後フォルダ整理することも考え、URLで直接参照しているような部分をすべてフォルダ指定に置き換えていきます。詳細は省略しますが、下記の例のようにすべて変更していきます。
            
例:"https://ki-luck.info/js/update-time.js" → "../js/update-time.js"

19:00

「それでは聞いてください。"突然の頭痛"」と歌いだしそうな程さっきまで頭が痛かったので、先に夕飯とお風呂を済ませて、その後魚を捌いてたところ、頭痛が弱まった。何かラッキー。
まだ微妙に痛いので、さっさと終わらせましょう。

終了。

明日は日誌画面のレイアウト変更と、併せてメニューバーの固定に再挑戦。それが早く終わればスマホ向けの画面も作成してみよう。



Before: 15日目

Before: 15日目

After: 16日目

After: 16日目



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

≪ 15日目≪ 一覧に戻る ≫17日目 ≫

HOME > 日誌一覧 > 16日目:朝からやる気MAX。