独学!Webサイト構築日誌

4日目:まずは別件から。

8:30

昼食用の干物の煮物完成。我ながら文字に起こすと謎の料理だなw
昨晩FXのトレードルールで、良さげなものを見つけたので、先にそちらのプログラミングに取り掛かる。プログラム作成自体は1時間程度で終わる予定だが、簡易検証やらで今日はそちらに時間が取られそう。

一応本日の目標は、こんな感じ。
  1. サイドバーを右側に変更。
  2. サイドバーにtwitterを表示。
  3. 各日誌の機能的・効率的な参照方法を実装する。
  4. 「日誌」のカテゴリーページを準備し、タイトル一覧表示。
  5. フッター作成。
  6. h1~h4までの書式をcssで加える。
  7. サイドバーにアイコン付きのリンクを貼り付ける。
  8. 過去の日誌のヘッダー、サイドバーを整える。
  9. 書きなぐっている文章を整える。
  10. メニューバーがズレているので、真ん中にする。

11:30

別件に、予定より大幅に時間がかかってしまった。お腹が空いたので先にお昼だ。

13:00

お散歩がてら買い物に行ってきたんだけども、雪が降っていたでござる。そりゃ寒いわ。
じゃ、頑張るべ。

1.サイドバーを右側に変更。

名称を「left-nav」→「nav」に戻しましたが、別に戻さなくても良いです。2でtwitterを貼り付けるので、それも考えcssは下記に変更。参考サイトはココ
            
div#main {
background-color: #ffffff;
width: 65%;
padding: 10px;
margin: 0 10px;
min-height:700px;
}
nav{
width: 30%;
float: right;
min-height:700px;
}
            
        

2.サイドバーにtwitterを表示。

これは公式ページに記載があったような…。やっぱりあった。
            
<nav>
<a class="twitter-timeline" data-width="300" data-height="700" data-theme="light" href="https://twitter.com/ki_luck_master?ref_src=twsrc%5Etfw">Tweets by ki_luck_master</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</nav>
            
        

14:00

何故か若干左に寄っているのが気になりますが、一旦良しとしましょう。

3.各日誌の機能的・効率的な参照方法を実装する。


...本屋行くの忘れてた...雪降る中また出かけてきます...。

16:00

寒い...苦行かと思うほど寒い...。
しかも借りてきた本が、既知の内容という...何の問題解決にもならん。
ん~...現在の知識では、強引だと思っていた方法が唯一の方法らしいな。今後JavaScript辺りを使えば自動で書き換えできたりするのかな。

残念だけども諦めて、次。

4.「日誌」のカテゴリーページを準備し、タイトル一覧表示。

下記の内容を記載したhtmlを作成しただけ。リンクの貼り方はこれまで通り。
                                
<p><h1>日誌</h1>
<ul>
<li><a href="/diary/day0.html">0日目:さて。</a></li>
<li><a href="/diary/day1.html">1日目:始めるぞ。</a></li>
<li><a href="/diary/day2.html">2日目:始めたぞ。</a></li>
<li><a href="/diary/day3.html">3日目:サブメニューに苦戦なう。</a></li>
<li><a href="/diary/day4.html">4日目:まずは別件から。</a></li>
</ul></li>             
</p>
            
        

17:00

形は汚いものの、HPの形が出来たので、ここからは整えていく作業に移る。

5.フッター作成。

                  
<footer>
<p>
<div style="text-align: center">
<h4>その他</h4>
<a href="/me.html">プロフ</a>
</div>
</p>
</footer>
            
        

18:00

6.h1~h4までの書式をcssで加える。

後日修正するとして、一旦下記にしました。参考サイト。
                  
h1 {
padding: 1rem 2rem;
border-top: 4px solid #d8dcdc;
border-right: 4px solid #666;
border-bottom: 4px solid #333;
border-left: 4px solid #868888;
border-radius: 0;
background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
}
h2 {
font-size: 150%;
position: relative;
padding: 1rem 2rem;
border-bottom: 6px solid #808080;
}
h2:before {
position: absolute;
bottom: -6px;
left: 0;
width: 20%;
height: 6px;
content: '';
background: #C0C0C0;
}
h3 {
padding: 1rem 2rem;
border-bottom: 3px solid #808080;
}
h4 {
position: relative;
padding: 1.5rem;
text-align: center;
}
h4:before {
position: absolute;
bottom: -5px;
left: calc(50% - 30px);
width: 60px;
height: 5px;
content: '';
border-radius: 3px;
background: #000;
}
            
        


お腹減ったので、続きは夕飯後...。


19:00

夕飯終了。再開だ。

7.サイドバーにアイコン付きのリンクを貼り付ける。

今までのおさらいなのでcode略。

8.過去の日誌のヘッダー、サイドバーを整える。

コピペの繰り返しです。プログラムでちゃちゃっと直せるようになりたいね。

9.書きなぐっている文章を整える。

よし。修正したので多少読みやすくなったように思う。
それにしても、初日から順調に進歩しており満足。w

10.メニューバーがズレているので、真ん中にする。

...何で右に寄ったままなんだ...。ちょっとした事なんだろうけど、さっぱり分からん。

とりあえず、改善できそうなところで、
・言う事聞かないサブメニューを削除。
・TOP画像変更。
・ヘッダーメニューとTOP画像の上下交換。


12時間近く作業して目が疲れたので、今日はこれで終わり。風呂入ろー。



Before: 3日目

Before: 3日目

After: 4日目

After: 4日目



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

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

HOME > 日誌一覧 > 4日目:まずは別件から。